BAB III ANALISIS DAN PERANCANGAN

(1)

BAB III

ANALISIS DAN PERANCANGAN

3.1 Analisis.

Tahap analisis merupakan tahap pemahaman terhadap aplikasi yang dibuat. Pada tahap ini berisi hal-hal yang berhubungan dengan perangkat lunak yang digunakan, diagram alir data, kamus alir dan perancangan database. Analisis bertujuan untuk mengetahui mekanisme sistem, proses-proses yang terlibat dalam sistem dan hubungan antara proses-proses tersebut.

3.1.1 Analisis Sistem yang akan Dibangun.

3.1.1.1 Analisis Kebutuhan Aplikasi.

Kebutuhan aplikasi ini adalah sebagai berikut :

1. Login admin sebagai administrator yang mempunyai hak penuh atas semua data.

2. Input, berfungsi untuk menambahkan data kedalam database melalui form yang telah disediakan untuk administrator yang memiliki hak akses.

3. Edit, berfungsi untuk melakukan edit data pada database oleh administrator yang memiliki hak akses.

4. Delete, berfungsi untuk melakukan penghapusan data dalam database oleh administrator yang memiliki hak akses.

3.2 Perancangan

3.2.1 Flow Map yang akan dibangun

Sistem yang akan dibangun,user mencari lokasi yang di inginkan pada menu beranda kemudian akan di validasi oleh sistem apakah data yang di cari tersebut ada atau tidak, jika ada atau menghasilkan nilai true maka akan ditampilkan data yang dicari,jika tidak atau menghasilkan nilai false maka tidak ada data yang akan di tampilkan. Admin bertugas untuk melakukan Insert, Update, dan Delete data yang ada ataupun yang akan dimasukan kedalam database.

(2)

Tabel 3.1 Flow Map yang akan dibangun.

3.2.2 Konteks Diagram

Diagram Konteks merupakan suatu teknik untuk menggambarkan pemodelan sistem secara global menggunakan notasi–notasi grafis yang menunjukan aliran informasi Dan perubahannya yang diterapkan sebagai perubahan atau perpindahan data dari masukan (input) menjadi keluaran (output). Pendekatan terstruktur ini mencoba untuk menggambarkan sistem pertama kali secara garis besar (top level) dan memecah-mecahnya menjadi bagian yang lebih terinci (lower level).

Adapun diagram konteks yang telah penulis rancang adalah sebagai berikut : Gambar 3.1 Konteks Diagram Aplikasi yang Dibuat.

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

(3)

3.2.3 Data Flow Diagram 3.2.3.1 DFD Level 0

Untuk Mendukung perancangan system yang akan dibuat, penulis menggambarkan data flow diagram untuk dijadikan model yang nantinya akan digunakan dalam membuat program.

Gambar 3.2 DFD Level 0.

Tabel 3.3 Spesifikasi Tabel

No Proses Data Masuk Data Keluar Logika Proses 1. Login  Valiadasi

Login

 Valid  Begin IF admin login THEN Valid login End 2. Kelola Lokasi  Input Lokasi  Validasi  Begin IF admin input

lokasi THEN Validasi input lokasi End

 Edit Lokasi  Validasi  Begin IF admin edit lokasi THEN Validasi edit lokasi End

(4)

 Delete Lokasi

 Validasi  Begin IF admin delete lokasi THEN Validasi delete lokasi End

 Lihat Data

Lokasi

 Konfirm Data Lokasi

 Begin IF Pengunjung lihat data lokasi THEN

Konfirm data lokasi End 3. Kelola Komen

Lokasi

 Input Komen Lokasi

 Validasi  Begin IF input komen lokasi THEN Validasi input lokasi End

 Delete

Komen Lokasi

 Validasi  Begin IF admin delete komen lokasi THEN Validasi delete komen lokasi End

4. Kelola Berita  Input Berita  Validasi  Begin IF admin input berita THEN Validasi input berita End

 Edit Berita  Validasi  Begin IF admin edit berita THEN Validasi edit berita End

 Delete Berita  Validasi  Begin IF admin delete berita THEN Validasi delete berita End

 Lihat Data

