PERANCANGAN APLIKASI WEB MOBILE
PORTAL MALL
SKRIPSI
Disusun oleh :
HENDRIK PRASTIYO
NPM. 1034010083
J URUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
J AWA TIMUR
PERANCANGAN APLIKASI WEB MOBILE
PORTAL MALL
SKRIPSI
Diajukan Untuk Memenuhi Sebagai Persyaratan Dalam Memperoleh Gelar Sarjana Komputer
Jurusan Teknik Informatika
Disusun oleh :
HENDRIK PRASTIYO
NPM. 1034010083
J URUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
J AWA TIMUR
LEMBAR PENGESAHAN
PERANCANGAN APLIKASI WEB MOBILE
PORTAL MALL
Disusun Oleh :
HENDRIK PRASTIYO
NPM. 1034010083
Telah disetujui untuk mengikuti Ujian Negar a Lisan Periode Bulan Februari 2014 Tahun Akademik 2013/2014
Pembimbing Utama
Rizky Par lika, S.Kom, M.Kom NPT. 3 8405 07 0219 1
Pembimbing Pendamping
M.Syahrul Munir, S.Kom NPT. 3 8912 13 342 1
Mengetahui,
Ketua J urusan Teknik Infor matika Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional ”Veteran” J awa Timur
SKRIPSI
PERANCANGAN APLIKASI WEB MOBILE
PORTAL MALL
Disusun Oleh :
HENDRIK PRASTIYO
NPM. 1034010083
Telah dipertahankan di hadapan dan diterima oleh Tim Penguji Skr ipsi Pr ogram Studi Teknik Infor matika Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional ”Veteran” J awa Timur Pada Tanggal 21 Februari 2014
Pembimbing : 1.
Rizky Par lika, S.Kom, M.Kom NPT. 3 8405 07 0219 1
Tim Penguji : 1.
Rizky Par lika, S.Kom, M.Kom NPT. 3 8405 07 0219 1
2.
M.Syahr ul Munir, S.Kom NPT. 3 8912 13 342 1
2.
Basuki Rahmat, S.Si, MT NPT. 3 6907 06 0209 1 3.
I Made Suar tana, S.Kom, M.Kom NPT.
Mengetahui,
Dekan Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional ”Veteran” J awa Timur
YAYASAN KESEJ AHTERAAN PENDIDIKAN DAN PERUMAHAN UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” J AWA TIMUR
FAKULTAS TEKNOLOGI INDUSTRI PANITIA UJIAN SKRIPSI / KOMPREHENSIF
J l. Raya Rungkut Madya Gunung Anyar Telp. (031) 8706369 (Hunting). Fax. (031) 8706372 Sur abaya 60294
KETERANGAN REVISI Mahasiswa di bawah ini :
Nama : Hendrik Prastiyo NPM : 1034010083 Jurusan : Teknik Informatika
Telah mengerjakan revisi/ tidak ada revisi*) PRA RENCANA (DESIGN) / SKRIPSI / TUGAS AKHIR Ujian lisan periode Bulan Februari 2014, TA 2013/2014 dengan judul:
“
PERACANGAN APLIKASI WEB MOBILE PORTAL MALL”Surabaya, Februari 2014 Dosen Penguji yang memerintahkan revisi:
1) Rizky Parlika, S.Kom, M.Kom
NPT. 3 8405 07 0219 1 { }
2) Basuki Rahmat, S.Si, MT
NIP. 3 6907 06 0209 1 { }
3) I Made Suartana, S.Kom, M.Kom { }
Mengetahui, Pembimbing Utama
Rizky Parlika, S.Kom, M.Kom NPT. 3 8405 07 0219 1
Pembimbing Pendamping
Judul : PERANCANGAN APLIKASI WEB MOBILE PORTAL MALL
Pembimbing I : Rizky Parlika, S.Kom, M.Kom Pembimbing II : M.Syahrul Munir, S.Kom Penyusun : Hendrik Prastiyo
ABSTRAK
Mall adalah salah satu pusat perbelanjaan yang secara arsitektur berupa
bangunan tertutup dengan suhu yang diatur dan memiliki jalur untuk berjalan jalan yang teratur sehingga berada di antara toko-toko kecil yang saling berhadapan. Karena bentuk arsitektur bangunannya yang melebar (luas), umumnya sebuah mall memiliki minimal tinggi tiga lantai.Mall bukanlah tempat yang isinya hanya satu toko dan satu macam barang saja, namun banyak toko berjajar dengan berbagai jenis barang yang ditawarkan di dalamnya. Hal ini membuat sebagian besar orang merasa kesulitan untuk mencari informasi tentang sebuah toko yang ingin dikunjungi.
Melalui sebuah Web Mobile ini, orang-orang baik itu mahasiswa maupun pegawai yang berkunjung di Mall untuk mencari produk akan lebih mudah dalam mencari informasi diskon produk dan pencarian produk. Orang-orang juga tidak perlu berkeliling untuk mencari produk yang ingin di cari melalui aplikasi ini yang dapat menghemat waktu.
Untuk menangani hal tersebut, maka Perancangan Aplikasi Web Mobile
Portal Mall ini di rancang menggunakan Adobe Dreamweaver serta menggunakan
database Phpmyadmin dan juga Code Lobster sebagai editor. Perancangan aplikasi portal mall berbasis WEB Mobile pada Mobile (gadget) ini diharapkan dapat menyelesaikan masalah penyediaan informasi yang sekarang ada di mall dan dapat mempermudah customer untuk mendapatkan informasi tentang mall dan juga mempermudah pada sisi penjual untuk menginformasikan produk-produk yang dijual.
KATA PENGANTAR
Puji syukur ke pada Allah SWT atas segala rahmat kasihnya dan atas limpahan rahmat-Nya sehingga dengan keterbatasan saya baik waktu, tenaga, dan pikiran yang saya miliki, akhirnya saya dapat menyelesaikan laporan Tugas Akhir ini tepat pada waktunya.
Penulis membahas masalah tentang Modul Pembelajaran yang berjudul “Perancangan Aplikasi Web Mobile Portal Mall”.
Saya menyadari masih banyak sekali kekurangan dalam menyelesaikan tugas akhir ini, namun saya juga berharap semoga laporan tugas akhir ini dapat menunjang perkembangan IT. Kritik dan saran yang membangun saya harapkan dalam menyelesaikan laporan ini. Akhirnya dengan ridho Allah kami berharap semoga laporan tugas akhir ini dapat memberikan manfaat bagi para pembaca.
Surabaya, Februari 2014
UCAPAN TERIMA KASIH
Puji syukur ke hadirat Allah SWT yang telah memberikan rahmat dan karunia-Nya, sehingga dapat terselesaikannya Tugas Akhir ini.Dengan selesainya tugas akhir ini tidak terlepas dari bantuan banyak pihak yang telah memberikan masukan-masukan. Untuk itu penyusun mengucapkan terima kasih sebagai perwujudan rasa syukur atas terselesaikannya tugas akhir ini dengan lancar. Ucapan terima kasih ini saya tujukan kepada :
1. Bapak Prof. Dr. Ir. Teguh Soedarto, MP selaku Rektor Universitas Pembangunan Nasional “Veteran” Jawa Timur.
2. Bapak Ir. Sutiyono, MT selaku Dekan Fakultas Teknologi Industri UPN “Veteran” Jawa Timur.
3. Dr. Ir. Ni Ketut Sari, MT. selaku Ketua Jurusan Teknik Informatika UPN “Veteran” Jawa Timur.
4. Rizky Parlika, S.Kom , M.Kom selaku dosen pembimbing I pada Tugas Akhir ini, yang telah banyak memberikan petunjuk, masukan, bimbingan, dorongan serta kritik yang bermanfaat sejak awal hingga terselesainya Tugas Akhir ini.
6. Terima kasih buat Ayah serta Ibu tercinta yang telah memberi semangat, dorongan dan doa yang tiada henti-hentinya. Terima kasih buat teman-teman kost 37A yang telah menjadi motivasi sehingga dapat terselesaikannya tugas akhir ini.
7. Terima kasih kepada teman-teman Teknik Informatika 2010 yang telah memberikan dorongan serta doa, yang tak bisa penulis sebutkan satu persatu. Terima kasih yang tak terhingga untuk kalian semua.
8. Terima kasih buat Erlina Lukitasari yang selalu memberi semangat buat penyelesaian tugas akhir ini.
Terima kasih atas bantuannya semoga Allah SWT yang membalas semua kebaikan dan bantuan tersebut
Surabaya, Februari 2014
DAFTAR ISI
KATA PENGANTAR ... i
UCAPAN TERIMA KASIH ... ii
DAFTAR ISI ... iv
DAFTAR GAMBAR ... vi
DAFTAR TABEL... iEr r or! Bookmar k not defined.Er ror! Bookmar k not defined. BAB I PENDAHULUAN ... 1
1.1Latar Belakang ... 1
1.2Rumusan Masalah ... 2
1.3Batasan Masalah ... 3
1.4Tujuan ... 3
1.5Manfaat ... 4
1.6Sistematika Penulisan ... 4
BAB II TINJAUAN PUSTAKA ... 7
2.1Sejarah Mall ... 7
2.1.1 Etimologi dan Kegunaan Kata ... 8
2.1.2 Kegunaan Mall Sekarang ... 8
2.2PHP (Hypertext Preprocessor) ... 9
2.3CSS (Cascading Style Sheet) ... 11
2.4HTML ... 12
2.5Alat Bantu Pemodelan Sistem ... 15
2.6Jquerry Mobile ... 20
2.7Javascript ... 20
2.8Code Lobster ... 21
2.9Pengujian BlackBox ... 23
2.10 Web Mobile ... 23
BAB III ANALISIS DAN PERANCANGAN ... 24
3.1Analisis ... 24
3.1.1 Analisis Sistem Yang Sedang Berjalan ... 25
3.1.2 Analisis Sistem Yang Akan Dibangun ... 27
3.2Perancangan ... 34
3.2.2 Acitvity Diagram ... 37
3.2.3 Sequence Diagram ... 80
3.2.4 Collaboration Diagram... 97
3.2.5 Class Diagram ... 109
3.2.6 ER Diagram ... 109
3.2.7 Perancangan Data ... 114
3.2.8 Spesifikasi Kebutuhan Sistem ... 124
BAB IV IMPLEMENTASI DAN PENGUJIAN ... 127
4.1Implementasi ... 127
4.2 Implementasi Desain Antarmuka ... 128
4.2.1 Antar Muka Sub-Sistem Administrator Mall ... 128
4.2.2 Antar Muka Sub-Sistem Administrator Outlet ... 138
4.2.3 Antar Muka Sub-Sistem Pengunjung ... 144
4.3 Uji Coba dan Hasil... 147
4.3.1 Uji Coba Cari Produk Iklan... 147
4.3.1 Uji Coba Cari Produk Berdsarkan Kategori... 148
4.3.3 Uji Coba Lihat Detail Produk ... 149
4.3.3 Uji Coba Lihat Rekomendasi Produk ... 151
4.3.4 Uji Coba Tanpa Memasukan Data... 151
4.4 Uji Validasi Korelasi Pearson ... 152
BAB V KESIMPULAN DAN SARAN... 158
5.1 Kesimpulan ... 158
DAFTAR GAMBAR
Gambar 3.1 Flowchart Sistem Yang Berjalan ... 27
Gambar 3.2 Flowchart Sistem Yang Akan Dibangun ... 30
Gambar 3.3 Flowchart Admin Mall Yang Akan Dibangun ... 32
Gambar 3.4 Flowchart Admin Outlet Yang Akan Dibangun ... 33
Gambar 3.5 UML Portal Mall ... 36
Gambar 3.6 Activity Diagram Non Aktif Outlet ... 37
Gambar 3.7 Activity Diagram Aktif Outlet ... 39
Gambar 3.8 Activity Diagram Hapus Outlet ... 40
Gambar 3.9 Activity Diagram Ubah Outlet ... 41
Gambar 3.10 Activity Diagram Hapus Iklan... 42
Gambar 3.11 Activity Diagram Tambah Kategori ... 44
Gambar 3.12 Activity Diagram Tambah Outlet ... 45
Gambar 3.13 Activity Diagram Ubah Kategori... 46
Gambar 3.14 Activity Diagram Hapus Merk ... 47
Gambar 3.15 Activity Diagram Tambah Merk ... 48
Gambar 3.16 Activity Diagram Hapus Admin Outlet ... 49
Gambar 3.17 Activity Diagram Ubah Admin Outlet ... 50
Gambar 3.18 Activity Diagram Tambah Admin Outlet ... 51
Gambar 3.19 Activity Diagram Cari Outlet (Admin Mall) ... 52
Gambar 3.20 Activity Diagram Lihat Review Produk ... 54
Gambar 3.21 Activity Diagram Tambah Produk ... 56
Gambar 3.22 Activity Diagram Ubah Produk ... 57
Gambar 3.23 Activity Diagram Lihat Detail Produk Outlet ... 59
Gambar 3.24 Activity Diagram Hapus Produk ... 60
Gambar 3.25 Activity Diagram Tambah Foto Produk... 61
Gambar 3.26 Activity Diagram Hapus Foto Produk ... 63
Gambar 3.27 Activity Diagram Cari Produk (Admin Outlet) ... 64
Gambar 3.28 Acitvity Diagram Cari Iklan (Admin Outlet) ... 72
Gambar 3.29 Activity Diagram Ubah Password ... 73
Gambar 3.30 Activity Diagram Cari Produk Berdasarkan Kategori ... 75
Gambar 3.31 Activity Diagram Cari Produk... 76
Gambar 3.32 Activity Diagram Lihat Rekomendasi Produk ... 77
Gambar 3.33 Activity Diagram Lihat Detail Produk Pengunjung ... 79
Gambar 3. 34 Sequence Diagram Aktif Outlet ... 80
Gambar 3.35 Sequence Diagram Non Aktif Outlet ... 80
Gambar 3.36 Sequence Diagram Ubah Outlet ... 81
Gambar 3.37 Sequence Diagram Hapus Outlet ... 81
Gambar 3.38 Sequence Diagram Tambah Kategori ... 82
Gambar 3.39 Sequence Diagram Hapus Iklan ... 82
Gambar 3.40 Sequence Diagram Tambah Outlet ... 83
Gambar 3.41 Sequence Diagram Ubah Kategori ... 83
Gambar 3.42 Sequence Diagram Hapus Merk ... 84
Gambar 3.43 Sequence Diagram Tambah Merk ... 84
Gambar 3.44 Sequence Diagram hapus admin outlet ... 85
Gambar 3.46 Sequence Diagram Tambah Admin Outlet ... 86
Gambar 3.47 Sequence Diagram Cari Outlet (Admin Mall)... 86
Gambar 3.48 Sequence Diagram lihat review produk ... 87
Gambar 3.49 Sequence Diagram tambah produk ... 87
Gambar 3.50 Sequence Diagram ubah produk ... 88
Gambar 3.51 Sequence Diagram lihat detail produk (admin outlet) ... 89
Gambar 3.52 Sequence Diagram Hapus Produk ... 90
Gambar 3.53 Sequence Diagram Tambah Foto Produk ... 90
Gambar 3.54 Sequence Diagram Tambah Iklan ... 91
Gambar 3.55 Sequence Diagram Hapus Foto Produk ... 91
Gambar 3.56 Sequence Diagram Cari Produk (Admin Outlet) ... 92
Gambar 3.57 Sequence Diagram Ubah Password ... 93
Gambar 3.58 Sequence Diagram Cari Iklan (Admin Outlet) ... 94
Gambar 3.59 Sequence Diagram Cari Produk Berdasarkan Kategori ... 94
Gambar 3.60 Sequence Diagram Lihat Rekomendsi Produk ... 95
Gambar 3.61 Sequence Diagram Cari Produk Iklan... 95
Gambar 3.62 Sequence Diagram lihat detail produk (pengunjung) ... 97
Gambar 3.63 Collaboration Diagram non aktif outlet ... 97
Gambar 3.64 Collaboration Diagram Ubah Kategori ... 98
Gambar 3.65 Collaboration Diagram Tambah Kategori ... 98
Gambar 3.66 Collaboration Diagram Aktif Outlet ... 98
Gambar 3.67 Collaboration Diagram Hapus Iklan ... 99
Gambar 3.68 Collaboration Diagram Hapus Outlet ... 99
Gambar 3.69 Collaboration Diagram Cari Outlet (Admin Mall) ... 99
Gambar 3.70 Collaboration Diagram Hapus Admin Outlet ... 100
Gambar 3.71 Collaboration Diagram Tambah Merk ... 100
Gambar 3.72 Collaboration Diagram Hapus Merk ... 100
Gambar 3.73 Collaboration Diagram Tambah Outlet... 101
Gambar 3.74 Collaboration Diagram Tambah Admin Outlet ... 101
Gambar 3.75 Collaboration Diagram Ubah Outlet ... 101
Gambar 3.76 Collaboration Diagram Ubah Admin Outlet ... 102
Gambar 3.77 Collaboration Diagram lihat review produk... 102
Gambar 3.78 Collaboration Diagram tambah produk... 102
Gambar 3.79 Collaboration Diagram ubah produk ... 103
Gambar 3.80 Collaboration Diagram Lihat Detail Produk (Admin Outlet) ... 103
Gambar 3.81 Collaboration Diagram Hapus Produk ... 103
Gambar 3.82 Collaboration Diagram Tambah Foto Produk ... 104
Gambar 3.83 Collaboration Diagram Tambah Iklan ... 104
Gambar 3.84 Collaboration Diagram Hapus Foto Produk ... 105
Gambar 3.85 Collaboration Diagram ubah Password... 106
Gambar 3.86 Collaboration Diagram cari iklan (admin outlet) ... 106
Gambar 3.87 Collaboration Diagram cari produk (admin outlet) ... 106
Gambar 3.88 Collaboration Diagram Cari Produk Iklan (Pengunjung) ... 107
Gambar 3.89 Collaboration Diagram Cari Produk Berdasarkan Kategori (Pengunjung) ... 107
Gambar 3.90 Collaboration Diagram Lihat Rekomendasi Produk ... 107
Gambar 3.91 Collaboration Diagram Lihat Detail Produk (Pengunjung) ... 108
Gambar 3.93 Class Diagram Portal Mall ... 1101
Gambar 3.94 ER Diagram Portal Mall... 110
Gambar 3.95 CDM Portal Mall ... 115
Gambar 3.96 PDM Portal Mall... 116
Gambar 4.1 Tampilan Halaman Login Administrator ... 129
Gambar 4.2 Tampilan Peringatan Kesalahan Admin mall ... 129
Gambar 4.3 Tampilan Halaman Utama Admin Mall ... 130
Gambar 4.4 Tampilan Menu Kelola Outlet ... 131
Gambar 4.5 Tampilan Form Tambah Outlet ... 132
Gambar 4.6 Tampilan Form Ubah Outlet ... 132
Gambar 4.7 Tampilan Form Tambah Admin Outlet ... 133
Gambar 4.8 Tampilan Form Ubah Admin Outlet ... 134
Gambar 4.9 Tampilan Data Iklan Outlet ... 134
Gambar 4.10 Tampilan Data Kategori ... 135
Gambar 4.11 Tampilan Form Tambah Kategori ... 136
Gambar 4.12 Tampilan Form Ubah Kategori ... 136
Gambar 4.13 Tampilan Data Merk ... 137
Gambar 4.14 Tampilan Form Tambah Merk ... 138
Gambar 4.15 Tampilan Halaman Administrator Outlet... 138
Gambar 4.16 Tampilan Data Produk ... 140
Gambar 4.17 Tampilan Form Tambah Produk... 140
Gambar 4.18 Tampilan Form Ubah Produk ... 141
Gambar 4.19 Tampilan Detail Produk ... 142
Gambar 4.20 Tampilan Data Iklan (Admin Outlet) ... 142
Gambar 4.21 Tampilan Form Tambah Iklan ... 143
Gambar 4.22 Tampilan Form Tambah Iklan ... 143
Gambar 4.23 Tampilan Utama Halaman Pengunjung ... 144
Gambar 4.24 Tampilan Halaman Home Untuk Pengunjung ... 145
Gambar 4.25 Tampilan Form Cari Produk (Pengunjung) ... 146
Gambar 4.26 Tampilan Isi Iklan ... 146
Gambar 4.27 Tampilan Menu About ... 147
Gambar 4.28 Uji Coba Cari produk Iklan ... 147
Gambar 4.29 Hasil Uji Coba Cari Produk Secara Global ... 148
Gambar 4.30 Uji Coba Cari Produk Berdasarkan Kategori ... 149
Gambar 4.31 Hasil Uji Coba Cari Produk Berdasarkan Kategori ... 149
Gambar 4.32 Uji Coba Untuk Mencari Produk ... 150
Gambar 4.33 Hasil Uji Coba Pencarian Produk ... 150
Gambar 4.34 Hasil Uji Coba Lihat Detail Produk ... 151
Gambar 4.35 Hasil Uji Coba Lihat Rekomendasi Produk ... 151
DAFTAR TABEL
Table 3.1 Tabel outlet yang belum normal………... 111 Table 3.2 Tabel outlet yang sudah normal………
111 Table 3.3 Tabel Produk yang memiliki atribut multivalue………...
111 Table 3.4 Tabel Kategori………...
112 Table 3.5 Tabel outlet dengan hubungan dependency parsial……….
113 Table 3.6 Tabel Outlet tanpa dependency parsial……….
113 Table 3.7 Tabel Iklan tanpa dependency parsial………...
113 Table 3.8 Tabel Basis Data Admin Mall………...
116 Table 3.9 Tabel Basis Data Admin Mall………...
117
Table 3.10 Tabel Basis Data Outlet……… 119
Table 3.11 Tabel Basis Data Iklan……….. 120
Table 3.12 Tabel Basis Data Produk………... 121
Table 3.13 Tabel Basis Data Kategori……… 122
Table 3.14 Tabel Basis Data Merk………..123
Table 3.15 Tabel Basis Data Foto Produk……….. 123
Table 3.16 Level Pengguna dan Hak Akses Admin Mall………... 124
Table 3.17 Level Pengguna dan Hak Akses Admin Outlet……… 125
Table 3.18 Level Pengguna dan Hak Akses Admin Outlet……… 126
BAB I
PENDAHULUAN
1.1 Latar Belakang
Mall adalah salah satu pusat perbelanjaan yang secara arsitektur berupa
bangunan tertutup dengan suhu yang diatur dan memiliki jalur untuk berjalan jalan yang teratur sehingga berada di antara toko-toko kecil yang saling berhadapan. Karena bentuk arsitektur bangunannya yang melebar (luas), umumnya sebuah mall memiliki minimal tinggi tiga lantai.
Penulis memilih Web Mobile sebagai solusi dalam penyelesaian tugas akhir ini mengingat adanya perkembangan software yang sejalan dengan perkembangan hardware pada perangkat handphone, pocket PC, console game, dan multimedia pocket player. Pada saat ini pula pada sebuah perangkat mobile sudah banyak ditemukan aplikasi standalone, yang mana juga terdapat aplikasi-aplikasi mobile web sama seperti web biasa yang diakses dari sebuah personal komputer. Mobile web bertujuan untuk mengakses layanan data secara wireless dengan menggunakan perangkat mobile. Perancangan aplikasi portal mall berbasis
WEB Mobile pada Mobile (gadget) ini diharapkan dapat menyelesaikan masalah
penyediaan informasi yang sekarang ada di mall dan dapat mempermudah
customer untuk mendapatkan informasi tentang mall dan juga mempermudah
pada sisi penjual untuk menginformasikan produk-produk yang dijual.
1.2 Rumusan Masalah
Dari latar belakang yang telah disajikan di atas, terdapat rumusan masalah yang akan dibahas pada laporan ini, antara lain:
a. Bagaimana membuat aplikasi portal mall berbasis WEB Mobile ? b. Bagaimana membuat aplikasi yang dapat memberikan informasi yang
tepat untuk customer ?
1.3 Batasan Masalah
Berikut ini beberapa batasan masalah dari pembuatan “Perancangan Aplikasi Web Mobile Portal Mall”.
a. Aplikasi di khususkan untuk mall.
b. Aplikasi berjalan pada smartphone dan tablet.
c. Aplikasi di bentuk menggunakan bahasa PHP, MySQL, HTML5, J-Querry
Mobile, CSS3, Java Script
d. Aplikasi isi menginformasikan lokasi outlet.
1.4 Tujuan
Adapun tujuan dari pembuatan “Perancangan Aplikasi Web Mobile Portal
Mall” ini adalah:
a. Menyediakan aplikasi yang dapat digunakan untuk membantu cutomer
mall dalam mencari outlet dan memberikan informasi data-data outlet
seperti keberadaan tempat outlet, serta pemberian rating untuk produk yang di jual oleh outlet tersebut.
b. Mempercepat waktu yang dibutuhkan dan memudahkan para customer
mall dalam melakukan pencarian outlet yang mereka inginkan. Sebagai
user cutomer mall yang mencari kost tidak perlu langsung datang ke
tempat outlet untuk informasi outlet.
1.5 Manfaat
Adapun manfaat dari “Perancangan Aplikasi Web Mobile Portal Mall” sebagai berikut.
a. Pembangunan Aplikasi portal mall berbasis WEB Mobile ini, berguna untuk memberikan pelayaan informasi yang lebih mudah di akses oleh pengguna atau pencari tempat outlet tanpa harus mencari dengan secara manual yaitu mencari ke tempat-tempat outlet langsung.
b. Dibangunnya sistem pembuatan Aplikasi portal mall berbasis WEB Mobile yang dapat di akses secara online dan memiliki sistem pengelolaan data terpusat yang berbentuk database management system.
1.6 Sistematika Penulisan
Penyajian laporan tugas akhir ini dibagi menjadi beberapa bab pembahasan. Hal ini bertujuan untuk memudahkan bagi pembaca untuk mencari data atau informasi yang dibutuhkan. Dan juga untuk memenuhi format penulisan ilmiah yang baik dan sistematis serta sudah ditetapkan. Pembagian bab tersebut adalah sebagai berikut.
BAB I PENDAHULUAN
Latar belakang berisi ulasan ringkas mengenai keadaan/kondisi yang ada
dari sistem/aplikasi yang akan dibangun oleh penulis. Batasan masalah berisi batasan – batasan masalah yang diinginkan dan dikerjakan agar tidak keluar dari target yang telah ditetapkan. Manfaat berisi tentang manfaat sistem yang telah di buat oleh penulis. Sistematika penulisan menjelaskan isi dari laporan yang dibuat seperti, permasalahan yang dihadapi, solusi yang diberikan, hasil analisa, produk yang dihasilkan dan juga format penyusunan yang digunakan.
BAB II TINJ AUAN PUSTAKA
Pada bab ini dibahas tentang teori-teori yang mendukung dalam Perancangan Aplikasi Web Mobile Portal Mall.
BAB III ANALISIS DAN PERANCANGAN
Pada bab ini memaparkan proses analisis yang dilakukan dan digunakan untuk menentukan bentuk dari kebutuhan sistem/aplikasi yang dibangun, baik berupa kebutuhan pada saat sebelum pembangunan aplikasi dan pada saat implementasi. Perancangan yaitu penjelasan tentang rancangan sistem/aplikasi yang akan dibangun, terdiri dari perancangan alur program (Flow chart dan Data Flow Diagram), algoritma, data, maupun perancangan input/output sistem/aplikasi.
BAB IV IMPLEMENTASI DAN PENGUJ IAN
antarmuka. Pengujian adalah proses yang dilakukan untuk melakukan pengujian pada sistem/aplikasi sudah dibangun..
BAB V KESIMPULAN DAN SARAN
BAB II
TINJ AUAN PUSTAKA
Pada bab ini, akan dibahas teori-teori dasar yang menjadi bahan pendukung dalam pembuatan Perancangan Aplikasi Web Mobile Portal Mall. Pada perancangan perangkat lunak ini, akan digunakan XAMPP sebagai server lokal. HTML5, PHP, JavaScript, CSS dan JQUERY MOBILE sebagai bahasa pemrograman. Dreamweaver sebagai aplikasi yang berfungsi untuk mendesain
website dan melakukan pemprograman. Adobe PhotoShop sebagai media untuk
mendesain gambar-gambar untuk halaman website. MYSQL sebagai Database
Management System, Power designer sebagai perancang Database dan UML
sebagai perancang dan pendokumentasi sistem piranti lunak yang berbasis OOP. Serta Code Lobster sebagai editor code program.
2.1 Sejar ah Mall
Mall adalah salah satu pusat perbelanjaan yang secara arsitektur berupa
2.1.1 Etimologi dan Kegunaan Kata
Mall adalah kata serapan dari bahasa Inggris “Mall” yang diterjemahkan
menjadi gedung atau kelompok gedung yg berisi macam-macam toko dengan dihubungkan oleh lorong/koridor (jalan penghubung). Dalam bahasa aslinya arti
Mall mirip dengan pengertian Mal dalam bahasa Indonesia.
The Mall, Inggris Istilah Mall berangkat dari nama The Mall (1674) di
Inggris. The Mall adalah jalanan yang menghubungkan Istana Buckingham, Admiralty Arch, Trafalgar Square, St. James' Park, St. James' Palace, Green Park dan House Guards Parades. The Mall dalam abad ke -20 merupakan jalan yang biasa digunakan dalam acara-acara seremonial kerajaan sebagai rute untuk melakukan parade. The Mall dibentuk sedemikian rupa agar pejalan kaki dapat berjalan dengan aman dan nyaman (promenade) dibawah naungan pepohonan.
Sebelum menjadi rute parade, jalanan tersebut kondang dengan nama
Mall karena biasa digunakan untuk bermain Pall Mall, yaitu permainan sejenis
kriket , menggunakan bola (palla=ball) dengan bantuan pemukul (mallet).
Istilah Mall kemudian digunakan untuk suatu kawasan belanja yang terdapat dalam suatu gedung/kompleks yang dinaungi oleh atap. Sejarah Mall dimulai pada abad ke-7 di ibukota Syria, yaitu Damaskus. Kawasan dagang ini dikenal dengan nama Al-Hamidiyah Souq. Souq dalam bahasa Arab berarti kawasan dagang yang umum terdapat di kota Timur tengah/Arab atau kota-kota yang penduduknya beragama Islam.[1]
2.1.2 Kegunaan Mall Sekarang
Saat ini mall murni memiliki konotasi sebagai pusat perbelanjaan atau
mewah dan berkelas. Seiring dengan perkembangan jaman dan untuk lebih banyak menggaet lapisan masyarakat datang ke mall maka mall terdiri dari beberapa macam yaitu.
a. Community mall, biasanya terdapat di sebuah distrik atau kawasan
permukiman tertentu dengan tujuan untuk melayani masyarakat di sekitarnya untuk pemenuhan kebutuhan baik selaku pusat belanja ataupun sekedar jalan-jalan.
b. City mall, biasanya jauh lebih besar dibanding community mall, karena
bertugas untuk melayani aktivitas masyarakat di kota (pinggiran) dengan wilayah-wilayah pemukiman yang tersebar.
c. Regional mall, jauh lebih besar dari city mall dan menjadi semacam ikon (trademark) dari suatu kota (pusat). Daya tarik dari trademark ini sedemikian kuatnya sehingga orang luar yang berkunjung seolah-olah memiliki kewajiban untuk mengunjungi regional mall dari kota yang bersangkutan.
Terdapat pula mall khusus dengan tujuan yang spesifik seperti
entertainment mall dan leisure mall. Mall jenis ini umumnya lebih
mengedepankan fasilitas hiburan dibanding dengan fasilitas belanjanya.[1]
2.2 PHP (Hypertext Preprocessor)
PHP adalah singkatan dari "Hypertext Prepocessor", yaitu bahasa
pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML.
PHP adalah singkatan dari "Personal Home Page Tools". Selanjutnya diganti
menjadi FI ("Forms Interpreter"). Sejak versi 3.0, nama bahasa ini diubah menjadi "Hypertext Prepocessor" dengan singkatannya "PHP". PHP versi terbaru adalah versi ke-5. Berdasarkan survei Netcraft pada bulan desember 1999, lebih dari sejuta site menggunakan PHP, di antaranya adalah NASA,
Mitsubishi, dan RedHat.
Pada bulan Juni 1996, dirilis PHP/FI 2.0. Pada versi ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang
interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada
Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0.
2.3 CSS (Cascading Style Sheet)
CSS diperkenalkan untuk pengembangan website pada tahun 1996. Nama
CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan
secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style. CSS adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam bahasa pemprograman HTML atau sekedar mejadi rujukan oleh HTML dalam pendefinisian style. CSS menggunakan kode-kode yang tersusun untuk menetapkan style pada elemen HTML atau dapat juga digunakan membuat style baru yang biasa disebut class. CSS dapat mengubah besar kecilnya ukuran huruf, mengganti warna background pada sebuah halaman, atau dapat pula mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan oleh CSS.
Kegunaan CSS, antara lain :
a. Mempersingkat penulisan tag HTML : Anda tidak perlu lagi mendefinisikan setiap tag dengan property dan nilai yang sama.
b. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan tulisan.
c. Mudah dan cepat dalam me-maintenance : dikarenakan file CSS dibuat secar terpisah , maka Anda tidak perlu merombak semua elemen atau
property dalam HTML, cukup mengedit file CSS-nya saja.
CSS3 memberikan fitur-fitur yang lebih dibandingkan dengan CSS versi
a. CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya di dalam objek ‘blockquote’ bisa membuat (quote) di
awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri.
b. CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang
sebelumnya tidak bisa dilakukan oleh CSS2/CSS2.1, Dan bisa menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS.
c. Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung.
d. Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound situs.
e. CSS3 tak berbeda jauh dari tingkat-tingkat sebelumnya, hanya saja
memiliki performa style yang jauh lebih baik dan tambahan beberapa fungsi yang menarik.[3]
2.4 HTML
HTML adalah (HyperText Markup Language) merupakan suatu metoda
a. HYPERTEXT
Link hypertext adalah kata atau frase yang dapat menunjukkan
hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web
browser akan memindahkan tampilan pada bagian lain dari naskah
atau dokumen yang kita tuju.
b. MARKUP
Pada pengertiannya di sini markup menunjukkan bahwa pada file
HTML berisi suatu intruksi tertentu yang dapat memberikan suatu
format pada dokumen yang akan ditampilkan pada World Wide Web.
c. LANGUAGE
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Sebuah dokumen HTML terbagi kedalam tiga bagian utama, yakni HTML,
HEAD, serta BODY.
d. HTML
Sebuah dokumen HTML haruslah diawali dengan tag dan di tutup dengan , Tag ini adalah sarana untuk memberikan informasi kepada
browser bahwa apa-apa yang di tulis di dalamnya merupakan sebuah
e. HEAD
Bagian header dari sebuah dokumen HTML diawali oleh tag dan di tutup oleh tag, dan di dalam header di isi pula dengan tag title yakni judul dari dokumen, tag title ini di tulis dengan tag pembuka.
f. BODY
Semua dokumen HTML yang di simpan di dalam BODY semisal teks,
image, link, dan lain sebagainya akan di tampilakan dan bisa di lihat
di dalam browser.
Berikut ini adalah beberapa kelebihan dari HTML5.
a. Local Strorage
Sekarang Storage untuk browser akan diakomodiasikan sebagai standard dalam HTML5. Aplikasi bisa menyimpan data dalam jumlah lebih besar dari biasanya tanpa harus mengimplementasikan trik dengan cookie atau Flash. Tentunya ini kabar baik bagi pengembang aplikasi web. Mungkin bisa meningkatkan performa aplikasi dengan menggunakan storage sebagai local cache.
b. Web Workers
Banyak javascript biasanya yang kita nikmati di web kadangkala menyebabkan komputer kita melambat atau paling tidak membuat
browser seperti sesak nafas maka web worker akan bisa jadi pelega.
c. Video dan Audio
Akan ada tag dan di HTML5. Jadi tidak perlu lagi menempelkan flash untuk sekedar memutar audio. Format video yang didukung akan bervariasi terhadap browser, kemungkinan besar codecnya adalah
Ogg Theora (patent free) dan H.264. Sepertinya sampai sekarang
codecnya masih jadi kontroversi.
d. Canvas
Dulu, untuk bisa memberikan interaksi menggambar di halaman web kita harus memakai applet Java atau Flash. HTML5 akan memberikan satu opsi tambahan: canvas. Seperti namanya, canvas adalah media yang bisa dicorat-coret langsung. Tidak lagi perlu memuat plugin khusus. Cukup tambahkan dan javascript maka kita sudah bisa menggambar langsung di halaman web.
e. Semantics
Buat designer yang sering meng-abuse div dan span sebagia elemen
nav, fret no more. Akan ada tag khusus untuk navigasi, section,
footer, dll. Tag yang kaya semantic seperti ini pasti akan lebih
bermanfaat dari pada tag yang hanya punya informasi format dan
layout saja. Dan bagi mesin, HTML5 akan jadi lebih bisa
dimengerti.[4]
2.5 Alat Bantu Pemodelan Sistem
Unified Modelling Language (UML) adalah sebuah "bahasa" yg telah
mendokumentasikan sistem piranti lunak. UML menawarkan sebuah standar untuk merancang model sebuah sistem.
Tujuan dari pemodelan sistem ini yaitu sebagai dokumentasi dari sistem. Dokumentasi ini nantinya dapat berguna untuk menelaah perilaku sistem dan membantu pengujian sistem yang telah dikembangkan. Alat bantu yang digunakan sebagai pemodelan sistem ini diantaranya adalah sebagai berikut.
a. Use Case Diagram
Use case diagram ini akan menggambarkan tentang bagaimana aplikasi
ini nantinya akan digunakan oleh pengguna. Diagram ini sangatlah penting karena selain untuk desain, dapat juga digunakan untuk mencari kelas-kelas yang nantinya akan terlibat dalam aplikasi, dan untuk pengujian sistem. Objek (orang, perangkat keras, sistem lain, dsb) yang berinteraksi dengan sistem merupakan actor untuk aplikasi ini, dan use
case adalah deskripsi perilaku dari actor.
b. Interaction Diagram
1. Sequence diagram
Sequence diagram digunakan untuk menggambarkan urutan interaksi
yang terjadi antar kelas yang ada tanpa memperhatikan pengorganisasiannya. Diagram ini sangat erat kaitannya dengan use
case diagram, karena interaksi berawal dari suatu actor tertentu dan
kemudian dilanjutkan dengan user.
2. Collaboration diagram
Collaboration diagram digunakan untuk menggambarkan interaksi
collaboration diagram ini sebenarnya sama mirip sekali dengan
sequence diagram. Hanya saja untuk jumlah kelas yang cukup
banyak, sangatlah sulit untuk membaca diagram ini.
3. Class Diagram
Setelah membuat interaction diagram dari use case diagram, kita dapat membuat class diagram untuk sistem. Class diagram adalah sebuah diagram yang menggambarkan hubungan kelas-kelas dalam sistem yang terbentuk setelah kita membuat interaction diagram. Dari
interaction diagram tersebut kita akan mendapatkan nama kelas serta
atribut-atribut yang dapat diterapkan pada kelas/objek yang bersangkutan yang mana nantinya akan dapat dihubungkan menjadi sebuah diagram. Dengan adanya diagram ini kita dapat memetakan aliran event (metoda/fungsi) antar kelas/objek.
4. Statechart Diagram
Statechart diagram memperlihatkan seluruh state dalam satu objek
disertai dengan transisi-transisi nya anatara satu state dengan state yang lain dalam objek yang bersangkutan. Statechart diagram dibuat untuk objek yang memiliki karakteristik sebagai berikut.
a. Memiliki state ganda
b. Harus ada aksi spesifik dalam objek yang terjadi antar suatu objek dengan state yang lain
5. Activity Diagram
Fungsi diagram ini hampir sama dengan use case diagram, hanya saja
diagram activity dapat membantu kita untuk melihat bagaimana
scenario suatu sistem akan berjalan. Dengan kata lain, activity
diagram pada dasarnya menggambarkan scenario sistem secara grafis.
Activity diagram sangatlah mirip dengan flowchart, yang mana
digunakan untuk bahasa pemrograman terstruktur. Berikut ini adalah gambar 2.1 urutan pemodelan UML.
Dari gambar di atas dapat dijelaskan beberapa urutan pemodelan UML, yang diantaranya sebagai berikut.
b. Petakan use case untuk tiap business process untuk
mendefinisikan dengan tepat fungsionalitas yang harus disediakan oleh sistem. Kemudian perhalus use case diagram dan lengkapi dengan requirement, constraints dan catatan-catatan lain.
c. Definisikan requirement lain (non-fungsional, security dan sebagainya) yang juga harus disediakan oleh sistem.
d. Berdasarkan use case diagram, mulailah membuat activity
diagram.
e. Definisikan objek-objek level atas (package atau domain) dan buatlah sequence dan/atau collaboration diagram untuk tiap alir pekerjaan. Jika sebuah use case memiliki kemungkinan alir normal dan error, buatlah satu diagram untuk masing-masing alir. f. Berdasarkan model-model yang sudah ada, buatlah class diagram.
Setiap package atau domain dipecah menjadi hirarki class lengkap dengan atribut dan metodnya. Akan lebih baik jika untuk setiap
class dibuat unit test untuk menguji fungsionalitas class dan
interaksi dengan class lain.
h. Buat deployment diagram detilkan kemampuan dan requirement piranti lunak, sistem operasi, jaringan, dan sebagainya. Petakan komponen ke dalam node.
i. Mulailah membangun sistem. Ada dua pendekatan yang dapat digunakan:
j. Pendekatan use case, dengan meng-assign setiap use case kepada tim pengembang tertentu untuk mengembangkan unit code yang lengkap dengan tes.
k. Pendekatan komponen, yaitu meng-assign setiap komponen kepada tim pengembang tertentu.
l. Lakukan uji modul dan uji integrasi serta perbaiki model berserta
codenya. Model harus selalu sesuai dengan code yang aktual.
m. Piranti lunak siap dirilis.[5]
2.6 Jquerry Mobile
JQuery adalah Javascript Library (Kumpulan kode/fungsi Javascript siap
pakai), sehingga mempermudah dan mempercepat kita dalam pemprograman web
site dengan bahasa Javascript. Secara standar, apabila kita membuat kode
javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat
sulit dipahami. Semenjak pertama kali dirilis apada tahun 2006 oleh J ohn Resig,
JQuery telah mecuri perhatian para developer web.[6]
2.7 Javascript
Javascript adalah bahasa skrip yang populer di internet dan dapat bekerja
Firefox, Netscape, Google Chrom dan Opera. Kode Javascript dapat disisipkan
dalam halaman web site menggunakan tag script.
Javascript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi Javascript. Navigator sebelumnya telah mendukung Java untuk dapat dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemprograman bernama Live Script untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama Javascript, walaupun tidak ada hubungan bahasa antara Java dengan Javascript.
Javascript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek
rollover baik di gambar maupun teks, dan yang penting juga adalah untuk
membuat AJAX (Asynchronous JavaScriptAnd XML).[7]
2.8 Code Lobster
CodeLobster adalah sebuah framework php editor yang mendukung
beberapa plugin yaitu yii, joomla, jquery, CakePhp Symfony, Drupal, Smarty,
Wordpress, Zen, Codeigniter dll. CodeLobster PHP Edition merupakan editor
atau IDE (Integrated Development Environment) untuk bahasa pemrograman
PHP (termasuk juga HTML, Javascript, dan CSS). Aplikasi ini memiliki feature
lengkap serta plugin untuk beberapa CMS (Content Management System) dan
framework yang populer saat ini.
Dengan adanya feature autocomplete (CodeLobster menyebutnya
daftar kelas/fungsi yang dapat digunakan. Feature ini dirasakan cukup akurat, ringan, dan cepat. Meskipun sebetulnya tidak terasa bedanya antara memunculkan pop-up tersebut dan ketika memunculkan fungsi-fungsi standar
PHP/HTML/Javascript. Dengan dukungan berbagai CMS dan framework yang
populer, feature Intelligent autocomplete akan sangat bermanfaat.
a. Intelligent Autocomplete
Selain memprediksi fungsi-fungsi standar PHP, feature ini dioptimalkan untuk memprediksi kelas dan fungsi pada CMS, framework, dan pustaka
Javascript. Selain itu, fungsi ini dapat pula memprediksi Query SQL pada
database yang sudah terhubung.
b. Version Control System
Mendukung berbagai perangkat lunak pengontrol versi (versioning control) seperti SVN, Git, Mercurial, dan TortoiseSVN untuk memudahkan pengelolaan proses pengembangan sistem dalam suatu kelompok kerja yang terpisah.
c. Kekurangan Dan Kelebihan
Plus: Dukungan berbagai CMS dan framework yang populer; harga murah karena lisensi bersifat one-for-all.
2.9 Pengujian BlackBox
Black Box pengujian adalah metode pengujian perangkat lunak yang
menguji fungsionalitas aplikasi yang bertentangan dengan struktur internal atau kerja (lihat pengujian white-box). Pengetahuan khusus dari kode aplikasi / struktur internal dan pengetahuan pemrograman pada umumnya tidak diperlukan. Uji kasus dibangun di sekitar spesifikasi dan persyaratan, yakni, aplikasi apa yang seharusnya dilakukan. Menggunakan deskripsi eksternal perangkat lunak, termasuk spesifikasi, persyaratan, dan desain untuk menurunkan uji kasus. Tes ini dapat menjadi fungsional atau non-fungsional, meskipun biasanya fungsional. Perancang uji memilih input yang valid dan tidak valid dan menentukan output yang benar. Tidak ada pengetahuan tentang struktur internal benda uji itu.[9] 2.10 Web Mobile
Mobile web adalah aplikasi akses internet atau akses internet
menggunakan peralatan yang bersifat mobile berbasiskan browser yang bertujuan untuk mengakses layanan data secara wireless dengan menggunakan perangkat
mobile seperti handphone, PDA dan perangkat portable yang tersambung ke
sebuah jaringan telekomunikasi selular.
Mobile web yang diakses melalui perangkat mobile perlu dirancang
dengan mempertimbangkan keterbatasan perangkat mobile seperti sebuah
handphone yang memiliki layar dengan ukuran yang terbatas ataupun beberapa
keterbatasan pada sebuah perangkat mobile.
Perkembangan mobile web tidak lepas dari masalah Usability dan
interoperability. Permasalahan interoperability dipengaruhi dari fragmentasi
BAB III
ANALISIS DAN PERANCANGAN
3.1 Analisis
Analisis dapat didefinisikan sebagai penguraian dari suatu sistem informasi yang untuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasikan dan mengevaluasi masalah-masalah, kesempatan-kesempatan, hambatan-hambatan yang terjadi serta kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikan.
Tahap analisis merupakan tahap yang kritis dan sangat penting karena kesalahan dalam tahap ini akan mengkibatkan kesalahan pada tahap selanjutnya. Suatu penelitian membuktikan bahwa kesalahan kesalahan yang diperbaiki setelah analisis akan memakan biaya yang lebih besar daripada jika kesalahan diperbaiki saat dilakukannyaanalisis.
Analisis pada Perancangan Aplikasi Web Mobile Portal Mall, terdiri atas ; a. analisis sistem yang sedang berjalan yang merupakan gambaran dari sistem
yang sedang berjalan atau sudah dibangun sebelumnya,
b. analisis sistem yang akan dibangun, merupakan gambaran dari sistem yang akan dibat dan dikembangankan yang merupakan solusi yang diberikan untuk menyelesaikan masalah yang sedang terjadi,
algoritma, perancangan database (CDM dan PDM), struktur menu dan perancangan interface.
3.1.1 Analisis Sistem Yang Sedang Berjalan
Adapun beberapa kelemahan dari sistem yang sekarang diterapkan di
Mall antara lain :
a. Setiap pengunjung tidak dapat mengetahui langsung informasi letak dari
outlet yang ada di dalam mall. Pengunjung harus berkeliling untuk
mencari outlet yang dituju. Padahal outlet tidak selalu berada di tempat yang sama (dalam kurun waktu tertentu).
b. Tidak semua pegawai resepsionis maupun satpam yang paham dan hafal dengan tata letak mall itu sendiri. Pegawai baru sering kali tidak mengetahui tentang info mall, atau mereka hanya memberikan jawaban yang tidak tepat terhadap pertanyaan pengunjung mengenai info mall. Kurangnya informasi tentang produk yang dijual oleh outlet tertentu di
mall, sehingga pengunjung terlamta atau bahkan tidak mengetahui tentang
update info produk tersebut.
Prosedur sistem perancangan aplikasi yang sedang berjalan pada pencarian barang di dalam outlet mall memiliki proses alur sebagai berikut:
a. Pengunjung mendatangi mall yang akan dituju. b. Pengunjung mencari outlet yang ingin dikunjungi.
Berikut ini adalah
Gambar 3.1 Flowchart Sistem Yang Berjalan
3.1.2 Analisis Sistem Yang Akan Dibangun
Aplikasi yang dikembangkan terdiri dari tiga aplikasi yaitu aplikasi untuk customer dan aplikasi untuk outlet/penjual. Fungsionalitas aplikasi untuk
customer sebagai berikut : a. Kategorisasi Produk
Informasi yang disediakan berupa informasi produk–produk yang dijual oleh
outlet-outlet yang terdapat di mall yang sudah dikategorisasi berdasarkan
jenis produknya.
b. Pencarian Produk
Customer dapat melakukan pencarian produk yang ingin dibeli. Pencarian
dapat dilakukan berdasarkan kategori tertentu yang telah disediakan. c. Lihat Detail Barang
Customer dapat melihat detail barang seperti harga, nama outlet, rating
barang, diskon jika ada, dan lokasi outlet. d. Rekomendasi Produk
berdasarkan produk yang mempunyai diskon paling besar atau berdasarkan jumlah rating terbesar.
Sedangkan fungsionalitas aplikasi untuk penjual sebagai berikut : a. Penambahan produk
Fungsionalitas ini digunakan oleh admin outlet untuk menambahkan produk ke database sistem.
b. Lihat Detail Produk
Fungsionalitas untuk melihat detail data barang. c. Delete Produk
Fungsionalitas untuk menghapus data produk. d. Ubah Produk
Fungsionalitas untuk merubah data produk. e. Manage Foto Produk
Fungsionalitas untuk menghapus atau menambah foto produk. f. Lihat Review Produk
Fungsionalitas untuk melihat review produk. g. Tambah Iklan
Fungsionalitas untuk menambah iklan. h. Ubah Password
Fungsionalitas untuk merubah password.
Untuk aplikasi admin mall memiliki fungsionalitas sebagai berikut : a. Activate / Non activate Outlet
Fungsionalitas untuk mengaktifkan atau menonaktifkan outlet.
Fungsionalitas untuk mengedit outlet.
c. Cari Oulet
Fungsionalitas untuk mencari outlet.
d. Delete Outlet
Fungsionalitas untuk menghapus outlet. e. Hapus Iklan
Fungsionalitas menghapus iklan f. Tambah Merk
Fungsionalitas untuk merubah merk. g. Hapus Merk
Fungsionalitas untuk menghapus merk. h. Edit Kategori
Fungsionalitas untuk merubah kategori. i. Tambah Kategori
Fungsionalitas untuk menambah kategori.
j. Tambah Admin Outet
Fungsionalitas untuk menambah admin outlet. k. Hapus Admin Outlet
Fungsionalitas untuk menghapus admin outlet. l. Edit Admin Outlet
Fungsionalitas untuk merubah admin outlet.
Gambar 3.2 Flowchart Sistem Yang Akan Dibangun
Prosedur sistem perancangan aplikasi yang akan dibangun pada sisi client memiliki proses alur sebagai berikut:
a. Pengunjung membuka aplikasi web portal mall lalu ditampilkan halaman utama aplikasi.
kategori pencarian. Setelah kategori tersebut dipilih maka akan ditampilkan data yang dicari. Jika pengunjung memilih menu about maka akan ditampilkan info tentang aplikasi portal mall.
Pada flowchart atau alur diagram admin mall di bawah ini diawali dengan sistem login user terlebih dahulu. Jika user name dan kata sandi yang dimasukkan user salah maka terdapat peringatan bahwa kata sandi yang dimasukkan salah. Namun jika user berhasil masuk maka akan ditampilkan menu – menu diantaranya yaitu kelola outlet, kelola iklan, kelola kategori, kelola merk, dan juga menu terakhir yaitu logout.
Pada menu Home ditampilkan beranda dan sejarah atau profil dari mall.
Home perlu ditampilkan sebagai identitas mall. Selanjutnya jika admin memilih
menu kelola outlet maka akan ditampilkan pilihan menu data outlet, dan data admin outlet. Didalam sub-menu data outlet admin dapat mengubah, menghapus, aktif dan non aktif, dan menambah data outlet. Ketika admin memilih sub-menu data admin outlet maka admin dapat mengubah, menghapus dan menambah data admin outlet. Pada menu kelola iklan maka akan di tampilkan tabel data iklan yang juga dapat digunakan untuk menghapus iklan yang ditampilkan.
Berikut ini adalah gambaran sistem admin mall yang akan dibangun.
Sedangkan pada flowchart atau alur diagram admin outlet di atas juga diawali dengan sistem login user terlebih dahulu. Jika user name dan kata sandi yang dimasukkan user salah maka terdapat peringatan bahwa kata sandi yang dimasukkan salah. Namun jika user berhasil masuk maka akan ditampilkan menu – menu diantaranya yaitu kelola produk, kelola iklan, ubah password, about, dan juga menu terakhir yaitu logout.
Pada menu Home ditampilkan beranda dan sejarah atau profil dari mall.
Home perlu ditampilkan sebagai identitas mall. Selanjutnya jika admin memilih
menu kelola produk maka admin dapat merubah, menghapus, menambah dan lihat detail produk. Pada menu kelola iklan maka akan di tampilkan iklan-iklan yang ada dari outlet tersebut, lalu admin dapat memilih tombol tambah iklan yang kemudian akan memunculkan form input iklan. Pada menu ubah password admin outlet dapat merubah password sesuai dengan keinginan admin outlet tersebut Pada menu about ini akan menampilkan info dari aplikasi yang di buat.
3.2 Perancangan
Pada bagian perancangan ini, penulis memberikan gambaran dari sistem yang akan dibangun seperti, deskripsi alur sistem dalam bentuk Unified
Modelling Language (UML) yang diperjelas dengan speksifikasi proses dan
kamus alir data yang menyertainya, perancangan Database, arsitektur perangkat lunak, struktur diagram dan perancangan user interface.
3.2.1 Use Case Diagram
fungsionalitas mulai dari hapus merk, tambah merk, hapus admin outlet, tambah admin outlet, edit tambah outlet, edit kategori, tambah kategori, aktif outlet, non aktif outlet, edit outlet, delete outlet, tambah outlet, delete iklan, cari outlet .
Actor yang kedua ialah admin outlet yang mana memiliki fungsionalitas mulai
Gambar 3.5 UML Portal Mall
login
cari produk
lihat detail produk pengunjung
lihat rekom endas i produk c ari produk berdasarkan kategori
pengunjung
ac t iv at e out let
<<inc lude>>
non ac tiv at e out let
<<include>>
delet e out let
<<inc lude>> edi t k ategori
<<inc lude>> t ambah adm in outlet <<include>>
edit admin out let
<<include>>
tam bah k ategori
<<include>>
lihat rev iew produk
<<include>>
tam bah produk <<include>>
lihat detail produk <<inc lude>>
delet e produk <<inc lude>>
Ubah Pass word
C ari Produk Berdas arkan Out let
3.2.2 Acitvity Diagr am
3.2.2.1Acitvity Diagr am Admin Mall
Dari gambar Activity Diagram active outlet diatas menjelaskan tentang hak akes admin mall untuk mengaktifkan outlet . Jadi admin mall pertama wajib melakukan login terlebih dahulu dengan memasukan username dan password setelah itu di cek ke-database apakah username dan password tersebut sama dengan seperti di database. Ketika username dan password salah maka wajib mengulang dan jika username dan password benar maka admin mall masuk ke menu admin mall dan pilih menu kelola outlet lalu pilih menu sub menu data
Gambar 3.6 Activity Diagram Non Aktif Outlet
start
masukkan username & password pilih outlet yang akan
di non aktifkan pilih sub menu
Dari gambar Activity Diagram non active outlet di atas menjelaskan tentang hak akes admin mall untuk menonaktifkan outlet . Jadi admin mall pertama wajib melakukan login terlebih dahulu dengan memasukan username dan password setelah itu di cek ke database apakah username dan password tersebut sama dengan seperti di database. Ketika username dan password salah maka wajib mengulang dan jika username dan password benar maka admin mall masuk ke menu admin mall dan pilih menu kelola lalu pilih menu sub menu data outlet lalu pilih outlet mana yang akan di non aktifkan lalu klik status outlet untuk menonaktifkan outlet.
Gambar 3.7 Activity Diagram Aktif Outlet start
masukkan username & password
pilih outlet yang akan di aktifkan
start
masukkan username & password
tampil menu admin mall
pilih menu kelola outlet
pilih outlet pilih sub menu
data outlet
tampil data outlet
cek login [ valid = false ]
[ valid = true ]
ambil data outlet
PDE outlet
admin_mall
Dari gambar activity diagram delete outlet di atas menjelaskan tentang hak akes admin mall untuk menghapus outlet. Admin mall wajib melakukan login terlebih dahulu dengan memasukkan username dan password, setelah itu dicek ke dalam database apakah nilainya valid atau tidak. Ketika username dan password salah maka admin mall harus menginputkan ulang data tersebut. Jika username dan password sudah benar maka admin mall akan langsung masuk ke dalam menu admin mall. Setelah itu actor dapat memilih menu kelola outlet lalu dapat memilih sub menu data outlet dan langsung memilih outlet mana yang akan dihapus. Lalu klik delete outlet.
start
masukkan username & password pilih admin outlet yang akan di edit pilih sub menu
data outlet
Dari gambar activity diagram edit outlet diatas menjelaskan tentang hak akes admin mall untuk merubah outlet yang terdiri dari nama outlet dan tempat outlet. Admin mall wajib melakukan login terlebih dahulu dengan memasukkan username dan password, setelah itu dicek ke dalam database apakah nilainya valid atau tidak. Ketika username dan password salah maka admin mall harus menginputkan ulang data tersebut. Jika username dan password sudah benar maka admin mall akan langsung masuk ke dalam menu admin mall. Setelah itu actor dapat memilih menu kelola outlet lalu memilih sub menu data outlet dan langsung memilih outlet mana yang akan diubah. Setelah itu klik menu edit outlet dan admin mall bisa mengubah data outlet yang lama untuk memasukan data outlet yang baru.
start
masukkan username & password pilih iklan yang
akan di hapus
masukkan username & password
start
tampil menu admin mall
pilih menu kelola kategori
klik tambah kategori
end masukan kategori baru
update kategori baru tampil data
kategori
cek login
[ valid = false ]
[ valid = true ]
simpan kategori baru ambil data
kategori
PDE k ategori
admin_mall
Dari gambar activity diagram tambah kategori diatas menjelaskan tentang hak akes admin mall untuk menambah kategori produk. Admin mall wajib
melakukan login terlebih dahulu dengan memasukkan username dan password, setelah itu dicek ke dalam database apakah nilainya valid atau tidak. Ketika username dan password salah maka admin mall harus menginputkan ulang data tersebut. Jika username dan password sudah benar maka admin mall akan langsung masuk ke dalam menu admin mall. Setelah itu actor dapat langsung memilih menu kelola kategori, lalu klik tambah kategori untuk menambah kategori dan masukan kategori baru tersebut.
Gambar 3.12 Activity Diagram Tambah Outlet start
masukkan username & password pilih sub menu
Dari gambar activity diagram tambah outlet diatas menjelaskan tentang hak akes admin mall untuk menambah outlet. Admin mall wajib melakukan login
terlebih dahulu dengan memasukkan username dan password, setelah itu dicek ke dalam database apakah nilainya valid atau tidak. Ketika username dan password salah maka admin mall harus menginputkan ulang data tersebut. Jika username dan password sudah benar maka admin mall akan langsung masuk ke dalam menu admin mall. Setelah itu actor dapat langsung memilih menu kelola outlet, lalu memilih sub menu data outlet dan klik tambah outlet untuk menambahkan outlet dan masukan data outlet baru.
pilih kategori yang akan di edit
start
masukkan username & password
Dari gambar Activity Diagram edit kategori diatas menjelaskan tentang hak ases admin mall untuk merubah kategori. Admin mall wajib melakukan login terlebih dahulu dengan memasukkan username dan password, setelah itu dicek ke dalam database apakah nilainya valid atau tidak. Ketika username dan password salah maka admin mall harus menginputkan ulang data tersebut. Jika username dan password sudah benar maka admin mall akan langsung masuk ke dalam menu admin mall. Setelah itu actor dapat langsung memilih menu kelola kategori. Pilih kategori yang akan diubah, dan masukan kategori baru tersebut.
Gambar 3.14 Activity Diagram Hapus Merk start
masukkan username & password
tampil menu admin mall
pilih menu kelola merk
Dari gambar activity diagram delete merk di atas menjelaskan tentang hak akes admin mall untuk menghapus merk. Admin mall wajib melakukan login terlebih dahulu dengan memasukkan username dan password, setelah itu dicek ke dalam database apakah nilainya valid atau tidak. Ketika username dan password salah maka admin mall harus menginputkan ulang data tersebut. Jika username dan password sudah benar maka admin mall akan langsung masuk ke dalam menu admin mall. Setelah itu actor dapat memilih menu kelola merk dan langsung memilih merk mana yang akan dihapus. Lalu klik delete merk.
Gambar 3.15 Activity Diagram Tambah Merk
Dari gambar activity diagram tambah merk diatas menjelaskan tentang hak akes admin mall untuk menambah merk produk. Admin mall wajib
start
melakukan login terlebih dahulu dengan memasukkan username dan password, masukan data merk baru.
Gambar 3.16 Activity Diagram Hapus Admin Outlet
Dari gambar activity diagram hapus admin outlet diatas menjelaskan tentang hak akes admin mall untuk menghapus admin outlet. Admin mall wajib
start
masukkan username & password
tampil menu admin mall
pilih menu kelola outlet
pilih sub menu data admin outlet
pilih admin outlet yang akan di hapus
melakukan login terlebih dahulu dengan memasukkan username dan password, admin outlet tersebut.
Gambar 3.17 Activity Diagram Ubah Admin Outlet
pilih admin outlet yang akan di edit
start
masukkan username & password
tampil menu admin mall
pilih menu kelola outlet
pilih sub menu data admin outlet
Dari gambar Activity Diagram edit admin outlet diatas menjelaskan tentang hak ases admin mall untuk merubah data admin outlet. Admin mall wajib melakukan login terlebih dahulu dengan memasukkan username dan password, setelah itu dicek ke dalam database apakah nilainya valid atau tidak. Ketika username dan password salah maka admin mall harus menginputkan ulang data tersebut. Jika username dan password sudah benar maka admin mall akan langsung masuk ke dalam menu admin mall. Setelah itu actor dapat langsung memilih menu kelola outlet dan memilih sub menu data admin outlet. Pilih admin outlet yang akan diubah, klik edit admin outlet untuk merubah data admin outlet dan masukan data admin outlet baru tersebut.
Gambar 3.18 Activity Diagram Tambah Admin Outlet
klik tambah admin outlet start
masukkan username & password
tampil menu admin mall
pilih menu kelola outlet
Dari gambar activity diagram tambah admin outlet diatas menjelaskan tentang hak akes admin mall untuk menambah data admin outlet. Admin mall
wajib melakukan login terlebih dahulu dengan memasukkan username dan password, setelah itu dicek ke dalam database apakah nilainya valid atau tidak. Ketika username dan password salah maka admin mall harus menginputkan ulang data tersebut. Jika username dan password sudah benar maka admin mall akan langsung masuk ke dalam menu admin mall. Setelah itu actor dapat langsung memilih menu kelola outlet, lalu memilih sub menu data admin outlet dan klik tambah admin outlet untuk menambahkan data admin outlet.
start
pilih lantai untuk mencari outlet
Dari gambar Activity Diagram cari outlet (admin mall) diatas menjelaskan tentang hak akes admin mall untuk mncari outlet. Admin mall wajib melakukan login terlebih dahulu dengan memasukkan username dan password, setelah itu dicek ke dalam database apakah nilainya valid atau tidak. Ketika username dan password salah maka admin outlet harus menginputkan ulang data tersebut. Jika username dan password sudah benar maka admin outlet akan langsung masuk ke dalam menu admin mall.Setelah itu actor dapat langsung memilih menu kelola outlet lalu klik data outlet. Kemudian pilih lantai outlet yang akan di cari lalu klik cari untuk mencari data outlet tersebut.
start
masukkan username & password
tampil menu admin outlet
pilih menu kelola produk
tampil data produk
cek login
[ valid = false ]
[ valid = true ]
ambil data produk
PDE produk
admin_outlet
Dari gambar Activity Diagram penambahan produk diatas menjelaskan tentang hak akes admin outlet untuk menambah produk outlet . Admin outlet wajib melakukan login terlebih dahulu dengan memasukkan username dan password, setelah itu dicek ke dalam database apakah nilainya valid atau tidak. Ketika username dan password salah maka admin outlet harus menginputkan ulang data tersebut. Jika username dan password sudah benar maka admin outlet akan langsung masuk ke dalam menu admin outlet. Setelah itu actor dapat
klik tambah produk
start
masukkan username & password
langsung memilih menu kelola produk, lalu klik tambah produk. Kemudian masukan produk baru yang akan di tambahkan.
