i Perancangan Sistem Informasi Posyandu Berbasis Web menggunakan Framework CodeIgniter (Studi Kasus: Posyandu “Kasih Ibu” Margosari) Artikel Ilmiah Peneliti : Daniel Piter Kristian(672013054) Nina Setiyawati., S.Kom., M.Cs. Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga 2017
25
Embed
Perancangan Sistem Informasi Posyandu Berbasis Web ...repository.uksw.edu/bitstream/123456789/13639/1/T1_672013054_Full... · vi Perancangan Sistem Informasi Posyandu Berbasis Web
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
i
Perancangan Sistem Informasi Posyandu Berbasis Web
menggunakan Framework CodeIgniter
(Studi Kasus: Posyandu “Kasih Ibu” Margosari)
Artikel Ilmiah
Peneliti :
Daniel Piter Kristian(672013054)
Nina Setiyawati., S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2017
ii
iii
iv
v
vi
Perancangan Sistem Informasi Posyandu Berbasis Web
menggunakan Framework CodeIgniter
(Studi Kasus: Posyandu “Kasih Ibu” Margosari)
Artikel Ilmiah
Diajukan Kepada
Fakultas Teknologi Informasi
Untuk Memperoleh Gelar Sarjana Komputer
Peneliti :
Daniel Piter Kristian(672013054)
Nina Setiyawati., S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2017
1
Perancangan Sistem Informasi Posyandu Berbasis Web
layout, cross-device design, dan flexible design [6]. Front-end Framework dan CSS
Framework merupakan sarana yang biasa dipergunakan untuk membantu dalam
pembuatan web design atau pembuatan template website yang lebih baik dan lebih
cepat. Penggunaan CSS Framework terbaru memungkinkan output atau tampilan
template yang sudah mengandung dengan responsive web.
Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk
bagian pengembangan front-end website. Bootstrap juga merupakan salah satu
framework HTML, CSS dan javascript yang paling populer di kalangan web
developer yang digunakan untuk mengembangkan sebuah website yang responsive.
Sehingga halaman website nantinya dapat menyesuaikan sesuai dengan ukuran
monitor device (desktop, tablet, ponsel) yang digunakan pengguna disaat mengakses
website-website dari browser[7].
Berdasarkan informasi yang didapatkan dari lapangan proses bisnis lama
seperti pada Gambar 1. Menjelaskan proses bisnis posyandu lama. Balita dan Ibu
hamil datang ke posyandu kemudian petugas melakukan pendataan seperti nama,
alamat, umur. Proses pendataan selesai kemudian proses selanjutnya yaitu
pelaksanaan posyandu. Proses pelaksanaan posyandu meliputi penimbangan berat
badan. Proses selanjutnya yaitu pelaksanaan dilanjutkan dengan pencatatan dan
penyuluhan oleh kader (petugas Posyandu). Proses terakhir yaitu penyerahan laporan
posyandu dan bingkisan berupa makanan kecil (snack).
5
BALITA
IBU HAMIL
POSYANDU PENDATAAN
Pencatatan Laporan Posyandu
Penyerahan Laporan & Bingkisan
Gambar 1 Proses Bisnis Posyandu (Lama).
Sistem lama seperti pada Gambar 1 lebih memakan waktu dalam pendataan
dan arsip dari beberapa peserta ada yang hilang . Dibuatlah proses bisnis baru sebagai
penunjang penelitian untuk memudahkan petugas dalam melakukan pendataan yang
diharapkan mengurangi resiko hilangnya arsip dan memberikan kemudahan peserta
posyandu dalam mengetahui perkembangan anak serta mengetahui kapan posyandu
akan dilaksanakan.
3. Metode dan Perancangan Sistem Penelitian ini dilakukan dan diselesaikan melalui tahapan penelitian seperti
terlihat pada Gambar 2.
Gambar 2 Tahapan Penelitian
Tahapan pada Gambar 2 terlihat bahwa penelitian dilakukan dalam empat
tahap. Tahapan pertama yaitu analisis kebutuhan dan pengumpulan data, dilakukan
wawancara kepada kader posyandu untuk mengetahui permasalahan yang ada di
posyandu margosari. Didapatkan masalah bahwa posyandu margosari masih manual
dalam hal pendataan data berat badan dan juga tinggi badan maka dikembangkan
sistem informasi agar pendataan tumbuh kembang dapat didata dengan online.
6
Wawancara yang dilakukan dengan kader posyandu Margosari adalah mencari data
tumbuh kembang balita dengan diberikannya buku KMS oleh salah satu balita yang
selesai diimunisasi dalam posyandu adalah data berat badan tiap bulan dan juga
tinggi badan. Hal ini bertujuan agar mengetahui kebutuhan sistem dan program dari
peserta anggota posyandu. Tahap kedua, ketiga dan keempat dilakukan dengan
menggunakan model proses perangkat lunak prototyping. Tahap terakhir adalah
tahap penyusunan laporan, seluruh hasil penelitian dituliskan dalam sebuah laporan
dalam bentuk laporan tertulis dan akan menjadi laporan hasil penelitian.
Prototyping model dipilih sebagai metode pengembangan pada penelitian ini
karena dalam pengembangan sistem ini dilakukan komunikasi yang intensif dengan
pengguna sistem. Metode ini membantu pengembang dalam membentuk model dari
sistem yang dibuat. Metode ini dilakukan secara bertahap dimulai dari
mengembangkan suatu prototype yang sederhana untuk kemudian dapat
dikembangkan kembali hingga sistem selesai dikembangkan. Prototype merupakan
bentuk dasar dari sistem atau subsistem[9]. Tahapan prototype dapat dilihat pada
Gambar 3.
Gambar 3 Prototyping Model
Proses atau tahapan dalam penyelesaian masalah pada prototyping model
adalah :
1. Listen to customer (pengumpulan data dan informasi)
Pengumpulan data diperoleh dari kader posyandu margosari yang bernama
Anik Wahyuningsih pada bulan November. Data yang sudah dikumpulkan yaitu
data berat badan balita kemudian data tinggi badan balita, selanjutnya akan di
definisikan secara garis besar sistem serta kebutuhan dan fungsi apa saja yang
7
diperlukan untuk membangun aplikasi yang dapat meningkatkan kinerja
posyandu.
Gambar 4 Proses Bisnis Posyandu (Baru)
Sistem yang baru pada Gambar 4 menunjukkan proses balita dan ibu
hamil tetap datang ke posyandu kemudian pendataan dilakukan secara online.
Pencatatan laporan posyandu dilakukan secara online sehingga data tersebut
sudah masuk ke dalam basis data. Proses bisnis yang baru tidak banyak memakan
waktu karena pendataan dilakukan secara online tidak manual lagi.
2. Build/revise mock up (membangun prototyping)
Diagram UML meliputi diagram use case diagram, class diagram dan
activity diagram, Use Case diagram sistem informasi posyandu dilihat pada
Gambar 5:
8
Gambar 5 Use Case Diagram Sistem Informasi Posyandu
Gambar 5 Use Case Diagram sistem Posyandu dari sistem yang dibuat, di
mana terdapat data pasien terdiri dari tiga aktor dalam sistem, yaitu aktor
administrator, kader dan pasien. Aktor pasien di dalam use case tersebut adalah
peserta posyandu. Aktor administrator merupakan pemilik hak akses tertinggi,
dimana dapat melakukan pengolahan data, data kader, memberikan pemberitahuan
dan pemeriksaan. Hak akses kader adalah melihat data pasien yang ada di bawah
tanggung jawabnya dan hak akses pasien adalah melihat data anak dan juga grafik
berat badan kemudian dapat menerima pemberitahuan posyandu di akun masing-
masing.
mengolah data kader
mengolah data pasien
administrator
insert data kader
update data kader
delete data kader
view data kader
<<extend>>
<<extend>>
<<extend>>
<<extend>>
insert data pasien
update data pasiendelete data pasien
<<extend>>
<<extend>>
<<extend>>
kader
pasien
view data pasien
<<extend>>
9
Gambar 6 Activity Diagram Sistem Informasi Posyandu
Gambar 6 merupakan Activity Diagram untuk proses melakukan menambah
berat badan dan tinggi badan balita tiap bulan agar grafik tetap berjalan tiap
bulannya. Aktivitas dimulai dengan administrator melakukan login sistem kemudian
sistem menampilkan pilihan dan administrator memilih menu check up dan sistem
akan menampilkan form yang harus diisi oleh administrator, setelah diisi
administrator akan menyimpan data tersebut dan akan otomatis tersimpan di basis
data. Jika sudah selesai penginputan data maka dapat berpindah ke menu selanjutnya,
bila belum selesai maka administrator akan mengisi form check up lagi dan
mengganti nama pasien yang akan dimasukkan datanya.
Gambar 7 Class Diagram Sistem Informasi Posyandu
10
Gambar 7 merupakan Class Diagram dari aplikasi ini. Class diagram di atas
menunjukkan bahwa aplikasi ini terdiri atas 3 (tiga) bagian utama yaitu entity,
controller, dan boundary. Entity berhubungan langsung dengan data-data yang ada di
basis data, controller berhubungan langsung dengan fungsi-fungsi pengelolaan data,
dan boundary merupakan tampilan dari aplikasi. Controler Administrator
mempunyai fungsi pengelolaan data posyandu.
3. Customer test drives mook-up (Evaluasi prototyping)
Prototype yang telah selesai dibangun selanjutnya akan diuji coba pada tahap
ini untuk mengetahui prototype yang dibangun telah berjalan dengan baik dan sesuai
dengan kebutuhan dan rancangan awal sistem. Uji coba dilakukan di posyandu
margosari yang berada di JL.Margosari 3 no.97 Salatiga.
Tahapan siklus kedua yang dilakukan dalam Prototype Model sebagai berikut:
1. Listen to customer (Pengumpulan Data dan Informasi)
Pengumpulan data dilakukan kembali bersama kader posyandu dan juga
peserta posyandu. Berdasarkan wawancara yang telah dilakukan kembali, didapatkan
beberapa evaluasi yaitu menambahkan konten pengumuman di halaman aplikasi
Posyandu.
2. Build / revise mook-up (Membangun prototyping)
Setelah pengumpulan data pada siklus kedua selesai dilakukan, langkah
berikutnya memperbaiki aplikasi yang telah dibangun. Terdapat perbaikan tampilan
aplikasi dalam siklus kedua terdapat penambahan tampilan konten fungsi
pengumuman posyandu. Gambar 8 adalah penjelasan konten pengumuman.
Gambar 8 Konten Pengumuman Posyandu
Gambar 8 merupakan tampilan konten dimana diberikan fasilitas
pengumuman dalam aplikasi. Konten pengumuman digunakan untuk melihat
informasi yang telah diberikan oleh administrator kepada peserta posyandu dan juga
kader posyandu.
3. Customer test drives mook-up (Evaluasi prototyping)
Pada tahap ini dilakukan evaluasi terhadap prototype yang telah dibangun.
Evaluasi dilakukan oleh pihak posyandu. Prototype yang dibangun pada siklus telah
disetujui, sehingga proses dilanjutkan ke pengkodean.
11
4. Hasil Implementasi dan Pembahasan Sistem yang telah dibuat memiliki beberapa fitur yang berkaitan dengan
pengumuman informasi tentang posyandu Margosari menggunakan navbar notifikasi
dan laporan hasil check up peserta posyandu yang dapat dilihat dan bisa secara
langsung diunduh oleh peserta posyandu. Halaman tambah pengumuman informasi
tentang posyandu Margosari dapat dilihat pada gambar 9.
Gambar 9 Halaman Tambah Pengumuman
Gambar 9 merupakan halaman pengumuman. Pada halaman ini, administrator akan memberikan pengumuman yang meliputi isi pengumuman, tanggal jatuh tempo dan catatan. Setelah semua form terisi maka pilih tombol tambah pengumuman sehingga akan masuk ke dalam tabel pengumuman yang ada di dalam basis data. Fungsi untuk memasukkan proses terlihat pada kode program 1.
Kode Program 1 Fungsi Insert Pengumuman pada “AdminModel”
Pada baris 1 adalah pendeklarasian nama fungsi tambah pengumuman. Dalam
fungsi insertPeng terdapat penambahan data pada tb_peng.
Kode Program 2 Fungsi Insert Pengumuman pada” Controller Admin” 4. function insertPeng(){ 5. $data = array( 6. "pengumuman" =>$this->input->post('Pengumuman'), 7. "tanggal" =>$this->input->post('Tanggal'),