BAB III ANALISIS DAN PERANCANGAN. Informasi pendidikan Madrasah Aliyah Negeri saat ini banyak dibutuhkan

Transkripsi

1 60 BAB III ANALISIS DAN PERANCANGAN 3.1 Analisis Sistem 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 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

2 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 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.

3 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.

4 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 berplatform Android. Bagian ini berfungsi sebagai antarmuka antara user dengan sistem. Pengembangan 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

5 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 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.

6 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 b/g/n Jaringan 3G : UMTS GPS : A-GPS Analisis Kebutuhan Perangkat Lunak Analisis perangkat lunak terdiri dari spesifikasi minimum perangkat yang dibutuhkan dan elemen google maps api.

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

8 67 3. GeoCoding and Reverse GeoCoding Yaitu utility untuk memproses konversi alamat ke koordinat geografis (seperti lintang dan bujur 37, ,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

9 68 " map_canvas ", dan mereferensikan element ini ke Document Object Model (DOM) 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 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.

10 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 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 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, dan Website.

11 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.

12 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 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. 3.2 berikut. Aktor yang berperan dalam menjalankan sistem dapat dilihat pada tabel Tabel 3.1 Aktor Sistem No Aktor Deskripsi A-01 User Merupakan aktor yang menggunakan Aplikasi GIS MAN Ciamis A-02 Admin Merupakan aktor yang mengelola data MAN ciamis di web administrator 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.

13 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 Sekolah Hapus Data Ubah Data «include» «extend» «extend» Lihat Peta «include» Informasi Pengolahan Data User «include» «include» «extend» Admin 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 Identifikasi Use Case Diagram Identifikasi Use Case Diagram yang terdapat dalam sistem dapat dilihat pada Tabel 3.3 dibawah ini.

14 73 Tabel 3.2 Deskripsi Use Case Pengguna No Use Case Deskripsi UC-01 UC-02 UC-03 UC-04 Sekolah Lihat Peta Tentang Aplikasi Login Untuk melihat sekolah Madrasah Aliyah di Ciamis dan kemudian di tampilkan. Untuk Melihat semua lokasi MA di Ciamis Untuk menampilkan Informasi Aplikasi Untuk proses otentifikasi admin mengakses web service. Pengolahan Data Untuk untuk melihat manipulasi UC-05 Konten data konten UC-06 Tambah Data Untuk menambah data sekolah. UC-07 Hapus Data Untuk menghapus data sekolah. UC-08 Ubah Data Untuk mengubah data sekolah Skenario Diagram Skenario proses proses yang terdapat didalam Use Case dapat dilihat pada tabel-tabel dibawah ini Skenario Use Case Pilih Sekolah Fungsi proses pilih sekolah yaitu untuk memilih sekolah Madrasah Aliyah yang ada di Kabupaten Ciamis Nomor Nama UsesCase Aktor Tujuan Kondisi Awal : UC-01 : Pilih Sekolah : User : User Melihat List Sekolah : Sistem menampilkan menu utama

15 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 Reaksi Sistem 1. User Memilih Menu Sekolah 2. Sistem Menampilkan list MA yang ditampilkan oleh sistem. 3. User Memilih salah satu MA 4. Sistem Menampilkan Profil 5. Sistem Menampilkan Grafik Siswa 6. Sistem Menampilkan Lokasi sekolah 7. User memilih Profil 8. Sistem menampilkan profil sekolah 9. Sistem menampilkan grafik siswa 9. User memilih Grafik siswa berdasarkan jumlah siswa setiap tahun 11. Sistem menampilkan lokasi sekolah 10. User memilih lokasi yang di tuju Exceptional Flow of Event 11.a. Sistem menampilkan pesan bahwa proses gagal dilakukan ( Cek Koneksi Jaringan ) atau ( Nyalakan GPS ) 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 Nama UsesCase Aktor Tujuan Kondisi Awal : UC-02 : Lihat Peta MA Ciamis : User : User melihat lokasi seluruh MA di Ciamis : Sistem menampilkan menu utama

16 75 Kondisi Akhir Deskripsi : Sistem Menampilkan Peta lokasi MA di Ciamis : 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 Reaksi Sistem 1. User memilih Peta MA Ciamis 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 ) Skenario Use Case Tentang Aplikasi Fungsi proses Tentang Aplikasai yaitu untuk melihat Deskripsi Aplikasi Nomor Nama Use Case Aktor Tujuan Kondisi Awal Kondisi Akhir Deskripsi : UC-03 : Lihat Tentang Aplikasi : User : User melihat Informasi Aplikasi : Sistem menampilkan menu utama : Sistem Menampilkan halaman Tentang Aplikasi : Untuk menampilkan Informasi Aplikasi

