PERANCANGAN APLIKASI WEB MOBILE PORTAL MALL.

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
2014

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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
2014

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

LEMBAR PENGESAHAN

PERANCANGAN APLIKASI WEB MOBILE
PORTAL MALL
Disusun Oleh :

HENDRIK PRASTIYO
NPM. 1034010083

Telah disetujui untuk mengikuti Ujian Negara Lisan
Periode Bulan Februari 2014 Tahun Akademik 2013/2014

Pembimbing Utama

Pembimbing Pendamping

Rizky Par lika, S.Kom, M.Kom
NPT. 3 8405 07 0219 1

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

Dr. Ir. Ni Ketut Sari, MT
NIP. 19650731 199203 2 001

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

SKRIPSI
PERANCANGAN APLIKASI WEB MOBILE
PORTAL MALL
Disusun Oleh :

HENDRIK PRASTIYO
NPM. 1034010083
Telah dipertahankan di hadapan dan diterima oleh Tim Penguji Skripsi

Program Studi Teknik Infor matika Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional ”Veteran” J awa Timur
Pada Tanggal 21 Februari 2014
Pembimbing :
1.

Tim Penguji :
1.

Rizky Par lika, S.Kom, M.Kom
NPT. 3 8405 07 0219 1

Rizky Par lika, S.Kom, M.Kom
NPT. 3 8405 07 0219 1

2.

2.

M.Syahrul Munir, S.Kom

NPT. 3 8912 13 342 1

Basuki Rahmat, S.Si, MT
NPT. 3 6907 06 0209 1
3.

I Made Suartana, S.Kom, M.Kom
NPT.

Mengetahui,
Dekan Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional ”Veteran” J awa Timur

Ir. Sutiyono, MT
NIP. 19600713 198703 1 00

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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

Pembimbing Pendamping

Rizky Parlika, S.Kom, M.Kom
NPT. 3 8405 07 0219 1

M.Syahrul Munir, S.Kom
NPT. 3 8912 13 342 1

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

Judul

: PERANCANGAN APLIKASI
MALL
Pembimbing I : Rizky Parlika, S.Kom, M.Kom
Pembimbing II : M.Syahrul Munir, S.Kom
Penyusun
: Hendrik Prastiyo

WEB MOBILE PORTAL

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 produkproduk yang dijual.

Kata kunci: Mobile, Mall, Web Mobile Portal Mall, phpmyadmin, , Gadget,
Adobe Dreamweaver, Code Lobste

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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

Penulis

i
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

UCAPAN TERIMA KASIH

Puji syukur ke hadirat Allah SWT yang telah memberikan rahmat dan karuniaNya, 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.
5. M.Syahrul Munir, S.Kom selaku dosen pembimbing II yang telah banyak
memberikan petunjuk, masukan serta kritik yang bermanfaat hingga
terselesainya Skripsi ini.

ii
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

6. Terima kasih buat Ayah serta Ibu tercinta yang telah memberi semangat,
dorongan dan doa yang tiada henti-hentinya. Terima kasih buat temanteman 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

Penulis

iii
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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.1 Latar Belakang ............................................................................................. 1
1.2 Rumusan Masalah ........................................................................................ 2
1.3 Batasan Masalah ........................................................................................... 3
1.4 Tujuan .......................................................................................................... 3
1.5 Manfaat ........................................................................................................ 4
1.6 Sistematika Penulisan ................................................................................... 4
BAB II TINJAUAN PUSTAKA .......................................................................... 7
2.1 Sejarah Mall ................................................................................................. 7
2.1.1

Etimologi dan Kegunaan Kata ........................................................ 8

2.1.2

Kegunaan Mall Sekarang ................................................................ 8

2.2 PHP (Hypertext Preprocessor) ..................................................................... 9
2.3 CSS (Cascading Style Sheet) ....................................................................... 11
2.4 HTML ......................................................................................................... 12
2.5 Alat Bantu Pemodelan Sistem ..................................................................... 15
2.6 Jquerry Mobile ........................................................................................... 20
2.7 Javascript ................................................................................................... 20
2.8 Code Lobster .............................................................................................. 21
2.9 Pengujian BlackBox ................................................................................... 23
2.10

Web Mobile ......................................................................................... 23

BAB III ANALISIS DAN PERANCANGAN .................................................... 24
3.1 Analisis ...................................................................................................... 24
3.1.1

Analisis Sistem Yang Sedang Berjalan ......................................... 25

3.1.2

Analisis Sistem Yang Akan Dibangun .......................................... 27

3.2 Perancangan ............................................................................................... 34
3.2.1

