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

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)672013054@student.uksw.edu, 2)ninasetiyawati@staff.uksw.edu

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.