17 76 Tabel 3.5 Skenario Use Case Tentang Aplikasi SKENARIO USE CASE Tentang Aplikasi Main Flow of Event Actor Action Reaksi Sistem 1. User memilih Tentang Aplikasi 2. Sistem menampilkan Informasi Aplikasi Exceptional Flow of Event Skenario Use Case Login Fungsi proses Login yaitu untuk mencocokan username dan password administrator agar biasa mengakses web service Nomor Nama UsesCase Aktor Tujuan Kondisi Awal Kondisi Akhir Deskripsi : UC-04 : Login : Admin : Admin masuk kedalam sistem : Sistem menampilkan menu utama : Sistem Menampilkan halaman login admin : Untuk proses otentifikasi admin mengakses web service.

18 77 Tabel 3.6 Skenario Use Case Login SKENARIO USE CASE LOGIN Main Flow of Event Actor Action 1. Mengisi username dan password pada halaman login Exceptional Flow of Event Reaksi Sistem 2. Mengautentikasi username dan password yang diinputkan dengan basis data 3. Bila cocok Menampilkan halaman wb menu utama. 3.a. Sistem menampilkan pesan bahwa username atau password salah Skenario Use Case Pengolahan Data data. Fungsi proses Pengolahan Data yaitu untuk melihat manipulasi Nomor Nama Use Case Aktor Tujuan Kondisi Awal Kondisi Akhir Deskripsi : UC-05 : Pengolahan Data Konten : Admin : Melihat Fungsionalitas Data Konten : Sistem menampilkan halaman awal : Menampilkan halaman manipulasi data : Untuk melihat manipulasi data konten

19 78 Tabel 3.7 Skenario Use Case Pengolahan Data Konten SKENARIO USE CASE PENGOLAHAN DATA KONTEN Main Flow of Event Actor Action Reaksi Sistem 1. Setelah Login 2. Menampilkan halaman pengolahan data Exceptional Flow of Event Skenario Use Case Tambah Data Madrasah Aliyah Negeri. Fungsi proses Tambah Data agar admin dapat menambah data Nomor Nama UsesCase Aktor Tujuan Kondisi Awal Kondisi Akhir Deskripsi : UC-05 : Tambah Data : Admin : Admin menambah data : Sistem menampilkan halaman pengolahan : Data bertambah : Untuk menambah data sekolah.

20 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 Skenario Use Case Hapus Data Madrasah Aliyah Fungsi proses Hapus Data yaitu admin dapat menghapus data Nomor Nama UsesCase Aktor Tujuan Kondisi Awal Kondisi Akhir Deskripsi : UC-06 : Hapus Data : Admin : Admin menghapus data : Sistem menampilkan halaman pengolahan : Data terhapus : Fungsionalitas untuk menghapus data

21 80 Tabel 3.9 Skenario Use Case Hapus Data SKENARIO USE CASE HAPUS DATA Main Flow of Event Actor Action 1. Memilih link hapus 3. Memilih pilihan Ya atau Tidak hapus data Reaksi Sistem 2. Menampilkan pesanhapus data 4. Melakukan proses hapus data pada basis data 5. Menyimpan hasil data Exceptional Flow of Event Skenario Use Case Ubah Data Madrasah Aliyah. Fungsi proses Ubah Data yaitu admin dapat mengubah data Nomor Nama Uses Case Aktor Tujuan Kondisi Awal Kondisi Akhir Deskripsi : UC-07 : Ubah Data : Admin : Admin mengubah data : Sistem menampilkan halaman pengolahan : Data berubah : Untuk mengubah data sekolah.

22 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 Activity Diagram Menggambarkan rangkaian aliran dari aktivitas dari awal hingga akhir, digunakan untuk mendeskripsikan aktifitas yang dibentuk dalam suatu operasi 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.

23 82 act Sekolah USER SISTEM DATABASE star Pilih Menu Sekolah meminta data nama sekolah generate database Memilih sekolah dari list v iew tampil list v iew sekolah kirim data meminta informasi sekolah generate informasi sekolah Tampil informasi sekolah kirim informasi finish Gambar 3.3 Activity Diagram Pilih Sekolah 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.

24 83 act Lihat Peta USER SISTEM DATABASE star Pilih Peta meminta longitude dan latitude generate longitude dan latitude Klik icon sekolah 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 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.

25 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 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.

