BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN Bab ini akan menjelaskan tentang analisis dan perancangan tentang fasilitas umum kota DKI Jakarta tahap pertama analisisi lanjut dengan perancangan aplikasi. 3.1 Analisis Sistem Tahapan analisis ini adalah tahapan awal dalam pembuatan aplikasi, pada tahap ini penulisan menganalisa kebutuhan-kebutuhan aplikasi. Analisis dilakukan pada data-data yang di butuhkan aplikasi, sehingga dapat diketahui spesifikasi kebutuhan apa saja yang di butuhkan untuk membangun aplikasi ini. Kota Jakarta yang luas ini banyak pusat-pusat perbelanjaan atau tempat-tempat yang bagus untuk di kunjungi atau tempat untuk sekedar kumpul-kumpul, masyarakat terkadang bingung mau kemana yang ingin daerah di tuju supaya dekat dari 1 tempat ketampat lainnya agar berdekatan. Berdasarkan permasalahan itu penulis mencoba membuat aplikasi ini, sebagai acuan atau arahan bagi masyarakan yang ingin mengujungi kota Jakarta ini. 3.2 Analisa Kebutuhan Dalam melakukan penelitian di butuhkan beberapa komponen yang mendukung terhadapan keberhasilan penelitian ini yaitu: 1. User disini adalah masyarakan yang ingin berkunjung ke jakarta dari satu tempat ketempat yang lain. 2. Tujuan disini untuk mempermudah masyarakat jakarta atau pun luar jakarta yang ingin berkunjung ke jakarta mengetahui tempat atau fasilitas umum yang ada di jakarta. Seperti dari tempat hotel untuk menginap agar dekat sama tempat wisata atau perbelanjaan yang berada di tempat yang sama.

23 http://digilib.mercubuana.ac.id/

24

3. Jenis aplikasi ini online digunakan untuk melihat peta dari googlemaps. Sebagian besar aplikasi ini menggunakan data offline. 4. Kebutuhan umum a. GPS ini untuk menampilkan user dan lokasi-lokasi yang dituju. b. Fitur untuk menunjukan lokasi dan memberi keterangan lokasi . 5. Perangkat Lunak (software) a. Sistem operasi Windows XP SP3. b. Software Eclipse. c. Software Rapid PHP . d. Android Emolator. 6. Perangkat Keras (hardware) a. Notebook pribadi. 3.3 Perancangan Sistem Aplikasi fasilitas umum kota Jakarta berbasis android di buat berdasarkan framework phonegap dan jquery mobile, sedangkan untuk bahasa pemrogramannya menggunakan HTML5 dan Eclipse sebagai aplikasi editor. Perancangan sistem merupakan tahap awal dari perancangan perangkat lunak. Perancangan ini di lakukan untuk mengetahui kondisi sistem umum. Perancangan sistem meliputi cara kerja sistem, use case diagram, activity diagram. 3.3.1 Cara Kerja Sistem Cara kerja aplikasi fasilitas umum kota Jakarta berbasis android adalah offline jadi tidak di butuhkan koneksi internet kecuali memakai googlemaps, karena semua bahan sudah tersimpan di dalam aplikasi. Aplikasi ini juga tidak membutuhkan database, karena tidak adanya sesuatu yang perlu di simpan ke dalam database.

http://digilib.mercubuana.ac.id/

25

3.3.2 Perancangan Struktur Navigasi Struktur navigasi adalah struktur atau alur dari suatu program yang merupakan rancangan hubungan (rantai kerja) dari beberapa area yang berbeda dan dapat

membantu

mengorganisasikan

seluruh

elemen

pembuatan

Website.

Menentukan struktur navigasi merupakan hal yang sebaiknya dilakukan sebelum membuat suatu Website.

Gambar 3.1 Struktur navigasi 3.3.3 Perancangan Storyboard Storyboard adalah deskripsi masing-masing tampilan suatu kejadian dari movie yang dimainkan dengan menampilkan semua objek atau elemen multimedia serta komponen-komponen aplikasi yang akan dibuat. Stroryboad digunakan sebagai alat bantu pada tahapan perancangan multimedia. Satu kolom storyboard mewakili satu tampilan handphone.