Berita

 Konfirm Data Berita

 Begin IF Pengunjung lihat data berita THEN

Konfirm data berita End

(5)

5. Kelola Komen Berita

 Input Komen Berita

 Validasi  Begin IF input komen berita THEN Validasi input berita End

 Delete Komen Berita

 Validasi  Begin IF admin delete komen berita THEN Validasi delete komen berita End

6. Kelola Kontak Pesan

 Input Kontak Pesan

 Validasi  Begin IF Pengunjung input kontak pesan THEN Validasi input kontak pesan End

 Delete Kontak Pesan

 Validasi  Begin IF admin delete kontak pesan THEN Validasi delete kontak pesan End

7. Kelola LogOut  LogOut  Konfrim Logout

 Begin IF admin logout THEN Valid logout End

Lanjutan Tabel 3.3 Spesifikasi Tabel 3.2.3.2 DFD Level 2 Kelola Lokasi

Pada DFD Lever 2 kelola Applikasi ini digunakan sebagai analisis untuk perancangan dari menu pengelolaan aplikasi yang akan dibangun pada menu kelola applikasi agar tidak keluar dari konteks yang telah dirancang.

Gambar 3.3 DFD Level 2 Kelola Lokasi

(6)

Tabel 3.4 Spesifikasi DFD Level 2 Kelola Lokasi.

No Proses Data Masuk Data Keluar Logika Proses 1. Kelola

Lokasi

 Input Lokasi  Validasi  Begin IF admin input lokasi THEN Validasi input lokasi End

 Edit Lokasi  Validasi  Begin IF admin edit lokasi THEN Validasi edit lokasi End

 Delete Lokasi  Validasi  Begin IF admin delete lokasi THEN Validasi delete lokasi End

 Lihat Data Lokasi

 Konfirm Data Lokasi

 Begin IF Pengunjung lihat data lokasi THEN Konfirm data lokasi End

3.2.3.3 DFD Level 3 Kelola Komentar Lokasi

Pada DFD Level 3 Kelola Komentar Lokasi Applikasi ini digunakan sebagai analisis untuk perancangan dari menu pengelolaan aplikasi yang akan dibangun.

Gambar 3.4 DFD Level 3 Kelola Komentar Lokasi.

(7)

Tabel 3.5 Spesifikasi DFD Level 3 Kelola Komentar Lokasi.

No Proses Data Masuk Data

Keluar Logika Proses

1 Kelola Komen Lokasi

 Input Komen Lokasi

 Validasi  Begin IF input komen lokasi THEN Validasi input lokasi End

 Delete Komen Lokasi

 Validasi  Begin IF admin delete komen lokasi THEN Validasi delete komen lokasi End

3.2.3.4 DFD Level 4 Kelola Berita

Pada DFD Level 4 Kelola Berita Applikasi ini digunakan sebagai analisis untuk perancangan dari menu pengelolaan aplikasi yang akan dibangun.

Gambar 3.5 DFD Level 4 Kelola Berita

.

(8)

Tabel 3.6 Spesifikasi DFD Level 4 Kelola Berita.

Berita

 Input Berita

 Validasi  Begin IF admin input berita THEN Validasi input berita End

 Edit Berita

 Validasi  Begin IF admin edit berita THEN Validasi edit berita End

 Delete Berita

 Validasi  Begin IF admin delete berita THEN Validasi delete berita End

 Lihat Data Berita

 Konfirm Data Berita

 Begin IF Pengunjung lihat data berita THEN Konfirm data berita End

3.2.3.5 DFD Level 5 Kelola Komentar Berita

Pada DFD Level 5 Kelola Komentar Berita Applikasi ini digunakan sebagai analisis untuk perancangan dari menu pengelolaan aplikasi yang akan dibangun.

Gambar 3.6 DFD Level 5 Kelola Komentar Berita

(9)

Tabel 3.7 DFD Level 5 Kelola Komentar Berita

Komentar Berita

 Input Komentar Berita

 Validasi  Begin IF input Komentar berita THEN Validasi input berita End

 Delete Komentar Berita

 Validasi  Begin IF admin delete Komentar berita THEN Validasi delete komen berita End