26 85 act Login ADMIN SISTEM DATABASE star Masuk Web Tampil Forma Login Isi Usernmae dan Password Meminta Isi Username dan Password Autentifikasi Membaca masukan gagal Validasi berhasil Tampil notifikasi login berhasil finish Gambar 3.6 Activity Diagram Login 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.

27 86 act Pengolahan Data ADMIN SISTEM DATABASE star Masuk Web Tampil Forma Login Isi Usernmae dan Password Meminta Isi Username dan Password Autentifikasi Membaca masukan gagal Validasi berhasil Tampil notifikasi login berhasil Tampil Form Pengolahan DAta finish Gambar 3.7 Activity Diagram Pengolahan Data 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

28 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 SISTEM DATABASE star Masuk Web Tampil Forma Login Isi Usernmae dan Password Meminta Isi Username dan Password Autentifikasi Membaca masukan gagal Validasi berhasil Klik Tobol Tambah Tampil Form Pengolahan Data Tampil Form Tambah Data gagal validasi Isi Data Membaca Masukan berhasil Update Data Tampil Data Yang ditambah finish Gambar 3.8 Activity Diagram Tambah Data 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

29 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 SISTEM DATABASE star Masuk Web Tampil Forma Login Isi Usernmae dan Password Meminta Isi Username dan Password Autentifikasi Membaca masukan gagal Validasi berhasil Klik LInk Edit Tampil Form Pengolahan Data Tampil Form Ubah Data gagal validasi Isi Data Membaca Masukan berhasil Update Data Tampil Data Yang diupdate finish Gambar 3.9 Activity Diagram Hapus Data 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

30 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 act Tambah Data ADMIN SISTEM DATABASE star Masuk Web Tampil Forma Login Isi Usernmae dan Password Meminta Isi Username dan Password Autentifikasi Membaca masukan gagal Validasi berhasil Klik LInk Edit Tampil Form Pengolahan Data Tampil Form Ubah Data gagal validasi Isi Data Membaca Masukan berhasil Update Data Tampil Data Yang diupdate finish Gambar 3.10 Activity Diagram Ubah Data 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.

31 90 class CLAS DIAGRAM MAIN Menu - Variable: long msekolah - Variable: long - NamaSekolah: long - Latitude: int - Longitude: int + oncreate() : void + init() : void + onclikcklistener() : void - Variable: long - Keyword: long - Latitude: int - Longitude: int + oncreate() : void + onitemclick() : void + checklocation() : void + getlocation() : void + oncreate() : void + showmain() : void Conection - Url: long - Latitude: double - Longitude: double + oncreate() : void + OpenURL() : void + LoadData() : void mpeta - Id: int - NamaSekolah: long - Nsm: long - Alamat: long - Akreditasi: long - KepalaSekolah: long - Latitude: double - Longitude: double - Tahun: double + onitemclick() : void mtentang - Variable: long + showmain() : void DbMA - Id: int - NamaSekolah: long - Nsm: long - Alamat: long - Akreditasi: long - KepalaSekolah: long - Latitude: double - Longitude: double - Tahun: int - long - Website: long + LoadData() : void Gambar 3.11 Class Diagram Aplikasi Pemetaan Untuk Monitoring dan Evaluasi Madrasah Aliyah Negeri di Kabupaten Ciamis 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.

32 Sequence Diagram Sekolah Menjelaskan bagaimana user melakukan interaksi dengan sistem untuk menampilkan Sekolah beserta informasi mengenai sekolah tersebut. Dapat dilihat pada gambar sd Sekolah Menu Utama msekolah Connection User Server onclick() oncreate() onitemclick() OpenUrl() LoadData() ConnectionServer() ResultData() Gambar 3.12 Sequence Diagram Sekolah 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

33 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() resultdata() otentificationfield() Gambar 3.14 Sequence Diagram Login 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() result : Data() otentificationfield() Gambar 3.15 Sequence Diagram Tambah Data

34 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() result:data() otentificationfield() Gambar 3.16 Sequence Diagram Hapus Data 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() resul:data() otenticationfield() Gambar 3.17 Sequence Diagram Ubah Data

35 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 Deployment Diagram Diagram Deployment menggambarkan rinci bagaimana komponen dideploy 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.

36 95 Aplikasi Server PHP Page Web Server MySQL Database Aplikasi Google Server XML GUI Google API Class Resources Gambar 3.18 Deployment Diagram

37 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

38 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

39 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

40 99 6. Perancangan Antarmuka Tambah Data Admin Gambar 3.24 Perancangan Halaman Tambah Data Admin

41 Perancangan Antarmuka Ubah Data Admin Gambar 3.25 Perancangan Halaman Ubah Data Admin