Use Case Diagram ........................................................................ 34

iv
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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

4.4

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

Uji Validasi Korelasi Pearson ............................................................ 152

BAB V KESIMPULAN DAN SARAN............................................................ 158
5.1 Kesimpulan .............................................................................................. 158
5.2 Saran ........................................................................................................ 158

v
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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.45 Sequence Diagram ubah admin outlet ......................................... 85
vi
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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.92 Collaboration Diagram Cari Outlet (Admin Mall) ...................... 108
vii
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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
Gambar 4.36 Data Kuisoner ............................................................................ 155
Gambar 4.37 Hasil dari penghitungan menggunakan metode Korelasi Pearson 156

viii
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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
Table 4.1 Tabel Hasil Rekapitulasi……………………………………………. 153

ix
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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.
Seiring dengan berkembangnya teknologi, tingkat konsumsi masyarakat
indonesia semakin hari juga semakin tinggi. Hal ini dapat dilihat dengan semakin
banyaknya pengunjung di sebuah Mall. 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. Kebanyakan orang yang berbelanja di Mall masih harus
berkeliling mencari sebuah toko yang berisi barang-barang yang ingin dibeli,
tentunya hal ini membuat waktu menjadi tidak efisien terutama untuk orang
dengan tingkat kesibukan tinggi. Selain itu pada sisi penjual, sering kali kesulitan
mempromosikan produk-produk yang dijual. Dengan tingkat persaingan yang
tinggi antar outlet, tentunya dibutuhkan sebuah solusi untuk mempermudah pihak
penjual

dalam

menginformasikan

tentang

produk-produk

1
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

yang

dijual.

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 aplikasiaplikasi 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 ?
c. Bagaimana membuat aplikasi yang dapat mempermudah penjual
untuk menginformasikan produknya ?

2
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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.
c. Dengan adanya aplikasi ini diharapkan penyebaran informasi produk, serta
diskon outlet di mall lewat media cetak berkurang dan berganti menjadi
media elektronik yang mudah dan efisien.

3
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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
di lapangan dan kekurangan dari sistem yang diamati, sehingga muncul
topik yang diambil. Rumusan masalah berisi berbagai masalah yang
sudah dikenali, diperoleh dan akan diberikan solusinya melalui fungsi
dari sistem/aplikasi yang akan dibangun. Tujuan berisi target dan tujuan

4
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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
Pada bab ini, Implementasi menjelaskan sistem/aplikasi yang dibangun
dengan mengidentifikasikan komponen - komponen pendukung berupa
program yang digunakan, lingkungan implementasi, dan tampilan
5
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

antarmuka. Pengujian adalah proses yang dilakukan untuk melakukan
pengujian pada sistem/aplikasi sudah dibangun..

BAB V KESIMPULAN DAN SARAN
Pada bab ini berisi kesimpulan yang diperoleh dan dirangkum dari hasil
analisa yang dilakukan dan implementasi yang diperoleh. Saran berisi
tanggapan dan pandangan yang diperoleh setelah proses implementasi
dilakukan. Hal ini bertujuan untuk memperbaiki kekurangan dari
implementasi yang dihasilkan agar sesuai dengan fungsi yang diinginkan.

6
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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

Sejarah Mall
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.[1]

7
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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-kota Timur tengah/Arab atau kotakota yang penduduknya beragama Islam.[1]
2.1.2 Kegunaan Mall Sekarang
Saat ini mall murni memiliki konotasi sebagai pusat perbelanjaan atau
shopping centre dalam arti umum. Mall juga identik dengan pola gaya hidup

8
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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 diciptakan oleh Rasmus Lerdor f pertama kali tahun 1994. Pada awalnya

9
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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.
Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis
tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak
dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan
kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki
kecepatan dan stabilitas yang tinggi. Pada Juni 2004, Zend merilis PHP 5.0.
Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini
juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk
menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi
objek.[2]

10
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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
sebelumnya. Tapi CSS3 juga tidak meninggalkan fitur lama dari CSS sebelumnya
berikut ini perbedaan dari CSS dengan CSS3.

11
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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

untuk mengimplementasikan konsep hypertext dalam suatu naskah atau
dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman
karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah
teks dan bukan sebagai program.

12
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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

13
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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.
Salah satu fitur web worker adalah threading. Kini javascript bisa
dipakai untuk melakukan beberapa proses sekaligus tanpa harus
menghambat proses terkait UI.

14
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

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

menjadi

standar

dalam

industri

untuk

visualisasi,

merancang

15
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

dan

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 menggambarka