3.2.3.6 DFD Level 6 Kelola Pesan Kontak

Pada DFD Level 6 Kelola Pesan Kontak Applikasi ini digunakan sebagai analisis untuk perancangan dari menu pengelolaan aplikasi yang akan dibangun.

Gambar 3.7 DFD Level 6 Kelola Pesan Kontak.

Tabel 3.8 DFD Level 6 Kelola Pesan Kontak.

Kontak Pesan

 Input Kontak Pesan

 Validasi  Begin IF Pengunjung input kontak pesan THEN Validasi input kontak pesan End

 Delete Kontak Pesan

 Validasi  Begin IF admin delete kontak pesan THEN Validasi delete kontak pesan End

(10)

3.2.4 Perancangan Database 3.2.4.1 Conceptual Data Model

Gambar 3.8 CDM (Conceptual Data Model)

. 3.2.4.2 Physical Data Model

Gambar 3.9 PDM (Physical Data Model).

(11)

3.2.4.3 Kamus Data Tabel

Kamus data adalah daftar tentang semua elemen data yang berhubungan dengan sistem informasi. Berikut adalah uraian tabel-tabel dalam aplikasi ini :

tabel 3.9 tbl_admin

Tabel 3.10 tbl_lokasi

No Field Type Lenght Keterangan

1 idlokasi int 11 Primary key.

2 nama char 50 Nama Lokasi atau tempat yang akan diinput.

3 Jkul varchar 5 Jenis dari kuliner yang akan diinput 4 Jtem varchar 5 Jenis dari tempat kuliner yang akan diinput 5 alamat varchar 200 Alamat dari lokasi atau tempat yang diinput.

6 deskripsi text - Deskripsi dari lokasi atau tempat yang diinput, bisa berisi telp, fax, dan lain-lain.

7 gambar varchar 150 Gambar dari lokasi yang diinput.

8 lat float - Latitude atau koordinat x dari maps lokasi.

9 lon float - Longitude atau koordinat y dari maps lokasi.

1 idadmin int 2 Primary Key.

2 username char 20 Merupakan validasi dari username pada saat login.

3 password text - Merupakan password pada saat login.

4 email varchar 50 Email yang digunakan oleh admin.

(12)

Tabel 3.11 tbl_komentar.

1 idkomentar int 11 Primary Key.

2 idlokasi int 11 Foreign key dari tbl_lokasi.

3 tanggal varchar 25 Tanggal pengimputan komentar

lokasi.

4 nama char 25 Nama dari pengomentar (user)

lokasi.

5 email varchar 50 Email dari pengomentar (user)

lokasi.

6 komentar text - Komentar dari pengomentar (user)

lokasi.

Tbl 3.12 tbl_berita

1 idberita int 11 Primary Key.

2 tanggal varchar 25 Tanggal Pengimputan berita.

3 judul varchar 100 Judul dari berita.

4 isiberita text - Isi dari berita.

5 gambar varchar 150 Gambar dari berita yang diinput.

Tabel 3.13 tbl_komenberita

1 idkomenberita int 11 Primary Key.

2 idberita int 11 Foreign key dari tbl_berita.

3 tanggal varchar 25 Tanggal pengimputan komentar berita.

4 nama char 25 Nama dari pengomentar (user) berita.

5 email varchar 50 Email dari pengomentar (user) berita.

(13)

6 komentar text - Komentar dari pengomentar (user) berita.

Tabel 3.14 tbl_pesan

1 idpesan int 11 Primary Key.

2 tanggal varchar 25 Tanggal pengimputan pesan.

3 nama char 25 Nama dari user pesan.

4 email varchar 50 Email dari user pesan.

5 Pesan text - Komentar dari user pesan.

3.2.5 Perancangan User Interface

Antar muka adalah suatu media yang digunakan untuk komunikasi antara manusia (user) dengan komputer, oleh sebab itu aplikasi ini didesain agar user dapat dengan mudah menggunakan atau mengoperasikannya.

1. Form Menu Beranda tampilan Map

Nama Layar : Beranda

Deskripsi : Tampilan interface yang digunakan untuk Menu Beranda tampilan Map

Gambar 3.10 Menu Beranda tampilan Map