26

Gambar 3.2 Storyboard Halaman Awal Keterangan: Nama Halaman: Halaman Awal 1. Header - Bagian ini tempat dari judul aplikasi. 2. Gambar - Kombinasi gambar dari semua wilayah di DKI Jakarta. 3. Profil - Menjelaskan tentang profil DKI Jakarta. 4. About - Biodata si pembuat aplikasi. 5. Exit - Aplikasi untuk keluar.


27

Gambar 3.3 Storyboard Jakarta Barat Keterangan: Nama Halaman: Jakarta Barat 1. Header – Bagian ini nama wilayah dari Jakarta Barat. 2. Gambar – Menampilkan icon Jakarta Barat. 3. Pendidikan – Menampilkan pendidikan yang ada di Jakarta Barat. 4. Pariwisata – Menampilkan pariwisata yang ada di Jakarta Barat. 5. Perhotelan - Menampilkan perhotelan yang ada di Jakarta Barat. 6. Perbelanjaan - Menampilkan perbelanjaan yang ada di Jakarta Barat.


28

Gambar 3.4 Storyboard Pendidikan Jakarta Barat Keterangan: Nama Halaman: Pendidikan 1. Header – Bagian ini tempat pendidikan di Jakarta Barat. 2. Universitas Esa Unggul – terdapat header yang menampilkan nama pendidikan konten yang berisi penjelasan tentang universitas esa unggul. 3. Universitas Bina Nusantara - terdapat header yang menampilkan nama pendidikan konten yang berisi penjelasan tentang universitas bina nusantara. 4. Universitas Mercu Buana - terdapat header yang menampilkan nama pendidikan konten yang berisi penjelasan tentang universitas mercu buana. 5. Universitas Trisakti - terdapat header yang menampilkan nama pendidikan konten yang berisi penjelasan tentang universitas trisakti. 6. Universitas Tarumanagara - terdapat header yang menampilkan nama pendidikan konten yang berisi penjelasan tentang universitas tarumanagara.


29

Gambar 3.5 Storyboard Pariwisata Jakarta Barat Keterangan: Nama Halaman: Pariwisata 1. Header – Bagian ini tempat Pariwisata di Jakarta Barat. 2. Museum Fatahillah – terdapat header yang menampilkan nama pariwisata konten yang berisi penjelasan tentang museum fatahillah. 3. Museum Wayang - terdapat header yang menampilkan nama pariwisata konten yang berisi penjelasan tentang museum wayang. 4. Museum Seni Rupa dan Keramik – terdapat header yang menampilkan nama pariwisata konten yang berisi penjelasan tentang museum seni rupa dan keramik. 5. Museum Bank Indonesia – terdapat header yang menampilkan nama pariwisata konten yang berisi penjelasan tentang museum bank indonesia.


30

Gambar 3.6 Storyboard Perhotelan Jakarta Barat Keterangan: Nama Halaman: Perhotelan 1. Header – bagian ini tempat perhotelan di Jakarta barat. 2. Hotel Mulia – terdapat header yang menampilkan nama perhotelan konten yang berisi penjelasan tentang hotel mulia. 3. Hotel Ciputra – terdapat header yang menampilkan nama perhotelan konten yang berisi penjelasan tentang hotel ciputra. 4. Hotel Pullman Jakarta – terdapat header yang menampilkan nama perhotelan konten yang berisi penjelasan tentang hotel Pullman jakarta. 5. Hotel Sheraton Bandara – terdapat header yang menampilkan nama perhotelan konten yang berisi penjelasan tentang hotel Sheraton bandara.


31

Gambar 3.7 Storyboard Perbelanjaan Jakarta Barat

Keterangan: Nama Halaman: Perbelanjaan 1. Header – bagian ini tempat perbelanjaan di Jakarta barat. 2. Rawa Belong – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang rawa belong. 3. Mall Ciputra – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang mall ciputra. 4. Mall Daan Mogot – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang mall daan mogot. 5. Mall Puri Indah – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang mall puri indah.


