60
BAB III ANALISIS DAN PERANCANGAN
3.1
Analisis Sistem
3.1.1 Analisis Masalah Informasi pendidikan Madrasah Aliyah Negeri saat ini banyak dibutuhkan oleh masyarakat, terutama bagi calon siswa/siswi untuk mencari lokasi dan informasi suatu Madrasah Aliyah Negeri di suatu lingkup wilayah. Pengelolaan data-data Madrasah Aliyah Negeri pada saat ini juga masih belum dapat terkelola dengan baik. Oleh karena itu di butuhkan sebuah sistem yang efektif, cepat dan mudah digunakan dalam memberikan informai tersebut yaitu dalam sebuah aplikasi mobile. Karena dengan perangkat mobile aplikasi ini dapat digunakan kapan saja dan dimana saja asalkan terintegrasi dengan jaringan internet. 3.1.2
Analisis Penentuan Lokasi Cell ID
yaitu nomor unik
yang
umum yang digunakan
untuk
mengidentifikasi setiap Basetransceiver station (BTS) dalam jaringan GSM atau dalam Location
Area
Code (LAC). Sebuah
penyedia
jaringan
memiliki
beberapa ratus BTS (sel) yang membentuk jaringan. Setiap base station yaitu "sel" yang mencakup wilayah fisik dan sel-sel ini terhubung bersama-sama untuk membuat seluruh jaringan.Jarak sel tergantung pada kepadatan base station yang dipasang di daerah tertentu. Jarak sel dapat bervariasi mulai dari 100 m di kota-kota hingga 3 Km di daerah pedesaan. Cell ID tidak seakurat beberapa teknik lainnya, karena cakupan sel tidak tetap. Keuntungan dari menggunakan
61
Cell ID yaitu tidak ada ponsel khusus yang dibutuhkan, dan layanan ini gratis. Walaupun penggunaan Cell ID tidak seakurat GPS namun hasil Cell ID yang didapat sudah cukup membantu menentukan titik awal dari koordinat posisi mobile. Untuk mendapatkan Cell ID maka ada parameter yang diperlukan tergantung pada mobile yang digunakan. Oleh karena itu, untuk lebih meningkatkan lagi akurasi hasil pencarian, metode Cell ID dapat dikombinasikan dengan metode Timing Advanced (TA), dengan menggunakan TA ini, metode Cell ID akan ditambahkan sebuah fungsionalitas untuk menghitung Round Trip Time (RTT), yaituwaktu transmisi sebuah frame (daribase station ke handphone) dan waktu penerimaan sebuah frame (dari mobile ke base station). Dengan tambahan metode ini, jarak antara mobile dan base station dapat ditentukan dengan keakuratan 50 m.
3.1.3 Analisis Arsitektur Sistem Arsitektur fisik sistem mengacu kepada model arsitektur aplikasi two tier. Arsitektur fisik sistem terdiri dari tiga komponen utama yaitu Client (Frontend), application Server (Web Admin dan Web Service), dan Database Server. Arsitektur sistem dalam pembangunan aplikasi gis man ini ditunjukan oleh gambar 3.1 dibawah ini.
62
Internet
GPS
User Frontend
Web Service
Admin Frontend
Web Administrator
Web Server
Gambar 3.1 Arsitektur Sistem
Arsitektur desain sistem aplikasi disesuaikan dengan arsitektur aplikasi yang di bangun yaitu (client-server), komponen yang terdapat pada sisi client berupa pengguna akhir perangkat bergerak android yang dapat menampilkan peta atau memberikan hasil analisa operasi SIG seperti pencarian informasi madrasah aliyah negeri ciamis. Sedangkan, komponen pada sisi server menyediakan data informasi madrasah aliyah negeri di ambil dari database server yang terdapat dalam web server melalui web service dan melakukan operasi berdasarkan permintaan dari sisi client. Terdapat berbagai jenis jaringan komunikasi nirkabel (GPRS/3G, CDMA/EVDO, ISP) diantara sisi client dan sisi server yang berfungsi untuk memfasilitasi pertukaran data dan layanan.
63
Komponen dasar dari arsitektur sistem yang di bangun yaitu : 1. Aplikasi pada frontend user Merupakan aplikasi gis man ciamis yang sudah terinstal pada perangkat Mobile yang antarmuka
berplatform Android.
antara user
dengan
Bagian
sistem.
ini
berfungsi
Pengembangan
sebagai
antarmuka
sistem dibangun dengan menggunakan IDE Eclipse dan SDK android dengan bahasa pemrogramam java. 2. Aplikasi pada frontend admin Merupakan aplikasi gis man ciamis yang sudah terinstal pada perangkat Mobile yang berplatform Android. Bagian ini berfungsi sebagai antarmuka antara admin frontend dengan sistem. Pengembangan antarmuka sistem dibangun dengan menggunakan IDE Eclipse dan SDK android dengan bahasa pemrogramam java. 3. Web Administration Web Administrator merupakan web yang berfungsi sebagai pengolah sumber basis data yang terdapat pada database server yang dioperasikan oleh admin. Web Administrator ini dibangun menggunakan bahasa pemrograman PHP.
4. Web Service Web service merupakan web yang bertujuan untuk menguhungkan berbagai platform aplikasi yang dibangun dengan berbagai platform yang berbeda-beda (misalnya Java, C#, VB, Delphi, PHP,Android), sehingga
64
seluruh aplikasi tersebut dapat saling berkomunikasi. Web service pada penelitian ini dibangun diatas pemrograman PHP yang dikombinasikan dengan JSON ( Javascript Object Notation )
5. GPS Merupakan aktor lain yang bergerak didalam stasiun radio luar yang berfungsi untuk memberitahu keberadaan posisi pengguna baik dengan dengan koordinat latitude maupun longitude. 6. Wireles Comunication Mekanisme komunikasi yang menghubungkan Mobile Android dengan server. Hubungan ini dapat berupa komunikasi nirkabel secara real-time seperti melalui Wifi atau sinyal telepon selular. Komunikasi ini merupakan komunikasi dua arah dimana saat Mobile Android meminta informasi dari server, dan server akan merespon permintaan dengan mengirimkan informasi terbaru ke client atau penerima. 3.1.4 Analisis Kebutuhan Non Fungsional Analisis kebutuhan non fungsional menggambarkan kebutuhan sistem yang menitikberatkan pada properti prilaku yang dimiliki oleh sistem, diantaranya kebutuhan perangkat keras, perangkat lunak, serta user sebagai bahan analisis kekurangan dan kebutuhan yang harus dipenuhi dalam perancangan sistem yang akan diterapkan.
65
3.1.4.1 Analisis Kebutuhan Perangkat Keras Berikut ini spesifikasi perangkat keras minimum yang mendukung aplikasi GIS MAN dengan baik, yaitu : 1. Perangkat Keras Aplikasi Backend Processor : Dengan Kecepatan Minimum 2.0 GHZ Memori : Minimum 512MB VGA : 256 MB Hardisk : Kapasitas 250 GB Keyboard : Standar PS/2 Mouse Network Interface Card 2. Perangkat Keras Aplikasi Frontend Resolusi : 240 x 320 pixels Memori : 100 MB CPU : 300 MHz WLAN : Wi-fi 802.11 b/g/n Jaringan 3G : UMTS GPS : A-GPS
3.1.4.2 Analisis Kebutuhan Perangkat Lunak Analisis perangkat lunak terdiri dari spesifikasi minimum perangkat yang dibutuhkan dan elemen google maps api.
66
1) Sepesifikasi Minimum Perangkat Lunak Berikut ini spesifikasi minimum perangkat lunak yang digunakan dalam membangun dan mengimplementasikan aplikasi GIS MAN ini. 1. Sistem Operasi Windows XP SP1 2. Aplikasi IDE Eclipse Galileo 3. JDK v 1.6 dan Android SDK windows 4. ADT v.8.0.0 5. Platform Android versi. 2.1 keatas. 2) Elemen Google Maps API Berikut ini elemen dan objek penting pada Google Maps API yang diterapkan pada aplikasi GIS MAN Ciamis . 1.
Markers Marker yaitu fungsionalita simbol yang menandakan suatu titik koordinat
lokasi. Sebagai contoh pada penelitian marker digunakan untuk menandai lokasi seperti Sekolah Madrasah Aliyah pada peta Google Maps.
2.
Directions Yaitu utility yang menangani masalah pencarian rute. Sebagai contoh pada
penelitian directions digunakan untuk memandu rute jalan dari pengguna menuju lokasi Madrasah Aliyah pada peta Google Maps.
67
3.
GeoCoding and Reverse GeoCoding Yaitu utility untuk memproses konversi alamat ke koordinat geografis
(seperti lintang dan bujur
37,423021 -122,083739) atau fungsionalitas
sebaliknya, yang dapat digunakan untuk menempatkan penanda atau posisi peta. 4.
Location Manager Yaitu API yang paling penting, dalam memberikan akses ke layanan
sistem lokasi dengan pemetaan dan GPS. Dalam hal ini Location Manager berfungsi untuk mendapatkan update periodik lokasi geografis perangkat dengan memetakan nilai latitude dan longitude kedalam Google Maps.
5.
Overlays Overview Yaitu objek di Google Maps yang terkait dengan koorddinat lintang
dan bujur, sehingga objek ini bergerak saat ditarik atau zoom pada peta. Overlays mencerminkan benda yang ada pada peta untuk menunjukan titik, garis, area, atau marker benda.
6.
Loading Google Maps API koneksi script yang dibuat ke server Google Map API dengan menggunakan API key yang didapatkan pada saat
mendaftar ke Google Maps API.
7.
Map DOM Elements Untuk menampilkan map pada halaman web, umumnya menggunakan div
tag untuk menampungnya. Diharuskan membuat sebuah div tag dengan nama
68
" map_canvas ", dan mereferensikan element ini ke Document Object Model (DOM). 3.1.4.3 Analisis Pengguna Sistem ( User ) Analisis pengguna sistem dimaksudkan untuk mengetahui siapa saja actor yang terlibat dalam menjalankan sistem. Aplikasi GIS MAN ini sendiri menggunakan platform teknologi bergerak dan web. Pengguna sistem dibagi atas dua bagian, yaitu : 1.
Pengguna aplikasi GIS Man atau enduser yaitu para pengguna platform android. Dalam menggunakan sistem ini, pengguna diharuskan memiliki koneksi GRPS/EDGE/UMTS dan fasilitas GPS untuk bisa menggunakan aplikasi ini.
2.
Admin sebagai pengelola konten secara keseluruhan memiliki fungsi-fungsi seperti menambah, mengubah dan menghapus konten informasi dalam menjalankan sistem.
3.1.5
Analisis Kebutuhan Fungsional Analisis kebutuhan fungsional menggambarkan proses kegiatan yang akan
diterapkan dalam sebuah sistem dan menjelaskan kebutuhan yang diperlukan sistem agar sistem dapat berjalan dengan baik serta sesuai dengan kebutuhan. Analisis kebutuhan fungsional ini meliputi analisis kebutuhan sistem, analisis kebutuhan data, spesifikasi sistem dan pemodelan sistem.
69
Pemodelan sistem dimodelkan dengan menggunakan UML (Unified Modeling Language). Tahap-tahap pemodelan dalam analisis tersebut antara lain Usecase diagram, Class Diagram, State Diagram, Activity Diagram, Sequence Diagram, Component Diagram dan Deployment Diagram.
3.1.5.1 Analisis Kebutuhan Sistem Sebelum melakukan perancangan sistem, terlebih dahulu dilakukan analisis kebutuhan sistem yaitu dengan cara melakukan wawancara terhadap responden. Hal ini dimaksudkan agar dapat mengatasi ketidaksesuaian antara aplikasi yang dirancang dengan kebutuhan pengguna. Adapun kebutuhan sistem yang diperlukan antara lain : 1. Menampilkan informasi mengenai tempat keberadaan Madrasah Aliyah Negeri. 2. Memberikan informasi Profil Sekolah dengan lengkap dan rinci. 3. Dapat melakukan Pencarian Madrasah Aliyah Negeri dengan cepat. 4. Menampilkan rute jalan sekolah dari posisi user.
3.1.5.2 Analisis Kebutuhan Data Setelah melakukan proses analisis kebutuhan sistem, maka analisis selanjutnya yaitu analisis kebutuhan data berupa Profil Sekolah Madrasah Aliyah Negeri. Kriteria data profil sekolah yang akan ditampilkan meliputi Nama Madrasah Aliyah, NSM, Akreditasi, Alamat Sekolah, Kepala Sekolah, No Telepon, Email dan Website.
70
3.1.5.3 Spesifikasi Sistem Adapun spesifikasi sistem yang dibutuhkan antara lain : 1.
Sistem dikembangkan dengan model arsitektur two tier. Aplikasi GIS MAN Ciamis dikembangkan disisi client atau frontend sebagai aplikasi On Device
Portal (ODP).
Sedangkan
disisi
server atau
backend akan
dikembangkan aplikasi web Content Managemen System(CMS). 2.
Konektivitas antara aplikasi GIS MAN Ciamis pada platform android ini dengan aplikasi backend di server menggunakan koneksi protocol HTTP dengan memanfaatkan jaringan GPRS/EDGE/UMTS. 3. Sistem informasi yang disediakan dibatasi pada informasi profil sekolah dan lokasi.
4.
Spesifikasi sistem disisi frontend yaitu : a. Perangkat yang digunakan harus bisa digunakan dimana saja dan kapan saja serta memiliki akses internet. b. Aplikasi ini menyediakan informasi tentang lokasi sekolah pada peta menggunakan google
maps,
dan
lokasi
realtime pengguna dengan
perangkat GPS yang terintegrasi. c. Aplikasi ini memiliki ukuran yang minimum sehingga mampu disimpan dalam perangkat seluler yang memiliki keterbatasan. 5.
Spesifikasi sistem di backend yaitu: a. Sistem dapat memfasilitasi pengelolahan konten informasi. b.
Sistem dapat memfasilitasi Admin untuk melakukan tambah, ubah, dan hapus konten informasi profil sekolah serta kategorinya.
71
3.2
Requirement Model Model representasi aliran proses yang akan rancang akan disajikan dalam
bentuk UML (Unified Model Language). UML digunakan untuk menggambarkan aliran informasi dan proses data yang bergerak dari input data hingga output. 3.2.1
Identifikasi Aktor Pada Aplikasi Pemetaan Untuk Monitoring dan Evaluasi Madrasah Aliyah
Negeri Berbasis Android
terdapat dua aktor yaitu user dan admin , user
merupakan orang yang menjalankan atau menggunakan aplikasi secara langsung, sedangkan admin adalah orang yang akan mengelola data informasi melalui web. Aktor yang berperan dalam menjalankan sistem dapat dilihat pada tabel 3.2 berikut. Tabel 3.1 Aktor Sistem No
Aktor
A-01
User
Deskripsi Merupakan aktor yang menggunakan Aplikasi GIS MAN Ciamis
Admin
Merupakan aktor yang mengelola data MAN ciamis di web administrator
A-02
3.2.2 Use Case Diagram Use Case Diagram merupakan bagian tertinggi dari fungsionalitas yang dimiliki sistem yang akan menggambarkan bagaimana seseorang atau aktor akan menggunakan dan memanfaatkan sistem.
72
Gambar 3.4 dibawah ini menunjukan interaksi antara aktor dan sistem. Diman aktor terdiri dari dua pengguna dan sedangkan sistem terdiri dari aplikasi frontend dan backend. Aktor pertama yang berperan yaitu pengguna aplikasi frontend (Android Client), yang berinteraksi dengan aplikasi frontend yang bergerak pada mobile. Sedangkan aktor kedua yang berperan yaitu admin yang berinteraksi pada aplikasi backend pada Web Administrator.
uc Actors
«extend»
«include»
Lihat Peta
Ubah Data
Hapus Data
Sekolah
«include»
Informasi
«extend»
Pengolahan Data
Admin
User «include» «include»
«extend»
Tentang Aplikasi Login
Tambah Data
Gambar 3.2 Use Case Aplikasi GIS MAN Ciamis
Diagram ini juga mendeskripsikan apa yang akan dilakukan oleh sistem. Use Case terdiri dari tiga bagian yaitu identifikasi aktor, identifikasi Use Case dan skenario Use Case . 3.2.2.1 Identifikasi Use Case Diagram Identifikasi Use Case Diagram yang terdapat dalam sistem dapat dilihat pada Tabel 3.3 dibawah ini.
73
Tabel 3.2 Deskripsi Use Case Pengguna No
Use Case
Deskripsi Untuk melihat sekolah Madrasah Aliyah di Ciamis dan kemudian di tampilkan.
UC-01
Sekolah
UC-02
Lihat Peta
UC-03
Tentang Aplikasi
UC-04
Login
Untuk proses otentifikasi admin mengakses web service.
UC-06
Pengolahan Data Konten Tambah Data
Untuk untuk melihat manipulasi data konten Untuk menambah data sekolah.
UC-07
Hapus Data
Untuk menghapus data sekolah.
UC-08
Ubah Data
Untuk mengubah data sekolah.
Untuk Melihat semua lokasi MA di Ciamis
UC-05
Untuk menampilkan Informasi Aplikasi
3.2.3 Skenario Diagram Skenario proses proses yang terdapat didalam Use Case dapat dilihat pada tabel-tabel dibawah ini. 3.2.3.1 Skenario Use Case Pilih Sekolah Fungsi proses pilih sekolah yaitu untuk memilih sekolah Madrasah Aliyah yang ada di Kabupaten Ciamis Nomor
: UC-01
Nama UsesCase
: Pilih Sekolah
Aktor
: User
Tujuan
: User Melihat List Sekolah
Kondisi Awal
: Sistem menampilkan menu utama
74
Kondisi Akhir
: Sistem Menampilkan List Sekolah Seluruh Madrasah
Aliyah di Kabupaten Ciamis Deskripsi
: Untuk memilih sekolah Madrasah Aliyah di Ciamis dan
kemudian di tampilkan. Tabel 3.3 Skenario Use Case Sekolah SKENARIO USE CASE PILIH SEKOLAH Main Flow of Event Actor Action
1. User Memilih Menu Sekolah 3. User Memilih salah satu MA
7. User memilih Profil 9. User memilih Grafik siswa 10. User memilih lokasi
Reaksi Sistem 2. Sistem Menampilkan list MA yang ditampilkan oleh sistem. 4. Sistem Menampilkan Profil 5. Sistem Menampilkan Grafik Siswa 6. Sistem Menampilkan Lokasi sekolah 8. Sistem menampilkan profil sekolah 9. Sistem menampilkan grafik siswa berdasarkan jumlah siswa setiap tahun 11. Sistem menampilkan lokasi sekolah yang di tuju
Exceptional Flow of Event 11.a. Sistem menampilkan pesan bahwa proses gagal dilakukan (”Cek Koneksi Jaringan”) atau (”Nyalakan GPS”)
3.2.3.2 Skenario Use Case Lihat Peta MA Ciamis Fungsi proses Lihat Peta MA Ciamis yaitu untuk melihat lokasi Seluruh Madrasah Aliyah yang ada di Kabupaten Ciamis Nomor
: UC-02
Nama UsesCase
: Lihat Peta MA Ciamis
Aktor
: User
Tujuan
: User melihat lokasi seluruh MA di Ciamis
Kondisi Awal
: Sistem menampilkan menu utama
75
Kondisi Akhir
: Sistem Menampilkan Peta lokasi MA di Ciamis
Deskripsi
: Untuk Melihat semua lokasi MA di Ciamis
Tabel 3.4 Skenario Use Case Lihat Peta MA Ciamis SKENARIO USE CASE LIHAT PETA MAN CIAMIS Main Flow of Event Actor Action
1. User memilih Peta MA Ciamis
Reaksi Sistem 2. Sistem menampilkan peta lokasi MA Ciamis di sekitar user
Exceptional Flow of Event 2.a. Sistem menampilkan pesan bahwa proses gagal dilakukan (”Cek Koneksi Jaringan”) atau (”Nyalakan GPS”)
3.2.3.3 Skenario Use Case Tentang Aplikasi Fungsi proses Tentang Aplikasai yaitu untuk melihat Deskripsi Aplikasi Nomor
: UC-03
Nama Use Case
: Lihat Tentang Aplikasi
Aktor
: User
Tujuan
: User melihat Informasi Aplikasi
Kondisi Awal
: Sistem menampilkan menu utama
Kondisi Akhir
: Sistem Menampilkan halaman Tentang Aplikasi
Deskripsi
: Untuk menampilkan Informasi Aplikasi
76
Tabel 3.5 Skenario Use Case Tentang Aplikasi SKENARIO USE CASE Tentang Aplikasi Main Flow of Event Actor Action
1. User memilih Tentang Aplikasi
Reaksi Sistem 2. Sistem menampilkan Informasi Aplikasi
Exceptional Flow of Event
3.2.3.4 Skenario Use Case Login Fungsi proses Login yaitu untuk mencocokan username dan password administrator agar biasa mengakses web service Nomor
: UC-04
Nama UsesCase
: Login
Aktor
: Admin
Tujuan
: Admin masuk kedalam sistem
Kondisi Awal
: Sistem menampilkan menu utama
Kondisi Akhir
: Sistem Menampilkan halaman login admin
Deskripsi
: Untuk proses otentifikasi admin mengakses web service.
77
Tabel 3.6 Skenario Use Case Login SKENARIO USE CASE LOGIN Main Flow of Event Actor Action
Reaksi Sistem
1. Mengisi username dan password pada halaman login
2. Mengautentikasi username dan password yang diinputkan dengan basis data 3. Bila cocok Menampilkan halaman wb menu utama.
Exceptional Flow of Event 3.a. Sistem menampilkan pesan bahwa username atau password salah
3.2.3.5 Skenario Use Case Pengolahan Data Fungsi proses Pengolahan Data yaitu untuk melihat manipulasi data. Nomor
: UC-05
Nama Use Case
: Pengolahan Data Konten
Aktor
: Admin
Tujuan
: Melihat Fungsionalitas Data Konten
Kondisi Awal
: Sistem menampilkan halaman awal
Kondisi Akhir
: Menampilkan halaman manipulasi data
Deskripsi
: Untuk melihat manipulasi data konten
78
Tabel 3.7 Skenario Use Case Pengolahan Data Konten SKENARIO USE CASE PENGOLAHAN DATA KONTEN Main Flow of Event Actor Action 1. Setelah Login
Reaksi Sistem 2. Menampilkan halaman pengolahan data
Exceptional Flow of Event
3.2.3.6 Skenario Use Case Tambah Data Fungsi proses Tambah Data agar admin dapat menambah data Madrasah Aliyah Negeri. Nomor
: UC-05
Nama UsesCase
: Tambah Data
Aktor
: Admin
Tujuan
: Admin menambah data
Kondisi Awal
: Sistem menampilkan halaman pengolahan
Kondisi Akhir
: Data bertambah
Deskripsi
: Untuk menambah data sekolah.
79
Tabel 3.8 Skenario Use Case Tambah Data SKENARIO USE CASE TAMBAH DATA Main Flow of Event Actor Action
Reaksi Sistem
1. Memilih link tambah
2. Menampilkan Form tambah data
3. Mengisi field-field pada form pengisian tambah data
4. Melakukan proses tambah data pada basis data 5. Menyimpan hasil tambah data
Exceptional Flow of Event 4.a. Menampilkan pesan bahwa belum diisi dengan Lengkap
3.2.3.7 Skenario Use Case Hapus Data Fungsi proses Hapus Data yaitu admin dapat menghapus data Madrasah Aliyah Nomor
: UC-06
Nama UsesCase
: Hapus Data
Aktor
: Admin
Tujuan
: Admin menghapus data
Kondisi Awal
: Sistem menampilkan halaman pengolahan
Kondisi Akhir
: Data terhapus
Deskripsi
: Fungsionalitas untuk menghapus data
80
Tabel 3.9 Skenario Use Case Hapus Data SKENARIO USE CASE HAPUS DATA Main Flow of Event Actor Action
Reaksi Sistem
1. Memilih link hapus
2. Menampilkan pesanhapus data
3. Memilih pilihan “Ya” atau “Tidak” hapus data
4. Melakukan proses hapus data pada basis data 5. Menyimpan hasil data
Exceptional Flow of Event
3.2.3.8 Skenario Use Case Ubah Data Fungsi proses Ubah Data yaitu admin dapat mengubah data Madrasah Aliyah. Nomor
: UC-07
Nama Uses Case
: Ubah Data
Aktor
: Admin
Tujuan
: Admin mengubah data
Kondisi Awal
: Sistem menampilkan halaman pengolahan
Kondisi Akhir
: Data berubah
Deskripsi
: Untuk mengubah data sekolah.
81
Tabel 3.10 Skenario Use Case Ubah Data SKENARIO USE CASE UBAH DATA Main Flow of Event Actor Action
Reaksi Sistem
1. Memilih link ubah
2. Menampilkan Form ubah data
3. Mengubah field-field pada form ubah data
4. Melakukan proses ubah data pada basis data 5. Menyimpan hasil Ubah data
Exceptional Flow of Event 4.a. Sistem menampilkan pesan kesalahan pengisian data
3.2.4 Activity Diagram Menggambarkan rangkaian aliran dari aktivitas dari awal hingga akhir, digunakan untuk mendeskripsikan aktifitas yang dibentuk dalam suatu operasi. 3.2.4.1 Activity Diagram Pilih Sekolah Proses Activity Diagram Pilih Sekolah berjalan setelah user memilih menu sekolah pada menu utama aplikasi android, kemudian sistem menampilkan list sekolah Madrasah Aliyah di Kabupaten Ciamis, di tiap - tiap sekolah terdapat informasi mengenai sekolah yang di pilih. Activity Diagram dapat dilihat pada Gambar 3.3.
82
act Sekolah
USER
SISTEM
DATABASE
star Pilih Menu Sekolah
Memilih sekolah dari list v iew
meminta data nama sekolah
generate database
tampil list v iew sekolah
meminta informasi sekolah
kirim data
generate informasi sekolah
Tampil informasi sekolah
kirim informasi
finish
Gambar 3.3 Activity Diagram Pilih Sekolah 3.2.4.2 Activity Diagram Lihat Peta MA Ciamis Proses Activity Diagram Lihat Peta MA Ciamis berjalan setelah user memilih menu Lihat Peta MA Ciamis pada menu utama aplikasi android, kemudian sistem menampilkan peta lokasi semua sekolah Madrasah Aliyah di Kabupaten Ciamis. Lokasi Madrasah Aliyah di ambil berdasarkan longitude dan latitude dari masing-masing sekolah dan ditampilkan dalam berbentuk icon di dalam peta, ketika kita klik salah satu icon dalam peta maka akan muncul deskripsi dari sekolah yang di pilih. Activity Diagram dapat dilihat pada Gambar 3.4.
83
act Lihat Peta
USER
SISTEM
DATABASE
star
Pilih Peta
Klik icon sekolah
meminta longitude dan latitude
generate longitude dan latitude
Tampil peta beserta icon sekolah
Kirim Data
Meminta info sekolah
generate database
Tampil Info Sekolah
finish
Gambar 3.4 Activity Diagram Lihat Peta MA Ciamis 3.2.4.3 Activity Diagram Tentang Aplikasi Proses Activity Diagram Tentang Aplikasi berjalan setelah user memilih menu Tentang Aplikasi pada menu utama aplikasi android, kemudian sistem menampilkan Informasi dari Aplikasi yang dibuat. Activity Diagram dapat dilihat pada Gambar 3.5.
84
act Tentang Aplikasi
USER
SISTEM
star
Memulai Aplikasi
Tampil Menu Utama
Pilih Tentang Aplikasi
Tampil Info Aplikasi
finish
Gambar 3.5 Activity Diagram Tentang Aplikasi
3.2.4.4 Activity Diagram Login Proses Activity Diagram Login berjalan setelah admin pertama kali membuka halaman web, kemudian sisitem meminta agar username dan password di isi. Apabila username dan password berhasil di inputkan maka akan muncul pesan login berhasil. . Activity Diagram dapat dilihat pada Gambar 3.6.
85
act Login
ADMIN
DATABASE
SISTEM
star
Tampil Forma Login
Masuk Web
Isi Usernmae dan Passw ord
Meminta Isi Username dan Passw ord
Autentifikasi
Membaca masukan
gagal Validasi berhasil
Tampil notifikasi login berhasil
finish
Gambar 3.6 Activity Diagram Login 3.2.4.5 Activity Diagram Pengolahan Data Proses Activity Diagram Pengolahan Data berjalan setelah admin pertama kali membuka halaman web, kemudian sisitem meminta agar username dan password di isi. Apabila username dan password berhasil di inputkan maka akan muncul pesan login berhasil kemudian sistem akan menampilkan halaman pengolahan data. Activity Diagram dapat dilihat pada Gambar 3.7.
86
act Pengolahan Data
ADMIN
DATABASE
SISTEM
star
Tampil Forma Login
Masuk Web
Isi Usernmae dan Passw ord
Meminta Isi Username dan Passw ord
Autentifikasi
Membaca masukan
gagal Validasi berhasil
Tampil notifikasi login berhasil
Tampil Form Pengolahan DAta
finish
Gambar 3.7 Activity Diagram Pengolahan Data 3.2.4.6 Activity Diagram Tambah Data Proses Activity Diagram Tambah Data berjalan setelah admin pertama kali membuka halaman web, kemudian sisitem meminta agar username dan password di isi. Apabila username dan password berhasil di inputkan maka akan muncul pesan login berhasil kemudian sistem akan menampilkan halaman pengolahan data. Admin menambah data setelah klik tombol tambah dan dan mengisi field
87
tambah data yang di tampilkan oleh sistem, Apabila terdapat kesalahan maka akan muncul notification dari sistem. Activity Diagram dapat dilihat pada Gambar 3.8. act Tambah Data
ADMIN
DATABASE
SISTEM
star
Tampil Forma Login
Masuk Web
Isi Usernmae dan Passw ord
Meminta Isi Username dan Passw ord
Autentifikasi
Membaca masukan
gagal Validasi berhasil Klik Tobol Tambah
Tampil Form Pengolahan Data
Tampil Form Tambah Data
Membaca Masukan
Isi Data
gagal
validasi berhasil
Update Data
Tampil Data Yang ditambah
finish
Gambar 3.8 Activity Diagram Tambah Data 3.2.4.7 Activity Diagram Hapus Data Proses Activity Diagram Hapus Data berjalan setelah admin pertama kali membuka halaman web, kemudian sisitem meminta agar username dan password di isi. Apabila username dan password berhasil di inputkan maka akan muncul pesan login berhasil kemudian sistem akan menampilkan halaman pengolahan data. Apabila admin ingin menghapus data maka pilih data yang akan di hapus
88
pada halaman pengolahan data kemudian kilik tombol hapus maka sistem akan menampilkan notification pilihan hapus atau batal. Activity Diagram dapat dilihat pada Gambar 3.9. act Tambah Data
ADMIN
DATABASE
SISTEM
star
Tampil Forma Login
Masuk Web
Isi Usernmae dan Passw ord
Meminta Isi Username dan Passw ord
Autentifikasi
Membaca masukan
gagal Validasi berhasil Klik LInk Edit
Tampil Form Pengolahan Data
Tampil Form Ubah Data
Membaca Masukan
Isi Data
gagal
validasi berhasil
Update Data
Tampil Data Yang diUpdate
finish
Gambar 3.9 Activity Diagram Hapus Data
3.2.4.8 Activity Diagram Ubah Data Proses Activity Diagram Ubah Data berjalan setelah admin pertama kali membuka halaman web, kemudian sisitem meminta agar username dan password di isi. Apabila username dan password berhasil di inputkan maka akan muncul pesan login berhasil kemudian sistem akan menampilkan halaman pengolahan data. Admin mengubah data setelah klik link ubah pada halaman pengolahan data
89
kemudian sistem menampilkan halaman ubah data, isi field yang datanya akan di ubah apabila terjadi kesalahan dalam pengisian data maka system akan menampilkan notification. Activity Diagram dapat dilihat pada Gambar 3.10. act Tambah Data
ADMIN
DATABASE
SISTEM
star
Tampil Forma Login
Masuk Web
Isi Usernmae dan Passw ord
Meminta Isi Username dan Passw ord
Autentifikasi
Membaca masukan
gagal Validasi berhasil Klik LInk Edit
Tampil Form Pengolahan Data
Tampil Form Ubah Data
Membaca Masukan
Isi Data
gagal
validasi berhasil
Update Data
Tampil Data Yang diUpdate
finish
Gambar 3.10 Activity Diagram Ubah Data 3.2.5
Class Diagram Class Diagram menggambarkan struktur dan deskripsi class beserta
hubungan satu sama lain seperti Asosiasi, Generalisasi dan lain sebagainya. Dalam gambar 3.11 di bawah ini di gambarkan hubungan antar class yang terjadi pada sistem yang akan dibangun.
90
class CLAS DIAGRAM
MAIN
mSekolah -
Variable: long NamaSekolah: long Latitude: int Longitude: int
+ + +
onCreate() : void init() : void onCLikckListener() : void
Menu
-
Variable: long
-
Variable: long Keyword: long Latitude: int Longitude: int
+ + + +
checkLocation() : void getLocation() : void onCreate() : void showMain() : void
+ +
onCreate() : void onItemclick() : void
Conection -
Url: long Latitude: double Longitude: double
+ + +
onCreate() : void OpenURL() : void LoadData() : void
mTentang mPeta -
Id: int NamaSekolah: long Nsm: long Alamat: long Akreditasi: long KepalaSekolah: long Latitude: double Longitude: double Tahun: double
+
onItemclick() : void
-
Variable: long
+
showMain() : void
DbMA -
Id: int NamaSekolah: long Nsm: long Alamat: long Akreditasi: long KepalaSekolah: long Latitude: double Longitude: double Tahun: int Email: long Website: long
+
LoadData() : void
Gambar 3.11 Class Diagram Aplikasi Pemetaan Untuk Monitoring dan Evaluasi Madrasah Aliyah Negeri di Kabupaten Ciamis
3.2.6 Sequence Diagram Merupakan bentuk dari interaction diagram, menggambarkan interaksi antar objek di dalam dan di sekitar sistem berupa Message yang digambarkan terhadap waktu. Masing – masing objek termasuk actor memiliki line vertikal, message digambarkan garis berpanah dari satu objek ke objek lainnya, dan activation bar menunjukan lamanya eksekusi sebuah proses.Sebuah sequence diagram, secara khusus menjabarkan behavior sebuah skenario tunggal. Diagram tersebut menunjukkan sejumlah objek contoh dan pesan – pesan yang melewati objek – objek ini di dalam use case. Berikut ini sequence diagram dari sistem yang akan dibangun.
91
3.2.6.1 Sequence Diagram Sekolah Menjelaskan bagaimana user melakukan interaksi dengan sistem untuk menampilkan Sekolah beserta informasi mengenai sekolah tersebut. Dapat dilihat pada gambar 3.12. sd Sekolah Menu Utama
mSekolah
Connection
User
Server
onClick()
onCreate()
onItemClick()
OpenUrl()
LoadData()
ConnectionServer()
ResultData()
Gambar 3.12 Sequence Diagram Sekolah 3.2.6.2 Sequence Diagram Lihat Peta MA Menjelaskan bagaimana use rmelakukan interaksi dengan sistem untuk menampilkan Peta Lokasi Madrasah Aliyah dan menampilkan Rute menuju sekolah dari posisi kita. Dapat dilihat pada gambar 3.13 dibawah ini. sd Lihat Peta Menu Utama
mPeta
Connection
User
Server
onClick()
onCreate()
checkLocation()
getLocation()
OpenURL()
loadData()
connectionServer()
ResultPeta()
Gambar 3.13 Sequence Diagram Lihat Peta MA
92
3.2.6.3 Sequence Diagram Login Menjelaskan bagaimana admin masuk kedalam sistem melalui otentikasi .Dapat dilihat pada gambar 3.14 dibawah ini. sd Login Web
Login
Database
Admin
Server
Isi()
Isi : Index()
konek_db()
connect Server : HTTP()
otentificationField() resultData()
Gambar 3.14 Sequence Diagram Login 3.2.6.4 Sequence Diagram Tambah Data Menjelaskan bagaimana admin menambah data dalam sistem.Dapat dilihat pada gambar 3.15 dibawah ini. sd Tambah Data Web
FormMain
Database
Admin
Server
Isi()
IsiFormIsianData()
queryInsert()
konek_db()
connectServer : HTTP()
otentificationField() result : Data()
Gambar 3.15 Sequence Diagram Tambah Data
93
3.2.6.5 Sequence Diagram Hapus Data Menjelaskan bagaimana admin menghapus data dalam sistem.Dapat dilihat pada gambar 3.16 dibawah ini. sd Hapus Data Web
FormMain
Database
Admin
Server
Isi()
IsiMain()
queryDelete()
konek_db()
connectServer:HTTP()
otentificationField() result:Data()
Gambar 3.16 Sequence Diagram Hapus Data 3.2.6.5 Sequence Diagram Ubah Data Menjelaskan bagaimana admin mengubah data dalam sistem.Dapat dilihat pada gambar 3.17 dibawah ini. sd Ubah Data Web
FormMain
Database
Admin
Server
Isi()
Ubah Data()
queryUpdate()
konek_db()
connectServer : HTTP()
otenticationField() resul:Data()
Gambar 3.17 Sequence Diagram Ubah Data
94
3.2.7
Component Diagram Pada tahap ini, Component Diagram menggambarkan struktur dan
hubungan antar komponen piranti lunak termasuk ketergantungan (dependency ). Komponen piranti lunak yang yang dimaksud adalah modul yang berisi source code atau binary code , yang ada library atau excutetable yang muncul pada compile time, link time ataupun pada runtime. Component Diagram ditunjukan pada gambar dibawah ini. 3.2.8
Deployment Diagram Diagram Deployment menggambarkan rinci bagaimana komponen di-
deploy dalam infrastruktur sistem, dimana komponen akan terletak (pada mesin Server atau perangkat keras apa), bagaimana kemampuan jaringan pada lokasi tersebut, spesifikasi Server dan hal-hal yang lain bersifat fisikal. Gambaran arsitektur fisik dari perangkat keras dan perangkat lunak dari aplikasi Gis Man seperti ditunjuk dalam gambar 3.18.
95
Aplikasi Server PHP Page
Web Server
MySQL Database
Google Server
Aplikasi XML GUI
Google API
Class
Resources
Gambar 3.18 Deployment Diagram
96
3.3 Perancangan Antar Muka Tahap perancangan desain bertujuan untuk mencari bentuk yang optimaldari aplikasi yang akan dibangun dengan pertimbangan faktor-faktor permasalahan dan kebutuhan yang ada pada sistem seperti yang telah ditetapkanpada tahap analisis. Dalam tahap ini upaya yang dilakukan yaitu dengan cara mengkombinasikan penggunaan teknologi perangkat keras dan perangkat lunak yang tepat sehingga diperoleh yang optimal dan mudah diimplementasikan. 1. Perancangan antarmuka Menu Utama Aplikasi GIS MAN
Gambar 3.19 Perancangan antar muka Menu Utama Aplikasi
97
2. Perancangan antarmuka List Sekolah
Gambar 3.20 Perancangan antar muka List Sekolah
3. Perancangan antarmuka Map
Gambar 3.21 Perancangan antar muka peta
98
4. Perancangan Antarmuka Login Admin
Gambar 3.22 Perancangan Login Admin
5. Perancangan Antarmuka Halaman Utama Admin
Gambar 3.23 Perancangan Halaman Utama Admin
99
6. Perancangan Antarmuka Tambah Data Admin
Gambar 3.24 Perancangan Halaman Tambah Data Admin
100
7. Perancangan Antarmuka Ubah Data Admin
Gambar 3.25 Perancangan Halaman Ubah Data Admin