1

2

4

5

3

(14)

Keterangan :

Tabel 3.15 Form menu Beranda tampilan Map.

No Keterangan 1 Header 2 Menu

3 Seacrh Lokasi 4 Maps Location 5 Bottom

2. Form Menu Berita / Info Terbaru Nama Layar : Berita / Info Terbaru

Deskripsi : Tampilan interface yang digunakan untuk Menu Berita / Info Terbaru

Gambar 3.11 Form Menu Berita / Info Terbaru.

1

2

3

5

4

(15)

Keterangan :

Tabel 3.16 form Menu Berita / Info Terbaru

No Keterangan

1 Header 2 Menu

3 Halaman Berita / Info Terbaru 4 Berita Lainnya

5 Bottom

3. Form Menu Kontak Nama Layar : Kontak

Deskripsi : Tampilan interface yang digunakan untuk Menu Kontak

Gambar 3.12 Form Menu Kontak

1

2

3

4

(16)

Keterangan :

Tabel 3.17 form Menu Kontak No Keterangan

1 Header 2 Menu

3 Halaman Kontak 4 Bottom

4. Form Menu LogIn Nama Layar : Login

Deskripsi : Tampilan interface yang digunakan untuk Menu Kontak

Gambar 3.13 Form Menu LogIn

5 1

2

4

3 6

(17)

Keterangan :

Tabel 3.18 Form Menu LogIn No Keterangan

1 Header 2 User Name 3 Password 4 LogIn 5 Bottom

6 Background Menu LogIn

5. Menu Beranda Admin Nama Layar : Beranda

Deskripsi : Tampilan interface yang digunakan untuk Menu Beranda admin

Gambar 3.14 Form Menu Beranda Admin

1

3

2

(18)

Keterangan :

Tabel 3.19 Form menu Beranda.

No Keterangan 1 Header

2 Menu

3 Welcome Beranda Admin 4 Bottom

6. Menu Data Lokasi

Nama Layar : Data Lokasi

Deskripsi : Tampilan interface yang digunakan untuk Menu Data Lokasi halaman admin

Gambar 3.15 Form Menu Data Lokasi

4

1

3

5

2

4

(19)

Keterangan :

Tabel 3.20 Form menu data lokasi

No Keterangan

1 Header 2 Menu admin

3 Manipulation Data Lokasi (Input, Update, Delete.) dan cari data Lokasi

4 Select Data Lokasi 5 Bottom

7. Menu Data Berita

Nama Layar : Data Berita

Deskripsi : Tampilan interface yang digunakan untuk Menu Data Berita halaman admin.

Gambar 3.16 Menu Berita halaman admin

1

3

2

4

(20)

Keterangan :

Tabel 3.21 Form menu data berita

No Keterangan

3 Manipulation Data Berita (Input, Update, Delete.) 4 Select Data Berita

5 Bottom

8. Menu Data Komentar

Nama Layar : Data Komentar (Komentar Lokasi dan Komentar Berita) Deskripsi : Tampilan interface yang digunakan untuk Menu Data Komentar

halaman admin.

Gambar 3.17 Menu Data Komentar halaman admin 5

1

3

2

4

(21)

Keterangan :

Tabel 3.22 Form menu data Komentar

No Keterangan

3 Manipulation Data Komentar (Insert, Delete.) 4 Select Data Komentar (lokasi atau berita) 5 Bottom

9. Menu Data Pesan

Nama Layar : Data Pesan

Deskripsi : Tampilan interface yang digunakan untuk Menu Data Pesan halaman admin.

Gambar 3.18 Menu Data Pesan 5

1

2

(22)

Keterangan :

Tabel 3.23 Form menu data Pesan

No Keterangan

3 Manipulation Data pesan (Select, Delete.) 4 Bottom

10. Akun Admin

Nama Layar : Akun Admin

Deskripsi : Tampilan interface yang digunakan untuk Menu akun admin.

3

4

1

2

(23)

Gambar 3.19 Menu Akun Admin

Keterangan :

Tabel 3.24 Form menu akun admin

No Keterangan

3 Manipulation akun admin (Update, logout.) 4 Bottom

3

4