32

6. Mall Taman Anggrek – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang mall taman anggrek. 7. Slipi Jaya Plaza – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang slipi jaya plaza.

Gambar 3.8 Storyboard pendidikan jakarta pusat Keterangan: Nama Halaman: Pendidikan 1. Header – bagian ini tempat pendidikan jakarta pusat. 2. STIE YAI – terdapat header yang menampilkan nama pendidikan konten yang berisi penjelasaan tentang STIE YAI. 3. IKJ – terdapat header yang menampilkan nama pendidikan konten yang berisi penjelasaan tentang IKJ. 4. Universitas YARSI – terdapat header yang menampilkan nama pendidikan konten yang berisi penjelasaan tentang universitas yarsi.


33

5. Universitas Gunadarma – terdapat header yang menampilkan nama pendidikan konten yang berisi penjelasaan tentang universitas gunadarma.

Gambar 3.9 Storyboard pariwisata jakarta pusat Keterangan: Nama Halaman: Pariwisata 1. Header – bagian ini tempat pariwisata jakarta pusat. 2. Museum Fatahillah – terdapat header yang menampilkan nama pariwisata konten yang berisi penjelasaan tentang museum fatahillah. 3. Museum Fatahillah – terdapat header yang menampilkan nama pariwisata konten yang berisi penjelasaan tentang museum fatahillah. 4. Museum Fatahillah – terdapat header yang menampilkan nama pariwisata konten yang berisi penjelasaan tentang museum fatahillah. 5. Museum Fatahillah – terdapat header yang menampilkan nama pariwisata konten yang berisi penjelasaan tentang museum fatahillah.


34

Gambar 3.10 Storyboard pehotelan jakarta pusat Keterangan: Nama Halaman: Perhotelan 1. Header – bagian ini tempat perhotelan jakarta pusat. 2. Hotel Mulia

– terdapat header yang menampilkan nama perhotelan

konten yang berisi penjelasaan tentang hotel mulia. 3. Shangri-la – terdapat header yang menampilkan nama perhotelan konten yang berisi penjelasan tentang hotel Shangri-la.


35

Gambar 3.11 Storyboard pebelanjaan jakarta pusat Keterangan: Nama Halaman: Perbelanjaan 1. Header – bagian ini tempat perbelanjaan jakarta pusat.Pasar Baru

–

terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang pasar baru. 2. Pasar Senen – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang pasar senen. 3. Pasar Tanah Abang

– terdapat header yang menampilkan nama

perbelanjaan konten yang berisi penjelasaan tentang pasar tanah abang. 4. ITC Cempaka Mas


perbelanjaan konten yang berisi penjelasaan tentang ITC cempaka mas.


36

5. Mangga Dua Square


perbelanjaan konten yang berisi penjelasaan tentang mangga dua square.

Gambar 3.12 Storyboard pendidikan jakarta selatan Keterangan: Nama Halaman: Pendidikan 1. Header – bagian ini tempat pendidikan jakarta selatan. 2. Universitas Budi Luhur – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang universitas budi luhur. 3. UHAMKA – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang uhamka.


37

4. PERBANAS – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang perbanas. 5. Universitas Muhammadiyah Jakarta – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang Universitas Muhammadiyah Jakarta. 6. Universitas Pancasila – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang universitas pancasila. 7. UNIKA Atma Jaya – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang unika atma jaya. 8. STIE YAI – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang stie yai.

Gambar 3.13 Storyboard pariwisata jakarta selatan Keterangan: Nama Halaman: Pariwisata 1. Header – bagian ini tempat pariwisata jakarta selatan.


38

2. Ragunan – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang ragunan. 3. Museum Satria Mandala – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang museum satria mandala. 4. Taman Anggrek Ragunan – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang taman anggrek ragunan. 5. Museum Layang-layang – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang museum layinglayang.

