BAB III ANALISA DAN HASIL
B. Perancangan Sistem
1. Actor
himpunan peran yang pengguna mainkan ketika berinteraksi dengan use case
2 UseCase Deskripsi dari urutan
aksi-aksi yang ditampilkan sistem yang menghasilkan suatu hasil yang terukur bagi suatu actor
3 System Menspesifikasikan paket
yang menampilkan sistem secara terbatas
4 Dependency Hubungan dimana
perubahan yang terjadi pada suatu elemen mandiri (Independent) akan mempengaruhi elemen yang bergantung padanya elemenyang tidak mandiri
(Independent)
5 Generalization Hubungan dimana
objek anak (Descendent) berbagi perilaku dan struktur data dari objek yang ada di atasnya objek induk (Ancestor)
6 Clude Menspesifikasikan bahwa
use case sumber secara eksplisit
7 Tend Menspesifikasikan bahwa
usecase target memperluas perilaku dari use case sumber pada suatu titik yang diberikan
8 Assosiation Menghubungkan antara
objek satu dengan objek lainnya
2. Activity Diagram
Activity diagram adalah representasi grafis dari alur kerja tahapan aktivitas. Diagram ini mendukung pilihan tindakan, iterasi, dan concurrency. Pada pemodelan UML, activity diagram dapat digunakan untuk menjelaskan bisnis dan alur kerja operasional secara tahap demi tahap dari komponen suatu sistem.
Tabel 2. 3 Activity diagram
No Simbol Nama Keterangan
1 Activity Memperlihatkan
bagaimana masing-masing kelas
antarmuka saling berinteraksi satu sama lain
2 Decision Pilihan untuk
pengambilan keputusan
3 Initial Node Titik awal
4 Acifity Final Node Titik akhir
5 Fork Menunjukkan kegiaan
yang dilakukan secara paralel atau untuk menggabungkan dua kegiatan paralel menjadi satu
6 Line Connector Digunakan untuk
menghubungkan satusimbol dengan simbol lainnya
3. Class Diagram
Class diagram atau kelas diagram menunjukkan interaksi antar kelas dalam sistem. Diagram kelas mengandung informasi dan tingkah laku segala sesuatu yang berkaitan dengan informasi tersebut. Adapun kegunaan dari class diagram adalah sebagai berikut :
a. Mengelompokan obyek-obyek menjadi kelas-kelas berarti mengapresiasikan masalah yang sedang di hadapi.
Defenisi-defenisi common (seperti nama kelas dan atribut) cukup di simpan sekali per instan kelas (obyek).
Tabel 2. 4 Class diagram
Simbol Nama Keterangan
Class Himpunan dari objek-objek
yang berbagi atribut serta operasi yang sama
Nary Association
Upaya untuk menghindari asosiasi dengan lebih dari 2 objek
Assosiasi Hubungan statis antar class yang menggambarkan class yang memiliki atribut berupa class lain atau class yang harus mengetahui eksistensi class lain
Generalization Hubungan dimana objek anak (descendent) berbagi perilaku dan struktur data dari objek yang ada di atasnya objek induk (ancestor)
Dependency Hubungan dimana perubahan
yang terjadi pada suatu elemen mandiri (independet) akan mempengaruhi elemen yang bergantung padanya elemen yang tidak mandiri (independent)
4. Sequence Diagram
Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu, menggambarkan skenario
atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan output tertentu. Collaboration diagram juga menggambarkan interaksi antara objek yang lebih menekankan pada masing-masing objek dan bukan pada waktu penyampaian message. Setiap message dari level tertinggi memiliki nomor 1 .
Tabel 2. 5 Sequence diagram
No Simbol Nama Keterangan
1 Object dan
lifeline
Orang, tempat, benda, kejadian atau konsep yang ada dalam dunia nyata yang penting bagi suatu aplikasi yang saling berinteraksi
2
Message
Spesifikasi dari komunikasi antar objek yang memuat informasi-informasi tentang aktivitas yang terjadi
3 Actor Menspesifikasikan himpunan
peran yang pengguna mainkan ketika berinteraksi dengan use case
F. Perangkat Lunak Pembangun Sistem 1. PHP
Personal Home Page (PHP : Hipertext Preprocessor) adalah bahasa server side scripting yang menyatu dengan HTML untuk membuat halaman web yang dinamis. Karena PHP merupakan server side scripting maka sintaks dan perintah-perintah PHP akan dieksekusi di server kemudian hasilnya dikirimkan ke browser dalam format HTML.
2. CSS
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan kumpulan kode-kode yang bertujuan untuk menghias dan
mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).
Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen.
Dan sekarang, W3C telah memperbaiki dan meningkatkan kemampuan CSS2 ke CSS3. CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode CSS
3. Visual Studio Code
Visual Studio Code adalah Sofware yang sangat ringan, namun kuat editor kode sumbernya yang berjalan dari desktop. Muncul dengan built-in dukungan untuk JavaScript, naskah dan Node.js dan memiliki array beragam ekstensi yang tersedia untuk bahasa lain, termasuk C ++, C # , Python, dan PHP. Hal ini didasarkan sekitar Github ini Elektron, yang merupakan versi cross-platform dari Atom komponen kode-editing, berdasarkan JavaScript dan HTML5. Editor ini adalah fitur lengkap lingkungan pengembangan terpadu (IDE) dirancang untuk pengembang yang bekerja dengan teknologi cloud yang terbuka Microsoft. Visual Studio Code menggunakan open source NET perkakas untuk memberikan dukungan untuk ASP.NET C # kode, membangun alat pengembang Omnisharp NET dan compiler Roslyn.
Antarmuka yang mudah untuk bekerja dengan, karena didasarkan pada gaya explorer umum, dengan panel di sebelah kiri, yang
menunjukkan semua file dan folder Anda memiliki akses ke panel editor di sebelah kanan, yang menunjukkan isi dari file yang telah dibuka. Dalam hal ini, editor telah dikembangkan dengan baik, dan menyenangkan pada mata. Ia juga memiliki fungsi yang baik, dengan intellisense dan autocomplete bekerja dengan baik untuk JSON, CSS, HTML, {kurang}, dan Node.js. Visual Studio Code telah dirancang untuk bekerja dengan alat-alat yang ada, dan Microsoft menyediakan dokumentasi untuk membantu pengembang bersama, dengan bantuan untuk bekerja dengan ASP.NET 5, Node.js, dan Microsoft naskah, serta alat-alat yang dapat digunakan untuk membantu membangun dan mengelola aplikasi Node.js.
Visual Studio Code benar-benar sedang ditargetkan pada pengembang JavaScript yang ingin alat pengembangannya lengkap untuk scripting server-side mereka dan yang mungkin ingin usaha dari Node.js untuk kerangka berbasis NET. Visual Studio Code, adalah belum solid, lintas platform kode Editor ringan, yang dapat digunakan oleh siapa saja untuk membangun aplikasi untuk Web.
4. Leaflate JS
Leaflet adalah pustaka JavaScript sumber terbuka terkemuka untuk peta interaktif ramah seluler. Dengan berat hanya 39 KB, Leaflet memiliki semua fitur pemetaan yang dibutuhkan sebagian besar pengembang.
Leaflet dirancang dengan mempertimbangkan kesederhanaan, kinerja dan kegunaan. Leaflet bekerja secara efisien di semua platform desktop dan seluler utama, dapat diperluas dengan banyak plugin, memiliki API yang indah, mudah digunakan dan terdokumentasi dengan baik serta kode sumber yang sederhana.
5. XAMPP
XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kopilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri dari program Apache HTTP Server, MySQL database dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP
merupakan singkatan dari X (empat sistem operasi yaitu Windows, Linux, Mac OS dan Solaris), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. XAMPP dikembangkan dari sebuah tim proyek bernama Apache Friends, yang terdiri dari tim ini, tim pengembang dan tim pendukung.
6. Mapbox
Mapbox adalah salah satu penyedia peta daring kustom terbesar di situs-situs ternama seperti Foursquare, Pinterest, Evernote, Financial Times dan Uber Technologies. Sejak 2010, Mapbox memperbanyak pilihan peta kustomnya untuk mengisi keterbatasan yang dimiliki penyedia peta seperti Google Maps. Mapbox merupakan pencipta atau kontributor sejumlah pustaka dan aplikasi peta bebas terkenal, misalnya seperti MBTiles, kartografi TileMill IDE, pustaka JavaScript Leaflet, bahasa gaya dan parser CartoCSS, serta pustaka JavaScript mapbox.js.
37 BAB III
ANALISA DAN HASIL
A. Analisis Sistem
Metode analisis dan perancangan dalam pengembangan sistem ini menggunakan model proses waterfall. Model waterfall ini bersifat linier, karena pada prosesnya mengalir begitu saja secara sekuensial mulai dari awal hingga akhir. Jika terjadi masalah pada suatu tahap, maka dapat kembali ke tahap yang diinginkan tetapi dengan syarat tahapan yang diakukan sebelumnya tidak diperhitungkan lagi. Oleh karena itu model waterfall ini mengharuskan tahap yang dikerjakan dengan tuntas sebelum melangkah ke tahap berikutnya. Menurut Rosa (2015:29) model proses waterfall dapat dilihat pada gambar berikut:
1. Rekayasa Sistem
Pada tahap ini dilakukan pengumpulan kebutuhan ditingkatkan sistem (System requirments) dengan mendefenisikan konsep sistem beserta interface yang menghubungkan lingkungannya. Tahapan ini merupakan tahapan yang penting karenan aplikasi berkomunikasi dengan perangkat keras, data, manusis dan peragkat lunak lainnnya. Hasil dari tahap ini adalah spesifikasi sistem (System specification). Adapun spesifikasi sistem yang diperlukan dalam perancangan Sistem Informasi Pemetaan Perguruan Tinggi di Kota Padang Berbasis WEB ini sebagai berikut:
a. Perangkat Keras yang digunakan dalam membangun sistem ini menggunakan spesifikasi sebagai berikut:
1) Processor: Intel® Core™ i5 2) 2410M CPU @ 2,30 GHz 3) RAM: 4,00 GB
4) Harddisk: 697 GB
5) Standar optical dan keyboard 6) Monitor resolusi 1024 x 768 pixel
Perangkat keras yang dipakai untuk mengakses sistem tidak terlalu rumit, dengan spesifikasi processor minimal Intel® Core™ i3350M CPU @ 2,26 GHz, ram 3,00 GB, Harddisk 320 GB, Standar optical dan keyboard Monitor resolusi 1024 x 768 pixel. Perangkat keras yang memiliki spesifikasi lebih tinggi dari sistem ini juga dapat digunakan dalam mengakses sistem.
b. Perangkat Lunak yang digunakan untuk membangun sistem ini menggunakan spesifikasi sebagai berikut:
1) Sistem operasi menggunakan windows 7 Single Language 64-bit 2) Pengkodean peta dengan Leaflet
3) Web server XAMPP V2.5.8 4) Database server MySQL
5) Bahasa pemograman HTML, PHP, CSS dan Jquery 6) Web Editor Visual Studio Code
7) Browser Chrome 2. Analisis
Pada tahap ini dilakukan pengumpulan kebutuhan elemen ditingkat perangkat lunak (software requirements analysis). Pada tahap ini digunakan untuk mendefinisikan kebutuhan dalam perspektif pengguna dan sistem diuraikan secara utuh menjadi komponen-komponen dasarnya dengan tujuan untuk mengidentifikasi dan mengevaluasi kebutuhannya. Hasil dari tahapan ini adalah spesifikasi kebutuhan perangkat lunak (software specification).
a. Analisis data
Pada analisa data dibutuhkan data untuk membangun sistem yang dirancang. Data yang dibutuhkan dalam sistem ini berupa data spasial dan data atribut. Data spasial diperoleh dari Google Maps yang menampilkan koordinat bumi, sehingga dapat mempermudah peneliti dalam mengumpulkan data spasial dan tidak perlu mengambil data spasial langsung kelapangan. Sedangkan data atribut diperoleh dari situs resmi http://ban-pt.kemdikbud.go.id.
b. Analisis kebutuhan
Dalam analisis ini mendeskripsikan kebutuhan-kebutuhan pengguna ditingkat fungsional maupun non-fungsional. Pada kebutuhan fungsional mendefinisikan fungsi yang dilakukan oleh sistem, sedangkan kebutuhan non-fungsional merupakan tambahan, batasan atau penjelasan detail untuk kebutuhan fungsional.
1) Kebutuhan Fungsional
a) Sistem menyediakan fasilitas login dan logout. b) Dapat melakukan pencarian lokasi.
c) Dapat menampilkan peta dengan batasan wilayah.
d) Dapat menambahkan, mengubah dan menghapus data atribut dan spasial.
e) Dapat membaca tabel atribut dan menampilkan detail informasi yang dicari.
f) Dapat melakukan fungsi zoom-in dan zoom-out pada peta. g) Fasilitas contact untuk bantuan
2) Kebutuhan Non-Fungsional
a) Panjang string username dan password minimal 5 karakter aplha-numerik tanpa spasi.
b) Peta tampil jika dihubungkan dengan internet.
c) Untuk menambahkan lokasi koordinat penambahan kasus masih di-input-kan secara manual.
d) Tabel basis data atribut yang dapat dibaca dan dikelola adalah berformat SQL (MySQL).
B. Perancangan Sistem
Perancangan Sistem Informasi Pemetaan Penyebaran Penyakit Covid-19 di Kabupaten Tanah Datar yang dirancang ini menggunakan bahasa pemodelan Unified Modelling Language(UML). Dalam pemodelan UML ini sistem yang dirancang digambarkan secara detail. Adapun diagram yang digunakan adalah use case diagram, class diagram, dan activity diagram.
1. Actor
Actor yang terlibat dalam perancang Sistem Informasi Geografis Pemetaan Penyebaran Penyakit Covid-19 di Kabupaten Tanah Datar adalah:
Tabel 3. 1 Tabel Actor
Actor Peran
Admin a. Admin adalah actor yang bisa mengakses setiap halaman pada Sistem Informasi Geografis Pemetaan Penyebaran Penyakit Covid-19 di Kabupaten Tanah Datar.
b. Mengelola data user, data penyebaran serta data penyebaran per wilayah yang meliputi entri, edit dan hapus
User a. User adalah actor yang hanya bisa mengakses halaman untuk menampilkan peta. User bisa meliputi puskesmas terkait, kepala dinas, kepala bidang, kepala daerah serta pemangku kebijakan lainnya.
b. Pada halaman tampilan peta, user bisa melihat nama wilayah yang terjangkit covid-19
2. Use Case Diagram
Use case diagram memperlihatkan suatu urutan interaksi antara aktor dan sistem.
Melihat Peta Penyebaran Melihat Informasi Penyebaran Cari Titik Penyebaran Melihat Informasi Penyebaran Melihat Peta Penyebaran Melihat Jumlah Penyebran Lihat Jumlah per-Kecamatan Login Logout Kelola Data Penyebaran Insert Edit Delete Kelola Data User Insert Edit Delete <<extend>> Kelola titik penyebaran Insert Delete Edit <<extend>> <<extend>> <<include>> <<include>> <<extend>> <<extend>> Melihat Total Kasus Melihat Total Kasus per-Kecamatan <<include>> User Admin
Gambar 3. 1 Use case diagram
3. Sequence Diagram
Sequence diagram menggambarkan interkasi antara objek yang ada disekitar sistem.
a. Sequence Diagram Login
Sequence Diagram Login menggambarkan bagaimana interaksi objek saat melakukan proses login dimana sistem akan melakukan cek terhadap setiap user yang login. Jikan user yang login merupakan admin maka akan dialihkan ke halaman admin. Jika user yang login merupakan selain admin maka akan dialihkan ke halaman user.
Gambar 3. 2 Sequence Diagram Login b. Sequence Diagram Entri Data Penyebaran
Sequence Diagram Entri Data Penyebaran menggambarkan bagaimana interaksi objek saat melakukan proses entri data penyebaran. Admin terlebih dahulu masuk ke halaman entri data penyebaran, kemudian mengisi data penyebaran pada form input. Data yang telah diisi kemudian disimpan ke database yang dihantarkan melalui parameter form input hingga ke proses menyimpan.
User
Form Insert Data Penyebaran Sistem Data Penyebaran
1.Isi Data Penyebaran ()
2. Entri Data Penyebaran()
3.Data Penyebaran()
4.Tambah Data Penyebaran()
5. Data Penyebran di Simpan 6. Pesan Konfirmasi ()
c. Sequence Diagram Edit Data Penyebaran
Sequence Diagram Edit Data Penyebaran menggambarkan bagaimana interaksi objek saat melakukan proses edit data penyebaran. Admin terlebih dahulu masuk ke halaman edit data penyebaran, kemudian memilih data yang akan di edit pada form. Data yang terpilih kemudian akan menampilkan atribut yang bersangkutan pada form, lalu mengubah data. Data yang telah diubah kemudian di simpan ke database yang dihantarkan melalui parameter antara form edit hingga proses penyimpanan perubahan.
User
Form Insert Data Penyebaran Sistem Data Penyebaran
1.Pilih Data Penyebaran ()
2. Ubah Data Penyebaran()
3.Data Penyebaran()
4.Ubah Data Penyebaran()
5. Data Penyebran di Ubah 6. Pesan Konfirmasi ()
Gambar 3. 4 Sequence Diagram Edit Data Penyebaran d. Sequence Diagram Hapus Data Penyebaran
Sequence Diagram Hapus Data Penyebaran menggambarkan bagaimana interkasi objek saat melkukan proses hapus data penyebaran. Admin terlebih dahulu masuk ke halaman hapus data penyebaran, kemudian memilih data yang akan dihapus. Data yang akan dihapus dihantarkan melaluiu parameter antara form hapus hingga ke proses menghapus.
User
Form Insert Data Penyebaran Sistem Data Penyebaran
1.Pilih Data Penyebaran ()
2. Hapus Data Penyebaran()
3.Data Penyebaran()
4.Hapus Data Penyebaran()
5. Data Penyebran di Hapus 6. Pesan Konfirmasi ()
Gambar 3. 5 Sequence Diagram Hapus Data Penyebaran e. Sequence Diagram Entri Data User
Sequence Diagram Entri Data User menggambarkan bagaimana interaksi objek saat melakukan proses entri data user. Admin terlebih dahulu masuk ke halaman entri data user, kemudian mengisi data user pada form input. Data yang telah diisi kemudian disimpan ke database yang dihantarkan melalui parameter antara form input hingga ke proses penyimpanan.
User
Form Kelola Data User Sistem Data User
1.Isi Data User ()
2. Entri Data User()
3.Data User()
4.Tambah Data User()
5. Data User di Simpan
6. Pesan Konfirmasi ()
f. Sequence Diagram Edit Data User
Sequence Diagram Edit Data User menggambarkan bagaimana interaksi objek saat melakukan proses edit data user. Admin terlebih dahulu masuk ke halaman edit data user, kemudian memilih data yang akan diubah. Data yang terpilih kemudian akan menampilkan atribut yang bersangkutan. Data yang telah diubah kemudian disimpan ke database yang dihantarkan melalui parameter antara form edit hingga ke proses menyimpan perubahan.
User
Form Kelola Data User Sistem Data User
1.Pilih Data User ()
2. Ubah Data User()
3.Data User()
4.Ubah Data User()
5. Data User di Ubah 6. Pesan Konfirmasi ()
Gambar 3. 7 Sequence Diagram Edit Data User g. Sequence Diagram Hapus Data User
Sequence Diagram Hapus Data User menggambarkan bagaimana interaksi objek saat melakukan proses hapus data user. Admin terlebih dahulu masuk ke halaman edit data user, kemudian memilih data yang akan di hapus. Data yang akan dihapus dihantarkan melalui parameter antara form hapus hingga ke proses menghapus.
User
Form Kelola Data User Sistem Data User
1.Pilih Data User ()
2. Hapus Data User()
3.Data User()
4.Hapus Data User()
5. Data User di Hapus
6. Pesan Konfirmasi ()
Gambar 3. 8 Sequence Diagram Hapus Data User
4. Activity Diagram
Activity Diagram merupakan state diagram khusus, dimana sebagian besar state adalah action dan sebagian besar transisi di-trigger oleh selesainya state sebelumnya (internal processing).
Oleh karena itu Activity Diagram tidak menggambarkan behaviour internal sebuah sistem (dan interaksi antar subsistem) secara ekstrak, tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivitas dari level atas secara umum.
a. Activity Diagram Admin
Activity Diagram Login menggambarkan bagaimana jalur aktifitas dalam proses yang dilalui oleh admin.
Login No Yes Verifikasi Tampil Menu Admin No No No Melihat Peta Penyebaran Melihat Informasi Penyebaran Pencarian kasus dan wilayah Kelola data penyebaran Insert data penyebaran Edit data penyebaran Hapus data penyebaran Kelola data wilayah Insert data wilayah Edit data wilayah Hapus data wilayah Kelola data User Insert data user
Edit data user
Hapus data user
Finish Start
b. Activity Diagram User
Activity diagram login menggambarkan bagaimana jalur aktifitas dalam proses yang di lalui oleh user.
Tampilan D ash board M elihat Peta Penyebaran Me lihat Infor masi Pe nye bar an Pe nc arian kasus dan wil ayah
Finis h
Sta rt