perancangan sistem informasi posyandu berbasis web
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
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
menggunakan Framework CodeIgniter
(Studi Kasus: Posyandu “Kasih Ibu” Margosari)
1) Daniel Piter Kristian, 2) Nina Setiyawati
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email: 1)[email protected], 2)[email protected]
Abstract
Posyandu Margosari III RT 02 and RW 01 Salatiga Sub-District Sidorejo
District is a health service unit that is assigned to perform health services. In posyandu
Margosari method used is still manual by writing data of growth of infant toddler in KMS
book which have been provided and also data of growth of toddlers in the form of paper
vulnerable to lost and exposed stains which result in inaccurate data. Based on the
existing problems then designed the design of Information Systems Posyandu web-based
with CodeIgniter Framework. System design method used in this research is prototyping
method, because in making this system is done intensive communication with application
user. This application is built using the CodeIgniter Framework and the Bootstrap
Framework by utilizing the navbar notification technology as a posyandu information
notification of the application users. With this application it will facilitate in terms of
data management posyandu and also can provide up to date information.
Keywords: Posyandu, Information System, Codeigniter Framework, Navbar -notification.
Abstrak
Posyandu Margosari III RT 02 dan RW 01 Kelurahan Salatiga Kecamatan
Sidorejo merupakan suatu unit pelayanan kesehatan yang bertugas untuk melakukan
pelayanan kesehatan. Dalam posyandu Margosari metode yang digunakan masih manual
dengan cara menuliskan data tumbuh kembang balita di dalam buku KMS yang telah
disediakan dan juga data tumbuh kembang balita yang berupa kertas rentan terhadap
hilang dan terkena noda yang mengakibatkan data tidak akurat. Berdasarkan masalah
yang ada maka dirancanglah Perancangan Sistem Informasi Posyandu berbasis Web
dengan Framework CodeIgniter. Metode perancangan sistem yang digunakan pada
penelitian ini adalah metode prototyping, karena dalam pembuatan sistem ini dilakukan
komunikasi yang intensif dengan pengguna aplikasi. Aplikasi ini dibangun menggunakan
Framework CodeIgniter dan Framework Bootstrap dengan memanfaatkan teknologi
navbar notifikasi sebagai pemberitahuan informasi posyandu terhadap pengguna aplikasi.
Dengan adanya aplikasi ini maka akan memudahkan dalam hal pengelolaan data
posyandu dan juga dapat memberikan informasi yang up to date.
Kata Kunci: Posyandu, Sistem Informasi, Framework Codeigniter, Navbar notifikasi.
1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Infotmatika, Universitas Kristen
Satya Wacana Salatiga 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga
2
1. Pendahuluan Posyandu adalah Pos Pelayanan Terpadu yang merupakan salah satu bentuk
Upaya Kesehatan Bersumberdaya Masyarakat (UKBM) yang dilaksanakan oleh, dari
dan bersama masyarakat, untuk memberdayakan dan memberikan kemudahan kepada
masyarakat guna memperoleh pelayanan kesehatan bagi ibu, bayi, anak balita dan
lansia[1], termasuk Posyandu Margosari III RT 02 dan RW 01 Kelurahan Salatiga
Kecamatan Sidorejo kesehatan yang bertugas untuk melakukan pelayanan kesehatan
bagi bayi, anak balita dan ibu hamil.
Berdasarkan wawancara yang dilakukan di posyandu, terutama di posyandu
Margosari, penggunaan Kartu Menuju Sehat (KMS) menjadi kurang efektif karena
mudah hilang, sobek, terkena air atau noda lain, serta ibu balita yang terkadang
terlupa membawa KMS pada saat pelaksanaan Posyandu, sehingga petugas tidak bisa
menuliskan catatan perkembangan balita, atau sebaliknya petugas Posyandu terlupa
untuk menuliskan hasil perkembangan balita di dalam buku KMS yang telah
disediakan[1]. Dalam posyandu Margosari metode yang digunakan masih
manualisasi dengan cara menuliskan data tumbuh kembang balita di dalam buku
KMS yang telah disediakan, data yang dimiliki oleh ibu balita di dalam buku KMS
tersebut berisikan data berat badan balita tiap bulannya dan juga pertumbuhan tinggi
badan balita tiap bulannya, data tersebut ditulis didalam KMS, tetapi untuk memantau
balita ibu bayi harus melihat buku dan juga mencari data tumbuh kembang balita di
dalam buku tersebut. Pelayanan posyandu Margosari dilakukan dalam waktu satu
bulan sekali, maka pemberitahuan dalam posyandu pun sangatlah diperlukan. Saat ini
pemberitahuan posyandu masih dilakukan dengan cara memberikan undangan tertulis
kepada setiap ibu balita yang telah terdaftar namanya dalam posyandu margosari.
Memanfaatkan teknologi yang ada maka akan dibangun sistem informasi
yang nantinya akan memudahkan ibu balita ataupun kader Posyandu dalam
pencatatan yang bisa menggantikan buku KMS dengan pembuatan aplikasi yang akan
dibuat. Akan lebih efektif dengan adanya aplikasi tersebut karena nantinya ibu balita
yang terlupa dengan kemajuan perkembangan balitanya dapat diunduh perkembangan
lewat aplikasi tersebut, menyadari jaman yang semakin maju ini pastinya smartphone
android bukan lagi menjadi barang yang biasa saja tetapi menjadi kebutuhan
komunikasi dan juga informasi. Sistem yang digunakan menggunakan web sehingga
aplikasi dapat digunakan di berbagai platform yang menggunakan web browser
seperti Mozila Firefox, Google Chrome, Opera Browser, Safari dan lain-lain.
Aplikasi ini dibuat menggunakan Bahasa Pemrograman PHP (Hypertext
Prepocessor) dengan menggunakan Framework CodeIgniter. Aplikasi ini
memanfaatkan notifikasi navbar yang nantinya ketika Administrator memberikan
sebuah pengumuman tentang Posyandu akan memunculkan pemberitahuan dimana
akan diberikan informasi bahwa akan diadakan Posyandu dan juga informasi lain.
Setelah melihat latar belakang masalah yang ada, maka menjadi sebuah
rumusan masalah pada penelitian yang dilakukan yaitu bagaimana menghasilkan
3
aplikasi Posyandu menggunakan Framework CodeIgniter memanfaatkan teknologi
navbar dengan layanan notifikasi. Adapun batasan masalah penelitian untuk tidak
memperluas area pembahasan penelitian ini. Batasan masalah dalam penelitian ini
adalah sebagai berikut: 1) Aplikasi ini dibangun dari awal dikarenakan Posyandu
Margosari sama sekali belum memiliki sistem berbasis Web atau masih manual. 2)
Penelitian berfokus pada pemanfaatan notifikasi navbar kepada peserta Posyandu,
dan peserta dapat melihat data bayi dan juga download. 3) Aplikasi yang dibuat
memberikan informasi sederhana dalam bentuk visual dan teks tentang
perkembangan balita di Posyandu Margosari. 4) Tidak membahas kecepatan
bandwith internet. 5) Aplikasi tidak membahas keamanan data.
2. Kajian Pustaka Penelitian terdahulu yang pertama dilakukan pada tahun 2013. Yaitu
penelitian tentang Rancang Bangun Sistem Informasi Manajemen Posyandu di
Kecamatan Semarang Selatan. Sistem aplikasi yang akan dibangun ini merupakan
suatu sistem untuk membantu mengolah data Posyandu baik digunakan untuk
memasukkan data, memperbaharui data, mengubah data dan lain sebagainya.
Sehingga semua pihak dapat menggunakan untuk kepentingan bersama secara
maksimal dan mudah, dalam pembangunan sistem aplikasi Posyandu ini penulis
menggunakan bahasa pemrograman PHP dan MySQL[2].
Penelitian terdahulu yang kedua dilakukan pada tahun 2013. Penelitian yang
membahas tentang Sistem Pengelolaan dan Pemantauan Posyandu Berbasis Web di
Kota Palembang. Kurangnya informasi mengenai posyandu yang disajikan kepada
masyarakat juga merupakan alasan dilakukannya pembuatan sistem ini, selain itu
tujuan dari pembuatan sistem ini adalah untuk mengetahui informasi mengenai
Posyandu yang ada di kota Palembang, seperti ; status gizi anak, imunisasi, tingkat
risiko ibu hamil, serta daftar ibu dan anak yang hidup dan mati yang dapat dilihat
oleh siapa saja melalui web. Penulis membangun sistem pengelolaan dan pemantauan
posyandu berbasis web menggunakan metode Rational Unified Process (RUP)
dengan melakukan fase Inception, Elaboration, Construction, dan Transition. Juga
menggunakan bahasa pemodelan Unified Modelling Language (UML). Penulis juga
menggunakan bahasa pemrograman berbasis web yakni PHP dan Adobe
Dreamweaver dan MySQL sebagai database [3].
Perbedaan dengan penelitian yang dilakukan saat ini adalah aplikasi dapat
melihat perkembangan balita dengan adanya berat badan dan juga tinggi badan balita
degan adanya visualisasi yang dapat dilihat dan juga didapatkan data balita tersebut.
Penelitian sebelumnya dapat melihat data tetapi belum ada pemberitahuan atau
notifikasi aplikasi tersebut, karena aplikasi tersebut hanya memberikan data tetapi
tidak memberikan pemberitahuan tentang Posyandu.
Sistem informasi adalah suatu sistem didalam organisasi yang
mempertemukan kebutuhan pengolah transaksi harian, mendukung operasi, bersifat
4
manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar
tertentu dengan laporan-laporan yang deperlukan [4].
Framework dapat diartikan sebagai kumpulan potongan-potongan program
(kelas dan Fungsi) yang disusun dan di organisasikan sedemikian rupa, sehingga
dapat digunakan kembali untuk membantu membuat aplikasi utuh tanpa harus
membuat semua kodenya dari awal. CodeIgniter (CI) adalah framework PHP yang
dibuat berdasarkan kaidah Model-View-Controller (MVC). Dengan MVC, maka
memungkinkan pemisahan antara layer Application- logic dan presentation [5].
Adapun beberapa kelebihan framework CodeIgniter, antara lain CodeIgniter
termasuk framework sederhana dengan ukuran kecil, namun memiliki kemampuan
besar, aplikasi yang dibuat dengan CI kompatibel dengan standar hosting yang
menjalankan beberapa versi PHP dan konfigurasi yang berbeda, menyediakan
Library dan Helper yang cukup lengkap.
Sebuah web yang memiliki teknologi terbaru yaitu penggabungan dari
HTML5 dan CSS3. Responsive Web adalah perubahan ukuran web secara otomatis
mengikuti lebar device (Smartphone, Notebook-PC, dan lain-lain). Perubahan ini
mengacu pada fluid design, elastic layout, rubber layout, liquid design, adaptive
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'),
8. "catatan" =>$this->input->post('Catatan'),
9. );
10. $dat = array("notif" => +1, ); 11. $this->AdminModel->insertPeng($data,$dat); 12. redirect('Admin/pengumuman','refresh'); 13. }
Fungsi insert pengumuman pada Controller Admin bertugas untuk mengatur
data yang telah diambil dari basis data. Pada baris 4 adalah pendeklarasian nama
1. function insertPeng($data,$dat){ 2. $this->db->insert('tb_peng', $data);
3. }
12
fungsi tambah pengumuman. Kode program 5 hingga 9 berfungsi untuk
menambahkan data telah ditambahkan pada form yang telah diisi. Baris 10 berfungsi
untuk menampung notifikasi baru. Pada baris 11 merupakan perintah menambahkan
data ke fungsi insertPeng yang ada di dalam AdminModel. Baris 12 hingga 13
merupakan perintah untuk menampilkan halaman admin/pengumuman sekaligus
menampilkan data yang telah ditampung dalam basis data. Data yang telah diolah
akan ditampilkan pada halaman pengumuman untuk pasien. Halaman pengumuman
dapat dilihat pada Gambar 10.
Gambar 10 Halaman Pengumuman Pasien
Pada Gambar 10 terdapat tampilan pengumuman yang telah diberikan oleh
administrator. Dalam tabel pengumuman terdapat pemberitahuan informasi terbaru
dan detail informasi yang diberikan. Dalam tombol detail berisi nama pengumuman,
tanggal dan catatan. Kode program 3 menunjukan view halaman pengumuman.
Kode Program 3 Fungsi View Halaman Pengumuman 14. <?php 15. foreach ($peng as $row) { 16. ?> 17. <tr> 18. <td><?php echo $row->id_peng ?></td> 19. <td><?php echo $row->pengumuman ?></td> 20. <td> 21. <center>
22. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
23. data-pengumuman="<?php echo $row->pengumuman; ?>" 24. data-tanggal="<?php echo $row->tanggal; ?>" 25. data-catatan="<?php echo $row->catatan; ?>" 26. ><i class="fa fa-list"></i> 27. </button> 28. </center> 29. </td> 30. </tr> 31. <?php } ?>
13
Pada bagian view halaman pengumuman berfungsi untuk menampilkan data
yang telah diolah dan kemudian ditampilkan kepada pasien. Untuk baris 15
merupakan pendeklarasian pengumuman menjadi row. Pada baris 18 sampai 31
bertugas untuk menampilkan data pengumuman.
Selain pengumuman, aplikasi ini juga terdapat grafik hasil dari data berat
badan dan juga tinggi badan balita tiap bulan. Gambar11 menunjukkan grafik berat
badan balita.
Gambar 11 Halaman Grafik Berat Badan Balita
Pada Gambar 11 merupakan tampilan grafik berat badan balita dengan dari
hasil pendataan tiap bulan saat dilaksanakan kegiatan kegiatan posyandu. Grafik
dapat terbentuk dengan adanya aktivitas posyandu tiap bulan maka dapat dilihat data
tumbuh kembang balita lewat grafik tersebut. Data yang didapatkan tiap bulannya
adalah berat badan dengan satuan ons.
Gambar 12 Halaman Grafik Tinggi Badan Balita
14
Pada Gambar 12 merupakan tampilan grafik tinggi badan balita dari hasil
pendataan tiap bulan saat dilaksanakan kegiatan kegiatan posyandu. Grafik dapat
terbentuk dengan adanya aktivitas posyandu tiap bulan maka dapat dilihat data
tumbuh kembang balita lewat grafik tersebut. Data yang didapatkan tiap bulannya
adalah tinggi badan balita dengan satuan cm (centimeter).
Dibawah ini merupakan kode program fungsi view pada halaman grafik balita
yang ditampilkan pada gambar 11 dan 12.
Kode Program 4 Fungsi View Halaman Grafik Balita 32. <script> 33. window.onload = function(){ 34. var ctx =
document.getElementById("dashReport").getContext("2d");
35. window.myLine = new Chart(ctx).Line(swirlData, { 36. responsive: true, 37. scaleShowVerticalLines: false, 38. scaleBeginAtZero : true, 39. multiTooltipTemplate: "<%if (label){%><%=label%>: <%}%><%=
value %>",
40. }); 41. var ctx = document.getElementById("myChart").getContext("2d"); 42. var myChart = new Chart(ctx, { 43. type: 'line', 44. data: { 45. labels: [ 46. <?php foreach ($pemeriksaan as $row) { 47. echo '"'.$row->Tanggal.'",'; 48. } ?> 49. ], 50. datasets: [ 51. { 52. label: "BeratBadan", 53. data: [<?php foreach ($pemeriksaan as $row) { 54. echo $row->BeratB1.","; 55. } ?>] },{ 56. label: "TinggiBadan", 57. data: [<?php foreach ($pemeriksaan as $row) { 58. echo $row->BeratB2.","; 59. } ?>] 60. }]}, 61. options: { 62. scales: { 63. yAxes: [{ 64. ticks: { 65. beginAtZero:true}}]}}});} 66. </script> 67. <div class="panel panel-default"> 68. <div class="panel-heading">History Berat Badan</div> 69. <div class="panel-body"> 70. <div class="chart"> 71. <canvas id="myChart" height="200" width="500"></canvas> 72. </div> 73. <div id="legendDiv"></div> 74. </div></div>
15
Pada bagian view Halaman Grafik Balita berfungsi untuk menampilkan data
yang telah diolah dan kemudian ditampilkan kepada pasien. Pada baris 32 hingga
baris 46 merupakan pendeklarasian pengolahan data tinggi dan berat badan yang telah
ada dengan menggunakan javascript yang kemudian akan ditampilkan dan di ubah
menjadi grafik pada baris 71.
Dibawah ini merupakan tampilan halaman kader pada smartphone yang
menggunakan CSS Bootstrap ditampilkan pada gambar 13.
Gambar 13 Halaman Kader Pada Smartphone Samsung Galaxy S3
Gambar 13 merupakan tampilan yang ada pada halaman Kader ketika dibuka
melalui smartphone Samsung Galaxy S3. Proses ini dilakukan dengan memanggil
CSS yang terdapat pada Bootstrap Framework CSS. Setiap file yang terletak pada
controller view menggunakan perintah pemanggilan Bootsrap Framework CSS.
Pemanggilannya dilakukan dalam file yang terletak file header.php. Kode Program 5
merupakan perintah pemanggilan Bootsrap Framework CSS.
Kode Program 5 Perintah Pemanggilan Bootstrap Framework CSS 75. <link rel="stylesheet" href="<?php echo base_url().'assets/css/font-
awesome.min.css' ?>">
76. <link rel="stylesheet" href="<?php echo base_url().'assets/css/animate.css' ?>">
77. <link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap.min.css' ?>">
78. <link rel="stylesheet" href="<?php echo base_url().'assets/css/dataTables.bootstrap.min.css' ?>">
79. <link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap-social.css' ?>">
80. <link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap-select.css' ?>">
81. <link rel="stylesheet" href="<?php echo base_url().'assets/css/fileinput.min.css' ?>">
82. <link rel="stylesheet" href="<?php echo base_url().'assets/css/awesome-bootstrap-checkbox.css' ?>">
83. <link rel="stylesheet" href="<?php echo base_url().'assets/css/style.css' ?>">
16
Gambar 14 Halaman History Pasien Pada Kader
Gambar 14 merupakan halaman history pasien pada kader, dimana kader
dapat melihat perkembangan pasien yang ada di bawah kendali kader tersebut dalam
memantau tumbuh kembang balita. Di dalam history terdapat nama, tanggal
diperiksa, berat badan dan tinggi badan balita tersebut.
Pengujian aplikasi dilakukan dengan menguji fungsi-fungsi dari aplikasi yang
telah dibuat untuk mencari bug pada aplikasi posyandu. Pengujian aplikasi dilakukan
agar sistem yang dibangun berjalan sesuai dengan yang diharapkan dan dapat
memenuhi kebutuhan pengguna. Pengujian ini menggunakan dua pengujian yaitu
pengujian alpha dan pengujian beta.
Pengujian alpha adalah aplikasi digunakan sebagaimana mestinya, dengan
pengembang aplikasi yang tetap mengawasi apabila terjadi kesalahan. Atau dengan
kata lain uji coba alpha dilakukan dalam lingkungan yang terkontrol. Sedangkan
pengujian beta yaitu dilakukan dari sisi end user, baik seorang maupun beberapa
orang, dimana pihak pengembang tidak berada bersama para end user tersebut. Atau
dengan kata lain, ujicoba beta dilakukan dalam lingkungan yang tidak terkontrol oleh
pengembang [10].
Pengujian alpha menggunakan metode blackbox yaitu pengujian fungsi-fungsi
aplikasi secara langsung tanpa memperhatikan alur eksekusi program dilakukan
dengan cara menguji setiap fungsi aplikasi secara langsung tanpa memperhatikan alur
eksekusi program [11]. Pengujian ini dilakukan dengan memperhatikan apakah fungsi
yang dibuat telah berjalan sesuai rancangan data sesuai dengan yang diharapkan.
Tabel 1 adalah hasil pengujian dari aplikasi yang telah dilakukan. Tabel 1 Hasil Pengujian Blackbox
Fungsi yang diuji Kondisi Output yang
diharapkan
Output yang
dihasilkan sistem
Status Pengujian
Login
Mengisi form
Username dan Password dengan
benar Mengisi form
Username atau
Password salah
Berhasil Login
Login Gagal
Sukses Login
Login Gagal
Valid
Valid
17
Tambah pasien Form diisi dengan benar
Sukses tambah data
Sukses tambah data Valid
Ubah data pasien Form diisi dengan
benar
Sukses ubah data Sukses ubah data Valid
Hapus data pasien Pilih salah satu pasien Sukses hapus data Sukses hapus data Valid
Load data
pengumuman
Buka halaman
pengumuman
Sukses load data Sukses load data Valid
Tambah data checkup Form diisi dengan
benar
Sukses tambah data Sukses tambah data Valid
Notifikasi pengumuman
Unduh PDF
Form diisi dengan benar
Terhubung internet
Pilih tombol unduh PDF
Sukses share pengumuman
Sukses preview dan mengunduh PDF
Sukses share pengumuman
Sukses preview dan mengunduh PDF
Valid
Valid
Berdasarkan pengujian yang dilakukan pada aplikasi dapat dilihat status
pengujian setiap fungsi valid, maka disimpulkan bahwa aplikasi Posyandu ini
berjalan baik dan sesuai dengan yang diharapkan. Pengujian berikutnya adalah
pengujian beta. Pengujian beta adalah pengujian yang dilakukan oleh orang yang
tidak ikut dalam pembuatan aplikasi atau calon pengguna aplikasi Posyandu.
Pengujian beta dilakukan menggunakan kuesioner, yaitu dengan membagikan
kuesioner kepada sample pengguna. Sample pengguna pada pengujian ini adalah
warga Margosari Salatiga, dimana kader posyandu yang akan mengoperasikan
aplikasi tersebut. Setiap pernyataan terdapat lima jawaban yaitu SS (Sangat Setuju), S
(Setuju), CS (Cukup Setuju), TS (Tidak Setuju), STS (Sangat Tidak Setuju). Tabel 2 Hasil Jawaban Kuesioner
No Pernyataan STS TS CS S SS
1 Fungsi-fungsi dalam aplikasi mudah dipahamai dan
mudah digunakan
0 1 3 17 9
2 Notifikasi membantu didapatkannya pemberitahuan
yang up to date
0 0 6 14 10
3 Grafik tinggi badan, berat badan dapat dilihat jelas dan
data akurat
1 2 8 10 9
4 Apllikasi ini membantu memberikan informasi tentang
Posyandu Margosari
0 1 9 15 5
5 Aplikasi ini mempermudah cara memantau tumbuh
kembang balita
1 1 9 10 9
Setelah semua jawaban diketahui maka yang dilakukan selanjutnya adalah
menghitung presentase jawaban responden yang telah mengisi kuesioner, data
kuesioner didapat dengan proses wawancara dengan warga margosari yang mengikuti
posyandu. Hasil analisis data untuk pernyataan 1 yaitu jika fungsi-fungsi dalam
aplikasi mudah dipahami dan mudah digunakan dapat menunjukkan sebanyak 30%
responden sangat setuju, 56,67% responden setuju, dan 10% responden menjawab
cukup setuju. Jadi dapat disimpulkan bahwa aplikasi ini mudah untuk digunakan.
Hasil analisis data untuk pernyataan 2 yaitu jika notifikasi membantu
mendapatkan pemberitahuan yang up to date menunjukkan sebanyak 33,33%
responden menjawab sangat setuju, 46,67% responden menjawab setuju, dan 20%
responden menjawab cukup setuju. Jadi disimpulkan bahwa notifikasi membantu
dalam hal pemberitahuan.
18
Hasil analisis data untuk pernyataan 3 yaitu jika grafik dapat dilihat dengan
jelas dan data akurat menunjukkan sebanyak 30% responden menjawab sangat setuju,
33,33% responden menjawab setuju, dan 26,67% responden menjawab cukup setuju.
Jadi kesimpulan dari pernyataan 3 bahwa grafik dapat membantu melihat data
tumbuh kembang secara akurat.
Hasil analisis data untuk pernyataan 4 yaitu jika Apllikasi ini membantu
memberikan informasi tentang Posyandu Margosari menunjukkan sebanyak 16,67%
responden menjawab sangat setuju, 50% responden menjawab setuju, dan 30%
responden menjawab cukup setuju. Jadi dismpulkan bahwa aplikasi ini
mempermudah pengguna mendapat informasi tentang Posyandu Margosari.
Hasil analisis data untuk pernyataan 5 yaitu jika aplikasi ini mempermudah
memantau tumbuh kembang balita menunjukkan sebanyak 30% responden menjawab
sangat setuju, 33,33% responden menjawab setuju, dan 30% responden menjawab
cukup setuju. Jadi kesimpulan yang didapatkan dari pernyataan 5 bahwa sistem
informasi ini mempermudah pengguna melakukan pemantauan terhadap tumbuh
kembang balita.
Pengujian manfaat juga dilakukan dengan wawancara kepada kader posyandu.
Berdasarkan wawancara tersebut didapatkan bahwa aplikasi sistem informasi ini
dapat membantu mempermudah memantau tumbuh kembang balita. Selain itu
mempermudah dalam pendataan tumbuh kembang balita di Posyandu Margosari
Salatiga.
5. Simpulan Berdasarkan penelitian yang telah dilakukan, dapat diambil kesimpulan bahwa
Perancangan Sistem Informasi Posyandu Berbasis Web menggunakan Framework
CodeIgniter dan front-end framework Bootstrap menggunakan struktur Model View
Controller (MVC). MVC dapat dengan mudah dibuat menggunakan kelas induk
Controller dan Model yang ada di framework CodeIgniter. Pemanfaatan
pemberitahuan membantu memberikan informasi tentang posyandu margosari dengan
lebih mudah. Grafik yang telah dibuat dapat membantu pemantauan orang tua dalam
melihat tumbuh kembang balitanya dengan lebih mudah. Notifikasi yang ada
mempermudah dalam penyampaian informasi kepada peserta posyandu dan juga
administrator posyandu.
Hasil pengujian menunjukkan bahwa perancangan sistem informasi ini
membantu dalam mempermudah proses pengelolaan dan pemantauan posyandu
margosari, karena disediakan halaman administrator yang dipegang oleh kepala
posyandu margosari untuk menambah, mengubah, dan menghapus data posyandu.
Sistem informasi ini juga dilengkapi dengan Bootstrap CSS Framework, sehingga
dapat diakses dari berbagai ukuran layar device seperti Smartphone maupun Personal
Computer (PC). Hasil pengujian kepada pengguna aplikasi juga menunjukkan jika ini
dapat membantu peserta posyandu dalam melihat data dan juga memantau tumbuh
19
kembang balita mereka tanpa melihat buku tetapi dapat melihat hanya dengan login
di aplikasi posyandu margosari dan juga dapat memiliki data tersebut.
Dari kesimpulan diatas, dapat dikemukakan saran-saran yang berguna untuk
perbaikan dan pengembangan dari sistem informasi posyandu ini. Dalam halaman
administrator, dapat dikembangkan dengan pengembangan mobile dengan
menambahkan fitur FCM (FireBase Cloud Messaging), FCM adalah layanan
notifikasi berbasis mobile dengan FCM maka notifikasi akan keluar dalam
smartphone ketika sudah mengunduh aplikasi posyandu tersebut. Sedangkan dalam
aplikasi secara menyeluruh dapat dikembangkan menjadi sistem informasi berbasis
mobile.
6. Daftar Pustaka [1] Departemen Kesehatan RI, 2006, Buku kader posyandu : dalam usaha
perbaikan gizi, Departemen Kesehatan, Jakarta.
[2] Mahardika, Raditya. 2013. Rancang Bangun Sistem Manajemen Posyandu di
Kecamatan Semarang Selatan,
http://eprints.unisbank.ac.id/1458/1/09.01.53.0178.pdf. Diakses tanggal 12
April 2017.
[3] Nur Rachmat, 2013, Sistem Pengelolaan dan Pemantauan Berbasis Web di
Kota Palembang.
[4] Sutabri, Tata. S.Kom,MM. (2004). Analisa Sistem Informasi. Edisi Pertama.
Yogyakarta:Andi.
[5] Basuki, Awan Pribadi, Proyek Membangun Website Berbasis PHP dengan
Codeigniter, 2014, Yogyakarta: Lokomedia
[6] Marcotte, Ethan. 2011. Responsive Web Design,
http://www.alistapart.com/articles/responsive-web-design/. Diakses tanggal 11
April 2017.
[7] Akhmad. 2016. Pengertian Bootstrap, fungsi dan juga kelebihannya,
http://galeriprogramer.blogspot.co.id/2016/08/pengertian-bootstrap-fungsi-dan-
juga.html. Diakses tanggal 17 Maret 2017
[8] Whitten, Jeffrey, L, etc, 2004, Sistem Analysis and Design Methods, The
McGraw-Hill Companies, Inc.
[9] Pressman, R.S., 2001, Software Engineering : A Practitioner’s
Approach,Amerika Serikat : R.S. Pressman and Associates
[10] https://www.scribd.com/doc/309272871/Pengujian-alpha-beta
[11] Ardhana, Kusuma., “Pemrograman PHP CodeIgniter Black Box”,
Jasakom,2013,Jakarta.