Gambar 3.14 Storyboard perhotelan jakarta selatan


39

Keterangan: 1. Nama Halaman: Perhotelan. 2. Header – bagian ini tempat perhotelan jakarta selatan. 3. The Ritz-Carlton – terdapat header yang menampilkan nama perhotelan konten yang berisi penjelasaan tentang ritz-carlton. 4. Dharmawangsa – terdapat header yang menampilkan nama perhotelan konten yang berisi penjelasaan tentang dharmawangsa. 5. Amaris Tendean – terdapat header yang menampilkan nama perhotelan konten yang berisi penjelasaan tentang amaris tendean. 6. Atlet Century Park – terdapat header yang menampilkan nama perhotelan konten yang berisi penjelasaan tentang Atlet Century Park. 7. Aston Rasuna – terdapat header yang menampilkan nama perhotelan konten yang berisi penjelasaan tentang aston rasuna.

Gambar 3.15 Storyboard perbelanjaan jakarta selatan


40

Keterangan: Nama Halaman: Perbelanjaan 1. Header – bagian ini tempat perbelanjaan jakarta selatan. 2. Plaza Blok-M – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang plaza blok-m. 3. Ciputra World – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang ciputra world. 4. Kuningan City – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang kuningan city. 5. Lippo Mall Kemang – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang lippo mall kemang. 6. Gandaria City – terdapat header yang menampilkan nama perbelanjaan konten yang berisi penjelasaan tentang gandaria city

3.3.4

Pengumpulan Bahan Pengumpulan bahan atau material berupa file-file teks, gambar, animasi dan

tombol navigasi yang diproleh dengan cara membuat sendiri dan mengambil dari sumber lain seperti yang tertera pada table di bawah ini: Table 3.1 Pengumpulan Bahan

No Nama 1.

Ukuran file

Tipe file

Sumber

JPEG

en.wikipedia.org

468x312

JPG

Kompasiana.com

museum 590x604

JPG

museumku.wordpress.com

JPG

annisaamaliaapriliani.wordpress.com

Museum

bank 300x168

indonesia 2.

Museum keramik

3.

Logo wayang

4.

Museum wayang 1568x900


41

Lanjut table 3.1 5.

Logo binus

640x480

Jpg

socs.binus.ac.id

6.

Esa unggul

176x116

jpg

Esaunggul.ac.id

7.

Mercu buana

200x200

jpg

Mercubuana.ac.id

8.

Trisakti

250x250

Jpg

Trisakti.ac.id

9.

Logo central park 340x114

Png

Neonlite.co.id

10. Hotel ciputra

280x280

Jpg

Agonda.com

11. Hotel pullman

1600x694

jpg

Pullmanhotels.com

12. Hotel sheraton

104x112

Jpg

Id.hotels.com

13

Logo TIM

1000x248

png

Tamanismailmarzuki.co.id

14. Ismail marzuki

1280x583

Jpg

Tamanismailmarzuki.co.id

15. gunadarma

606x600

Png

Pena.gunadarma.ac.id

16. IKJ

303x166

Jpg

Fftv.ikj.ac.id

17. Logo UBK

1799x1263

Png

Id.wikipedia.org

18. Logo UKI

1720x529

png

Id.wikipedia.org

19. Mall daan mogot

368x258

jpg

Tengakarta.wordpress.com

20. Museumsumpah

336x152

jpg

kebudayaan.kemdikbud.go.id

senayan 633x145

jpg

Senayancity.com

pemuda 21. Logo city 22. Senayan city

500x346

jpg

Australindo.com

25. Mangga dua

567x463

jpg

Wwf.or.id

Cempaka 316x316

png

Sinarmasland.com

850x565

jpg

Ptpime.com

28. Museum layang- 620x418

jpg

jakarta.panduanwisata.id

jpg

Indonesiakaya.com

26. ITC Mas

27. Merlyn park

layang 29. Museum

Satria 600x400

Mandala


42

Lanjut table 3.1 30. Logo universitas 2199 x 2134

jpeg

pancasila

kumpulan-logokampus.blogspot.com

31. Bentara Budaya 500 x 276

jpg

Jakarta.go.id

jpg

Id.wikipedia.org

jpeg

Id.wikipedia.org

256 x 196

jpg

Pusakaindonesia.org

35. Rawa Belong

715 x 250

jpg

Jakarta.paduanwisata.id

36. Central Park

258 x 200

jpg

Blog.urbanindo.com

37. Kampus yarsi

1600 x 1067

jpeg

Fk.yarsi.ac.id

38. Setu Babakan

624 x 482

jpg

Indonesiakaya.com

hotel 150 x 150

png

Id.wikipedia.org

jpg

Booking.com

jpg

Fnetravel.com

Jakarta 32. Logo

Museum 300 x 169

Bank Indonesia 33. Museum

Bank 3504 x 2336

Indonesia 34. Museum Fatahillah

39. Logo amaris

40. Hotel Amaris 41. Logo

1011 x 1600

Aston 268 x 77

Rasuna 42. Aston Rasuna

750 x 721

jpg

Astonrasuna.hargahotel.com

43. Logo hotel atlet

335 x 180

jpg

Atletcentury.com

Atlet 560 x 398

jpg

Atletcentury.com

Hotel 580 x 327

jpg

Thepejatensuite.com

205 x 138

jpg

Id.wikipedia.org

44. Hotel century 45. Logo Pejaten 46. Logo TMII


43

Lanjut table 3.1 47. TMII

448 x 336

jpg

Jakartatravel.com

Museum 305 x 469

jpg

www.benance.net

1024 x 683

Jpg

Indonesiakaya.com

320 x 213

jpg

Id.wikipedia.org

1024 x 683

jpg

Jakartatravel.com

jpg

Wwf.or.id

930 x 330

jpg

Lippomalls.com

tamini 202 x 155

Jpg

id.wikipedia.org

48. Logo

kampus

Tantular 49. Logo

Perangko 50. Museum Perangko 51. Museum olahraga 52. Museum Pancasila Sakti 53. Logo

Cibubur 567 x 463

Junction 54. Cibubur Junction 55. Logo square 56. Tamini square

930 x 330

jpg

Lippomalls.com

57. Logo hotel Ibis

200 x 200

jpg

Jobs.id

58. Hotel Ibis

367 x 450

jpg

Citizendaily.net

hotel 550 x 388

jpg

Tripadvisor.com

jpg

Santika.com

Voiceofleader.com

59. Logo

Santika TMII 69. Hotel

santika 960 x 450

TMII 70. Logo Ancol

620 x 320

jpg

71. Ancol

500 x 341

jpg

72. Lambing

914 x 209

jpg

Museumbahari.org

550 x 412

jpg

Museumbahari.org

Museum Bahari 73. Museum Bahari


44

Lanjut table 3.1 74. Logo UBM

1024 x 720

jpg

Ubm.ac.id

75. UBM

700 x 200

jpg

Ubm.ac.id

Suaka 500 x 333

jpg

Tundra.web.id

jpg

Mallofindonesia.com

jpg

Mallofindonesia.com

jpg

Emporiumpluit.com

672 x 448

jpg

Seputarjakarta.net

Sanno 480 x 300

jpg

Sannohotel.com

570 x 340

jpg

Sannohotel.com

83. Logo hotel whiz 300 x 150

jpg

Whizprime.com

Whiz 1396 x 515

jpg

Whizprime.com

hotel 750 x 769

jpg

Ebookers.com

480 x 360

jpg

Ebookers.com

76. Taman

Margasatwa Muara Angke 77. Logo MoI

1500 x 955

78. Mall

of 300 x 199

Indonesia 79. Logo Emporium 257 x 93 Pluit 80. Emporium Pluit 81

Logo hotel

82. Sanno Hotel

prime 84. Hotel Prime 85. Logo Bestwestren Hariston 86. Hotel Bestwestren Hariston


BAB III ANALISIS DAN PERANCANGAN

Recommend Documents