Anda di halaman 1dari 74

i

RANCANG BANGUN APLIKASI MULTIMEDIA


INTERAKTIF BERBASIS WEB UNTUK MENGETAHUI
TUMBUH KEMBANG ANAK BERDASARKAN
PENGELOLAAN POSYANDU

SKRIPSI

















Disusun Oleh :

PRIYANKA DAMAYANTI

09.18.085




PROGRAM STUDI TEKNIK INFORMATIKA S-1
FAKULTAS TEKNOLOGI INDUSTRI
INSTITUT TEKNOLOGI NASIONAL MALANG
2013


ii





iii



RANCANG BANGUN APLIKASI MULTIMEDIA INTERAKTIF
BERBASIS WEB UNTUK MENGETAHUI TUMBUH KEMBANG ANAK
BERDASARKAN PENGELOLAAN POSYANDU


Priyanka Damayanti ( 09.18.085)
Teknik Informatika ITN Malang , inkaandalu@gmail.com

Abstrak

Keberadaan informasi mengenai pertumbuhan dan faktor yang
mempengaruhi pertumbuhan anak balita sangatlah kurang. Sehingga jadwal
imunisasi serta pengukuran berat dan tinggi badan balita yang biasanya
dilakukan dalam rentang waktu satu bulan sekali dengan cara datang langsung
ke posyandu terdekat pun sering terlewat oleh para orang tua, dikarenakan
sulitnya menyisihkan waktu untuk melakukan hal tersebut. Dengan kendala waktu
yang tersebut melalui aplikasi berbasis web ini maka orang tua akan lebih
mengetahui parameter pertumbuhan dan perkembangan anak anak dan bisa di
akses dimanapun
Website ini menggunakan beberapa bahasa pemprogaman antara lain
HTML , PHP dan Action Script 2.0 . Website ini dapat diakses pada browser yang
telah di uji kelayakan dengan operating system apapun.
Setelah dilakukan proses pengujian website kepada ibu muda yang
berjumlah 10 orang dengan mengisi kuisioner dan berdasarkan pertanyaan-
pertanyaan pokok yang telah diberikan maka dapat diambil suatu kesimpulan
bahwa website ini sangat berguna untuk memantau tumbuh kembang anak serta
pengenalan media belajar interaktif yang dianggap positif untuk anak anak .

Kata Kunci : Pertumbuhan , media interaktif , puskesmas ,multimedia, kesehatan
, php , action script 2.0





iv



KATA PENGANTAR
Puji dan Syukur penyusun panjatkan kehadirat Tuhan Yang Maha Esa,
karena telah memberikan rahmat-Nya sehingga penyusun dapat menyelesaikan
skripsi dengan judul RANCANG BANGUN APLIKASI MULTIMEDIA
INTERAKTIF BERBASIS WEB UNTUK MENGETAHUI TUMBUH
KEMBANG ANAK BERDASARKAN PENGELOLAAN POSYANDU sesuai
dengan waktu yang ditentukan.
Penyusunan skripsi ini merupakan salah satu persyaratan untuk
menyelesaikan program pendidikan Strata Satu (S-1) Teknik Informatika, Fakultas
Teknologi Industri di Institut Teknologi Nasional Malang.
Pada kesempatan ini penyusun mengucapkan terima kasih yang sebesar-
besarnya kepada:
1. Allah SWT yang selalu menguatkan dan meridhoi.
2. Bapak Fadeli dan Ibu Siti Fatayati selaku orang tua yang selalu
mendukung dalam hal material dan immaterial .
3. Ir. Soeparno, MT selaku Rektor ITN Malang.
4. Ir. Anang Subardi, MT selaku Dekan Fakultas Teknologi Industri
Institut Teknologi Nasional Malang.
5. Joseph Dedy Irawan, ST, MT selaku Ketua Jurusan Teknik
Informatika Institut Teknologi Nasional Malang.
6. Ir. H Sidik Noertjahjono MT selaku dosen pembimbing I, yang selalu
memberikan masukan penting dalam penyelesaian skripsi.
7. Ali Mahmudi Beng, P.hD. selaku dosen pembimbing II, yang selalu
sabar dalam bimbingan skripsi.
8. Indah dan Indri selaku saudara yang selalu memberi motivasi dalam
meraih cita cita.
9. Tarik Aji Nurhidayat yang senantiasa mendukung dalam tiap proses
pengerjaan skripsi.
10. Semua sahabat seperjuangan yang telah membantu penulisan skripsi
ini dengan masukan masukan yang positif.
11. Semua pihak yang telah membantu terselesaikannya skripsi ini.


v



Penyusun menyadari bahwa skripsi masih jauh dari sempurna, oleh karena
itu penyusun mengharapkan kritik dan saran dari pembaca. Semoga skripsi ini
bisa bermanfaat bagi para pembaca sekalian.


Malang, 13 September 2013


Penyusun















vi



DAFTAR ISI

Halaman Judul ......................................................................................................... i
Halaman Pengesahan ............................................................................................. ii
Abstrak ................................................................................................................... iii
KATA PENGANTAR ........................................................................................... iv
DAFTAR ISI .......................................................................................................... vi
DAFTAR GAMBAR ............................................................................................. ix
DAFTAR TABEL .................................................................................................. xi
BAB I PENDAHULUAN ...................................................................................... 1
1.1 Latar Belakang ............................................................................................. 1
1.2. Rumusan Masalah ........................................................................................ 2
1.3. Tujuan ........................................................................................................... 2
1.4. Batasan Masalah ........................................................................................... 3
1.5. Metodologi Pemecahan Masalah .................................................................. 3
1.6. Sistematika Penulisan ................................................................................... 4
BAB II LANDASAN TEORI ................................................................................. 5
2.1 Action Script .................................................................................................. 5
2.2. Web Based Application ................................................................................ 6
2.3. Multimedia ................................................................................................... 7
2.3.1. Jenis Multimedia .................................................................................... 7
2.3.2. Elemen Penunjang Multimedia .............................................................. 8
2.3.3. Konsep Multimedia.............................................................................. 13
2.3.4. Struktur Navigasi Multimedia ............................................................. 15
2.4. Aplikasi Pembelajaran Multimedia ............................................................ 16
2.5. Pengembangan Aplikasi Multimedia ......................................................... 17
2.5.1. Desain Perancangan ............................................................................. 18
2.5.2. Implementasi ........................................................................................ 18
2.5.3. Evaluasi ................................................................................................ 18
2.6. Diagram Alir ............................................................................................... 18
2.7. Perangkat Lunak Pendukung Aplikasi ....................................................... 20
vii



2.7.1. Adobe Dreamweaver ............................................................................ 20
2.7.2. Adobe Flash ......................................................................................... 21
2.8 Kognitif ....................................................................................................... 23
2.8.1 Perkembangan Kognitif ........................................................................ 23
2.8.2 Tujuan pengembangan kemampuan kognitif anak usia 4-5 tahun. ...... 24
BAB III PERANCANGAN APLIKASI .............................................................. 25
3.1. Identifikasi Masalah ................................................................................... 25
3.1.1. Identifikasi Kebutuhan ......................................................................... 25
3.1.2. Kebutuhan Perangkat ........................................................................... 26
3.2. Perancangan ................................................................................................ 27
3.2.1. Perancangan Website Informasi Tumbuh Kembang Anak.................. 27
3.2.2. Struktur Navigasi Tutorial ................................................................... 27
3.2.3. Perancangan Diagram Alir Aplikasi .................................................... 29
3.2.4 Perancangan Database .......................................................................... 32
3.2.4. Perancangan Layout Tutorial ............................................................... 34
BAB IV IMPLEMENTASI DAN PENGUJIAN PROGRAM ............................ 42
4.1 Implementasi Halaman Index ...................................................................... 42
4.2 Implementasi Halaman Cek Status Gizi ...................................................... 43
4.3 Implementasi Menu Cek Berat Ideal ........................................................... 45
4.4 Implementasi Menu Pembelajaran Anak .................................................... 46
4.4.1 Sub Menu Pembelajaran Batita............................................................. 47
4.4.2 Sub Menu Pembelajaran Balita............................................................ 49
4.5 Implementasi Menu Resep .......................................................................... 50
4.6 Implementasi Menu Info Tumbuh Kembang Anak..................................... 51
4.7 Implementasi Menu Lokasi Puskesmas ...................................................... 52
4.8 Pengujian ..................................................................................................... 54
4.8.1 Pengujian Fungsional Website.............................................................. 54
4.8.2 Pengujian Perhitungan .......................................................................... 54
4.9 Hasil Analisa Data ....................................................................................... 58
BAB V ................................................................................................................... 60
PENUTUP ............................................................................................................. 60
5.1 Kesimpulan .................................................................................................. 60
viii



5.2 Saran ............................................................................................................ 60
Daftar Pustaka ...................................................................................................... 62
Lampiran .............................................................................................................. 63
ix



DAFTAR GAMBAR

Gambar 2-1. Elemen Penunjang Multimedia .......................................................... 8
Gambar 2-2. Perbedaan Gambar Vektor dan Bitmap............................................ 11
Gambar 2-3. Struktur Linier .................................................................................. 15
Gambar 2-4. Struktur Menu .................................................................................. 15
Gambar 2-5. Struktur Hirarki ................................................................................ 16
Gambar 2-6. Struktur Kombinasi .......................................................................... 16
Gambar 2-7. Kerucut Penyerapan Informasi ........................................................ 17
Gambar 2-8. Tampilan Dreamweaver................................................................... 21
Gambar 2-9. Tampilan Adobe Flash ..................................................................... 22
Gambar 3-1. Diagram Alir Proses Pembuatan Tutorial ........................................ 27
Gambar 3-2. Struktur Navigasi Aplikasi ............................................................... 29
Gambar 3-3. Diagram Alir Aplikasi...................................................................... 31
Gambar 3-4. Data flow diagram database website ............................................... 33
Gambar 3-5. Entity relationship diagram database website ................................. 33
Gambar 3-6.Rancangan Menu Utama ................................................................... 34
Gambar 3-7 Struktur Halaman Status Gizi ........................................................... 35
Gambar 3-8. Struktur Halaman Bantuan ............................................................... 36
Gambar 3-9. Struktur Halaman media pembelajaran anak ................................... 37
Gambar 3-10. Struktur Halaman Bantuan ............................................................. 38
Gambar 3-11. Struktur Halaman Panduan Menu Makanan Anak ........................ 39
Gambar 3-12. Struktur Halaman Informasi Tumbuh Kembang Anak .................. 40
Gambar 3-13. Struktur Halaman Lokasi Puskesmas Kota Malang....................... 41
Gambar 4-1 Tampilan halaman index ................................................................... 42
Gambar 4-2 Tampilan halaman cek status gizi anak ............................................ 44
Gambar 4-3 Tampilan pengisian field ................................................................... 44
Gambar 4-4 Tampilan hasil perhitungan............................................................... 45
Gambar 4-5 Tampilan awal cek berat ideal anak .................................................. 45
Gambar 4-6 Tampilan input data ......................................................................... 46
Gambar 4-7 Tampilan hasil hitung ....................................................................... 46
x



Gambar 4-8 Tampilan menu pembelajaran anak .................................................. 47
Gambar 4-9 Tampilan halaman sub menu media belajar anak usia batita ............ 48
Gambar 4-10 Tampilan media pembelajaran usia batita....................................... 48
Gambar 4-11 Tampilan media pembelajaran usia batita....................................... 49
Gambar 4-12 Tampilan media pembelajaran usia balita....................................... 49
Gambar 4-13 Tampilan soal media pembelajaran usia batita ............................... 50
Gambar 4-14 Tampilan menu resep ...................................................................... 50
Gambar 4-15 Tampilan awal menu info tumbuh kembang anak .......................... 51
Gambar 4-16 Tampilan artikel dan penjelasanya.................................................. 52
Gambar 4-17 Tampilan menu awal lokasi puskesmas .......................................... 52
Gambar 4-18 Tampilan lokasi puskesmas pada kecamatan blimbing .................. 53
Gambar 4-19 Tampilan info puskesmas ............................................................... 53
Gambar 4-20 Hasil perhitungan pada website ...................................................... 55
Gambar 4-21 Tabel perbandingan status gizi........................................................ 55
Gambar 4-22 Hasil perhitungan pada halaman berat ideal ( usia 1 sampai 6 bulan )
............................................................................................................................... 55
Gambar 4-23 Hasil perhitungan manual menggunakan Microsoft Office Excel .. 56
Gambar 4-24 Hasil perhitungan pada halaman berat ideal ( usia 7 sampai 12 bulan
) ............................................................................................................................. 56
Gambar 4-25 Hasil perhitungan manual menggunakan Microsoft Office Excel .. 57
Gambar 4-26 Hasil perhitungan manual menggunakan Microsoft Office Excel .. 57
Gambar 4-27 Perhitungan berat ideal anak pada usia 1 5 Tahun ...................... 58



xi



DAFTAR TABEL

Tabel 2-1. Simbol Diagram Alir ........................................................................... 19
Tabel 2-2. Operasi Dasar Adobe Flash ................................................................. 22
Tabel 4-1 Hasil pengujian pada browser .............................................................. 54
Tabel 4-2 Hasil kuesioner ..................................................................................... 58

1




BAB I
PENDAHULUAN
1.1 Latar Belakang
Tak dapat dipungkiri jika kemajuan teknologi masa kini berkembang sangat
pesat. Hal ini dapat dibuktikan dengan banyaknya inovasi-inovasi yang telah
dibuat di dunia ini. Dari hingga yang sederhana, hingga yang menghebohkan
dunia. Kemajuan teknologi memang sangat penting untuk kehidupan manusia
jaman sekarang. Karena teknologi adalah salah satu penunjang kemajuan
manusia. Di banyak belahan masyarakat, teknologi telah membantu memperbaiki
ekonomi, pangan, komputer, dan masih banyak lagi.
Seiring dengan berkembangnya teknologi informasi menyebabkan semakin
banyak orang mengerti akan pentingnya fungsi komputer dalam membantu
pekerjaan mereka. Saat ini perkembangan komputer telah membawa perubahan
besar dalam berbagai bidang diantaranya bidang Politik, Ilmu Pengetahuan,
Ekonomi, Sosial, Budaya, dan Kesehatan. Perkembangan teknologi informasi,
selain perkembangan aplikasi desktop pada komputer juga meliputi
perkembangan aplikasi mobile. Seperti yang kita ketahui saat ini, kebutuhan
manusia tidak pernah terbatas seperti kebutuhan komunikasi salah satunya.
Sehingga, handphone yang kita kenal sebagai alat telpon (komunikasi) genggam
semakin berkembang pesat dengan aplikasi-aplikasi terbaru dan bermanfaat untuk
kebutuhan manusia di saat ini.
Aplikasi berbasis multimedia interaktif sangatlah banyak ragam serta manfaat
luar biasa untuk kebutuhan manusia. Multimedia adalah media penyampaian
dengan mengunakan banyak media seperti teks, gambar, animasi, video, suara.
Interaktif adalah interaksi antara multimedia itu sendiri dengan pengguna
(user). Sebuah multimedia interaktif juga bisa digunakan sebagai media
penyampaian pertumbuhan anak. Jadi Multimedia Interaktif adalah media yang
terdiri dari banyak komponen/media yang saling terintegrasi yang mampu
untuk berinteraksi dengan penggunanya.

2



Pertumbuhan adalah bertambahnya ukuran dan jumlah sel serta jaringan
interselular, sehingga bertambahnya ukuran fisik dan struktur tubuh sebagian
atau keseluruhan, maka dapat diukur dengan satuan panjang dan berat. Anak
yang sehat akan menunjukkan tumbuh kembang yang optimal. Pertumbuhan
anak bisa dilihat dan diukur dari beberapa parameter pertumbuhan. Sekarang ini
keberadaan informasi mengenai pertumbuhan dan faktor yang mempengaruhi
pertumbuhan anak balita sangatlah kurang. Sehingga jadwal imunisasi serta
pengukuran berat dan tinggi badan balita yang biasanya dilakukan dalam rentang
waktu satu bulan sekali dengan cara datang langsung ke posyandu terdekat pun
sering terlewat oleh para orang tua, dikarenakan sulitnya menyisihkan waktu
untuk melakukan hal tersebut.
Dengan kendala waktu yang tersebut melalui aplikasi berbasis web ini
maka orang tua akan lebih mengetahui parameter pertumbuhan dan perkembangan
anak anak dan bisa di akses dimanapun
1.2. Rumusan Masalah
Adapun rumusan masalah yang akan dibahas adalah Bagaimana membangun
aplikasi untuk membantu orang tua memantau tumbuh kembang anak dan melatih
pengembangan kognitif anak.
1.3. Tujuan
Tujuan dari pembuatan aplikasi ini adalah untuk merancang dan membuat
sebuah aplikasi berbasis web dan media pembelajaran interaktif menggunakan
bahasa pemprogram PHP dan Action Script 2.0 dan membantu orang tua dalam
memantau pertumbuhan anak serta memberikan media belajar interaktif bagi anak
usia balita dan batita.








3



1.4. Batasan Masalah
Batasan masalah pembahasan yang diambil agar sesuai dengan tujuan dan
tidak terjadi penyimpangan maksud dan tujuan utama, maka ditentukan ruang
lingkup pembahasan sebagai berikut:
a) Aplikasi berisi penghitungan tumbuh kembang anak dan media
pembelajaran interaktif melatih pengembangan kemampuan kognitif
b) Menggunakan bahasa pemrograman Action script 2.0 dalam flash.
c) Menggunakan bahasa pemprogaman PHP dalam aplikasi web
d) Aplikasi web di gunakan oleh orang tua.
e) Aplikasi multimedia interaktif digunakan oleh batita dan balita dengan di
dampingi oleh orang tua.

1.5. Metodologi Pemecahan Masalah
Metode yang digunakan dalam pembahasan skripsi ini adalah :
a) Studi Literatur
Mencari referensi-referensi yang berhubungan dengan perencanaan dan
pembuatan program yang akan dibuat.
b) Perancangan Program
Sebelum melaksanakan pembuatan program, dilakukan perancangan
terhadap program yang meliputi merancang keseluruhan program.
c) Pembuatan Program
Pada tahap ini realisasi program yang dibuat, dilakukan perakitan sistem
terhadap seluruh hasil rancangan yang telah dibuat.
d) Pengujian Program
Untuk mengetahui cara kerja program, maka dilakukan pengujian secara
keseluruhan.






4



1.6. Sistematika Penulisan
Dalam penyusunan skripsi ini agar lebih mudah dipahami maka dibuatlah
suatu sistematika penulisan sebagai berikut:
A. BAGIAN PEMBUKA
1. Halaman Sampul
2. Halaman Judul
3. Halaman Pengesahan
4. Abstraksi
5. Kata Pengantar
6. Daftar Isi
7. Daftar Tabel, Gambar, Grafik,
B. BAGIAN ISI
BAB I : PENDAHULUAN
Berisi latar belakang, perumusan masalah, batasan masalah, tujuan dan
metodologi penelitian.
BAB II :LANDASAN TEORI
Berisi teori-teori yang menunjang dalam proses pembuatan tugas akhir ini.
BAB III : PERANCANGAN APLIKASI
Berisi tentang desain dan perancangan sistem aplikasi.
BAB IV : IMPLEMENTASI DAN PENGUJIAN
Berisi tentang implementasi dan uji coba dari aplikasi.
BAB V : PENUTUP
Berisi tentang kesimpulan dan saran-saran yang digunakan untuk
pengembangan program selanjutnya.
C. BAGIAN PENUTUP
1. Daftar Pustaka
2. Lampiran
3. Biodata Peneliti




5



BAB II
LANDASAN TEORI

2.1 Action Script
Action Script adalah bahasa berorientasi objek awalnya dikembangkan
oleh Macromedia Inc (sekarang dimiliki oleh Adobe Systems ). Ini adalah
dialek ECMA Script (berarti itu adalah superset dari sintaks dan semantik
bahasa lebih luas dikenal sebagai JavaScript ), dan digunakan terutama untuk
pengembangan situs web dan perangkat lunak menargetkan Adobe Flash
Player platform, digunakan pada halaman Web di bentuk file tertanam
SWF. Bahasa itu sendiri adalah open-source dalam spesifikasi yang
ditawarkan secara gratis dan keduanya compiler open source (sebagai bagian
dari Apache Flex ) dan open source mesin virtual ( Mozilla Tamarin ) yang
tersedia.
Action Script pada awalnya dirancang untuk mengendalikan animasi
vektor 2D sederhana yang dibuat di Adobe Flash (sebelumnya Macromedia
Flash). Awalnya difokuskan pada animasi, versi awal konten Flash
menawarkan fitur interaktivitas sedikit dan sehingga memiliki kemampuan
scripting sangat terbatas. Kemudian versi menambahkan fungsionalitas yang
memungkinkan untuk penciptaan berbasis web game dan aplikasi Internet
yang kaya dengan streaming media (seperti video dan audio). Hari ini, Action
Script cocok untuk digunakan dalam beberapa aplikasi database, dan robotika
dasar, seperti dengan Membuat Kit Pengawas .
Flash MX 2004 diperkenalkan Action Script 2.0, sebuah bahasa
scripting yang lebih cocok untuk pengembangan aplikasi Flash. Hal ini sering
mungkin untuk menghemat waktu dengan scripting sesuatu daripada
menghidupkan itu, yang biasanya juga memungkinkan tingkat yang lebih
tinggi dari fleksibilitas saat mengedit.
Sejak kedatangan Flash Player 9 alpha (tahun 2006) versi terbaru dari
Action Script telah dirilis, Action Script 3.0. Action Script 3.0
adalah berorientasi objek bahasa pemrograman yang memungkinkan kontrol
yang jauh lebih banyak dan usabilitas kode ketika membangun aplikasi Flash
6



yang kompleks. Versi bahasa dimaksudkan untuk dikompilasi dan dijalankan
pada versi Action Script Virtual Machine yang telah sendiri sepenuhnya
ditulis ulang dari bawah ke atas (dijuluki AVM2). Karena itu, kode yang
ditulis dalam Action Script 3.0 adalah umumnya ditargetkan untuk Flash
Player 9 dan lebih tinggi dan tidak akan bekerja di versi sebelumnya. Pada
saat yang sama, Action Script 3.0 mengeksekusi hingga 10 kali lebih cepat
daripada kode Action Script warisan karena Just-In-Time compiler tambahan.
Perpustakaan Flash dapat digunakan dengan kemampuan XML
browser untuk membuat konten yang kaya dalam browser. Teknologi ini
dikenal sebagai Asynchronous Flash dan XML, mirip AJAX . Adobe
menawarkan nya Flex lini produk untuk memenuhi permintaan untuk Rich
Internet Applications dibangun pada runtime Flash, dengan perilaku dan
pemrograman dilakukan dalam Action Script. Action Script 3.0 membentuk
dasar dari Flex 2 API.
2.2. Web Based Application
Web Based Application adalah sebuah aplikasi yang dapat diakses
melalui internet atau intranet, dan pada sekarang ini ternyata lebih banyak
dan lebih luas dalam pemakaiannya. Banyak dari perusahaan-perusahaan
berkembang yang menggunakan Web Based Application dalam
merencanakan sumber daya mereka dan untuk mengelola perusahaan
mereka. Web Based Application dapat digunakan untuk berbagai macam
tujuan yang berbeda. Sebagai contoh, Web Based Application dapat
digunakan untuk membuat invoice dan memberikan cara yang mudah dalam
penyimpanan data di database. Aplikasi ini juga dapat dipergunakan untuk
mengatur persediaan; karena fitur tersebut sangat berguna khususnya bagi
mereka yang berbisnis ritel. Bukan hanya itu, Web Based Application juga
dapat bekerja memonitoring sistem dalam hal tampilan. Bahkan jumlah dari
Web Based Application sudah tak terhitung lagi, yakni dapat di desain dan
disesuaikan untuk berbagai jenis industri, langitlah yang menjadi
batasannya.
Selain fungsi-fungsi tersebut, salah satu keunggulan kompetitif dari
Web Based Application adalah bahwa aplikasi tersebut 'ringan' dan dapat
7



diakses dengan cepat melalui browser dan koneksi internet atau intranet ke
server. Ini berarti bahwa pengguna dapat mengakses data atau informasi
perusahaan mereka melalui laptop, smartphone, atau bahkan komputer PC
di rumah user dengan mudah, tidak seperti aplikasi-aplikasi desktop di mana
pengguna harus menginstal perangkat lunak atau aplikasi yang diperlukan
hanya untuk mengakses data / informasi.
2.3. Multimedia
Multimedia berasal dari kata multi dan media. Multi dapat berarti banyak,
sedangkan media dapat berarti sebagai tempat, sarana atau alat yang digunakan
untuk menyimpan suatu informasi. Multimedia adalah pemanfaatan perangkat
lunak pada komputer untuk membuat dan mengkombinasikan teks, bunyi, video,
gambar dan animasi dengan menggunakan beberapa link (penghubung) dan tool
(alat) yang memungkinkan bagi pengguna dapat melakukan navigasi, interaksi,
berkreasi dan berkomunikasi.
Penyajian multimedia dengan mengkombinasikan beberapa atau seluruh
elemen multimedia tersebut, akan menjadikan sebuah informasi dalam bentuk
multimedia yang dapat diterima dengan baik oleh indera pendengaran maupun
indera penglihatan dan lebih mendekati bentuk asli dalam dunia sebenarnya.

2.3.1. Jenis Multimedia
Dalam pengelompokannya, multimedia terbagi menjadi beberapa macam
jenis. Penggunaan jenis multimedia tersebut, antara lain :
1. Multimedia Linier
Adalah suatu multimedia yang tidak dilengkapi oleh pengontrol apapun,
multimedia ini berjalan secara sekuensial (berurutan), contohnya adalah televisi
dan film
2. Multimedia Interaktif
Sudah dilengkapi oleh pengontrol yang dapat dioperasikan oleh
pengguna, sehingga pengguna dapat memilih apa yang dikehendaki untuk proses
interaksi. Contohnya adalah permainan dan pembelajaran interaktif.


8



2.3.2. Elemen Penunjang Multimedia
Multimedia adalah suatu istilah generik bagi media yang terdiri dari
berbagai macam media, baik untuk tujuan pembelajaran maupun bukan. Elemen
penunjang pada multimedia meliputi teks, bunyi, video, gambar, animasi dan
navigasi. Elemen penunjang multimedia dapat dilihat pada gambar 2-1.



Gambar 2-1. Elemen Penunjang Multimedia
2.3.2.1Teks
Teks adalah media paling dasar yang bersifat sederhana dan efektif
dalam proses penyampaian suatu informasi, media dengan menggunakan teks
membutuhkan tempat penyimpanan data yang paling kecil dibandingkan dengan
menggunakan media lainnya. Secara umum,teks terbagi menjadi beberapa
macam, antara lain :
a. Teks Cetak
Merupakan media yang tercetak di atas kertas.
b. Teks Hasil Scan
Merupakan media yang tercetak di atas kertas dan dikonversikan
dengan menggunakan komputer dalam bentuk gambar digital melalui mesin
scanner.
c. Teks Digital
Media yang dibuat dengan menggunakan perangkat lunak pada
komputer untuk membuat dan melakukan pengetikan teks tersebut.

9




d. Hyper Text
Merupakan media penghubung pada sebuah teks yang pada umumnya
dikombinasikan dengan tombol untuk dapat terhubung dengan informasi
lainnya.
2.3.2.2 Bunyi
Bunyi adalah segala sesuatu yang dapat didengar oleh telinga normal
pada manusia dalam rentang frekuensi antara 20 sampai 20.000 Hertz. Bunyi
dapat berupa kata-kata atau ucapan, efek suara, musik dan lain sebagainya.
2.3.2.3 Video
Bentuk rekaman gambar hidup atau gambar bergerak yang saling
berurutan. Dalam fungsinya, terdapat dua macam jenis video, yaitu video analog
dan video digital. Video analog dibentuk oleh deretan sinyal elektrik (gelombang
analog) yang direkam dengan menggunakan kamera dan dipancarluaskan
melalui gelombang di udara. Sedangkan video digital dibentuk oleh sederetan
sinyal digital yang berbentuk bilangan biner (0 dan 1).
Pada video digital terdapat tiga komponen utama yang terbentuk, yaitu
frame rate, frame size dan datatype. Pada frame rate menggambarkan berapa
kali bingkai gambar yang dapat dimunculkan pada setiap detiknya, sementara
frame size merupakan ukuran fisik yang sebenarnya dari setiap bingkai gambar
yang telah disusun dan datatype menentukan seberapa banyak perbedaan warna
yang dapat dimunculkan pada saat bersamaan.
Dalam penggunaannya, video dapat dimanfaatkan untuk memaparkan
keadaan nyata dari suatu proses, fenomena atau kejadian yang dapat terintegrasi
dengan media lain pada teks atau gambar.
2.3.2.4 Gambar
Gambar merupakan elemen yang dapat membantu menyampaikan suatu
informasi dengan lebih mudah, menarik perhatian dan mengurangi rasa
kebosanan. Dalam multimedia, gambar dapat diolah menjadi suatu proses
penyampaian informasi dengan cara memahaminya, gambar juga dapat menjadi
suatu penghubung kepada informasi yang lainnya. Ketika pengguna melihat
sebuah objek gambar, penggunaakan mendapatkan informasi dalam jumlah yang
10



lebih besar jika dibandingkan dengan hanya membacanya, misalnya pada sebuah
karya seni lukis, seni grafis dan karya fotografi. Secara umum terdapat beberapa
jenis macam gambar, antara lain :
1. Gambar Vektor
Merupakan objek gambar yang terbentuk dari sekumpulan kombinasi
node (titik) dan line (garis) yang diperoleh dari suatu rumusan matematika,
aljabar linier maupun geometri. Vektor menggambarkan sebuah objek
gambar yang disesuaikan dengan perhitungan geometri (posisi sumbu x
dan y pada koordinat tertentu).
Sebagai contoh, sebuah objek gambar vektor yang dibentuk dengan
proses perhitungan untuk membentuk suatu kurva, menentukan posisi
dengan diisi kombinasi warna tertentu. Gambar tersebut secara fleksibel
dapat diubah ukurannya, dipindah atau bahkan diubah warnanya tanpa
merusak kualitas gambar itu sendiri. Faktor yang menyebabkan kualitas
gambar vektor tetap terjaga adalah karena gambar vektor tidak tergantung
pada resolusi.
Gambar vektor lebih cocok untuk produksi gambar-gambar yang
memiliki tepi tajam. Gambar vektor ini dapat dicetak dengan resolusi
yangberbeda-beda tanpa kehilangan detail dari gambarnya, selain itu
gambar vektor mempunyai beberapa kelebihan, antara lain :
a. Gambar vektor banyak digunakan untuk membuat desain yang
membutuhkan soliditas dari bentuk, warnadan fleksibilitas ukuran
yang tergantung dari kreatifitas desainer untuk mampu merancang
atau membuat suatu objek.
b. Dapat lebih mengeksplorasi kemampuan dalam membuat bentuk,
memilih warna, mengatur layout (tata letak) dan lain sebagainya.
c. Memungkinkan membuat karakter, jati diridari desainer yang tidak
dapat ditemui pada hasil karya orang lain, dikarenakan sebuah desain
vektor merupakan sebuah objek ilustrasi, imajinasi dan teknik dari
desainer itu sendiri, sehingga kecil kemungkinannya untuk dapat
menemukan ilustrasi, imajinasi dan teknik yang bisa benar-benar
sama.
11




2. Gambar Bitmap
Gambar bitmap merupakan rekontruksi dari gambar asli yang
tersimpan sebagai serangkaian pixel (titik-titik) yang memenuhi bidang
pixel pada layar komputer. Kelebihannya dalam menggunakan gambar
bitmap antara lain :
1. Proses pengolahan yang minimal.
2. Lebih cepat untuk ditampilkan, dikarenakan gambar bitmap dapat
dikirimkan secara langsung dari data ke layar monitor.
Kelemahan dari gambar bitmap adalah :
1. Desainer tidak dapat memperbesar atau memperkecil resolusi
gambar bitmap, dikarenakan resolusi gambar bitmap tergantung dari
gambar aslinya.
2. Kapasitas data bitmap relatif masih besar.
3. Apabila gambar bitmap dikompresi, maka akan berdampak pada
penurunan kualitas gambar dikarenakan pada layar monitor
menampilkan gambar dengan cara menggunakan jaringan pada node
(titik), maka gambar bitmap dan gambar vektor akan diperlihatkan
sebagai pixel. Begitu juga ketika pengguna hendak menampilkan
gambar vektor, dimana desainer harus melakukan ekspor dari gambar
vektor ke dalam format data *.jpg, *.jpeg, *.gif, *.png dan lainnya. Sifat
gambar vektor yang telah diekspor tersebut, secara otomatis berubah
menjadi tipe gambar bitmap, meskipun gambar tersebut dibuat dengan
menggunakan perangkat lunak gambar vektor. Perbedaan gambar
vektor dan gambar bitmap dapat dilihat pada gambar 2-2.


Gambar 2-2. Perbedaan Gambar Vektor dan Bitmap

12




2.3.2.5 Animasi
Animasi adalah suatu gerak visual tiruan terhadap perubahan bentuk
padasuatu objek yang tercipta melalui imajinasi, khayalan, keadaan nyata atau
lingkungan. Pada pengelompokannya, animasi terbagi menjadi dua jenis, yaitu
animasi dua dimensi dan tiga dimensi, penggunaan jenis pada animasi
tergantung dari kebutuhan. Bedasarkan teknik pembuatan animasi dibedakan
menjadi beberapa jenis, meliputi :
1. Cell Animation
Merupakan teknik dasar dalam pembuatan animasi kartun, yang
umumnya banyak digunakan pada awal saat pembuatan animasi kartun.
2. Frame Animation
Merupakan teknik animasi yang sederhana. Dimana animasi tersebut
dibangun pada setiap frame yang saling berkaitan dengan frame lainnya.
3. Sprite Animation
Sprite animation merupakan sebuah animasi yang bergerak secara
mandiri, sedangkan latar pada belakang animasi tersebut diam.
4. Path Animation
Path animation (animasi lintasan) adalah animasi yang bergerak
mengikuti garis pada suatu lintasan yang dibuat.
5. Spline Animation
Spline animation merupakan sebuah animasi bergerak yang mengikuti
garis lintasan dengan membentuk suatu kurva, dimana kurva tersebut didapat
dari hasil perhitungan secara sistematis yang dapat menghasilkan gerak
animasi lebih halus.
6. Vector Animation
Sebuah animasi yang dikendalikan oleh vektor. Animasi vektor
memberikan hasil yang bersih dan halus, dikarenakan gambar yang
ditampilkan dan ukuran animasi menggunakan nilai matematika.
7. Character Animation
Character animation (animasi karakter) umumnya digunakan dalam
film kartun berbasis dua dimensi maupun tiga dimensi. Dimana proses
13



pembuatan tiga dimensi dilakukan pada tiga sudut pandang, yaitu pada sudut
x, y dan z, sedangkan pada dua dimensi pada sudut x dan y.
8. Morphing Animation
Adalah animasi yang mengubah satu bentuk menjadi bentuk yang lain
dan memperlihatkan serangkaian frame yang menciptakan suatu gerak yang
halus.
9. Digital Animation
Digital animation adalah teknik penggabungan gambar dimana pada
setiap gambar terdapat gerakan yang berbeda.
2.3.2.6 Navigasi
Navigasi merupakan sebuah kontrol untuk mengatur, memfungsikan
suatu perintah, maupun informasi yang dapat berupa tombol teks atau simbol.

2.3.3. Konsep Multimedia
Dalam membangun sebuah desain multimedia yang terdiri dari beberapa
atau seluruh elemen penunjang multimedia yang saling terintegrasi dan
berinteraksi antara satu elemen dengan elemen lain, terdapat beberapa konsep
yang harus diperhatikan dalam proses membangun desain multimedia, konsep
tersebut antara lain :
1. Komunikatif
Dalam membangun sebuah desain multimedia, peran komunikatif
mempunyai pengaruh besar dalam tujuan membangun desain multimedia itu
sendiri. Komunikatif dapat diartikan sebagai hubungan antara bahasa
penyampaian informasi dengan pengguna yang mengakses informasi tersebut.
Contohnya adalah perbedaan informasi yang disampaikan antara desain
multimedia pembelajaran dengan desain multimedia untuk surat kabar, sehingga
peran komunikatif diperlukan agar informasi yang disampaikan dapat mudah
dimengerti, dipahami dan diterima dengan baik.
2. Estetis
Pada desain multimedia perlu memperhatikan estetis multimedia, estetis
diperlukan agar desain multimedia tersebut dapat mempunyai nilai ketertarikan
14



oleh pengguna serta dapat meningkatkan daya pakai pengguna, beberapa
pendukung peran estetis dalam desain multimedia meliputi seni dan keindahan.
3. Ekonomis
Desain multimedia juga harus memperhatikan faktor ekonomis, artinya
ukuran data dan jumlah data dari desain multimedia yang disimpan. Apabila data
hasil dari desain multimedia tersebut mempunyai kapasitas yang besar atau
jumlah data yang banyak, maka hal tersebut akan memperlambat pengguna
dalam melakukan interaksi multimedia dan mungkin membingungkan pengguna
yang masih awam, sehingga apabila hasil dari desain multimedia tersebut tidak
ekonomis, kemungkinan besar akan ditinggalkan oleh penggunanya.
Agar mendapatkan desain multimedia yang komunikatif, estetis dan
ekonomis, memerlukan beberapa pedoman untuk membuat tata letak dari teks,
bunyi, video, gambar dan animasi yang dikontrol dengan navigasi. Pedoman yang
diperlukan dalam desain multimedia antara lain :
1. Kesatuan
Elemen multimedia yang digunakan, dikombinasikan dengan tata letak,
fungsi dan halaman yang ditempatkan sedemikain rupa, sehingga elemen
tersebut menjadi suatu kesatuan informasi pada satu halaman informasi dengan
halaman informasi yang lain.
2. Keseimbangan
Elemen multimedia yang digunakan, dikombinasikan dengan tata letak,
fungsi dan halaman yang ditempatkan sedemikain rupa, sehingga elemen
tersebut menjadi informasi yang seimbang pada satu halaman informasi dengan
halaman yang lainnya.
3. Kontras
Kontras diperlukan untuk menonjolkan bagian yang dianggap lebih
penting dari bagian lainnya. Kontras dapat dinyatakan dengan membedakan
ukuran, teks, warna, karakter serta desain pada tata letak.
4. Kontinyuitas
Informasi yang disampaikan dapat dengan mudah digunakan atau
dimengerti oleh pengguna bila mempunyai aliran yang baik, jika mempunyai
aliran yang baik, maka aliran informasi dapat dikatakan kontinyu dan harmonis
15



bila pada tampilannyasalingberkesinambungan antara bagian satu ke bagian
lainnya. Kontinyuitas dapat dibuat dengan membangun halaman yang
mempunyai karakter, bentuk dan warna, sehingga dapat memberikan rasa
berkesinambungan dan harmonis oleh pengguna.

2.3.4. Struktur Navigasi Multimedia
Dalam membangun multimedia ternavigasi yang didukung dengan elemen
penunjang multimedia, terbagi menjadi beberapa klasifikasi, antara lain :
1. Struktur Linier
Merupakan struktur sederhana dalam menampilkan aplikasi multimedia
dengan dua navigasi maju dan mundur. Struktur linier dapat dilihat pada gambar
2-3.


Gambar 2-3. Struktur Linier
2. Struktur Menu
Merupakan sebuah kumpulan navigasi yang dikombinasikan dengan
elemen-elemen multimedia. Struktur menu dapat dilihat pada gambar 2-4.


Gambar 2-4. Struktur Menu

3. Struktur Hirarki
Struktur hirarki berbentuk seperti tangga atau pohon, dimana pada setiap
objek menyediakan sebuah navigasi yang memiliki banyak menu. Dalam
16



struktur hirarki, tidak terdapat batasan jumlah menu. Struktur hirarki dapat
dilihat pada gambar 2-5.


Gambar 2-5. Struktur Hirarki
4. Struktur Kombinasi
Struktur kombinasi adalah struktur navigasi yang mengkombinasikan
struktur-struktur yang ada. Struktur kombinasi dapat dilihat pada gambar 2-6.


Gambar 2-6. Struktur Kombinasi

2.4. Aplikasi Pembelajaran Multimedia
Keberadaan teknologi informasi sangat berperan penting dalam
meningkatkan kualitas hidup bagi pelajar sebagai awal proses interaksi terhadap
perkembangan teknologi komputer, yang diharapkan nantinya dapat berguna pada
kehidupan sehari-hari bagi pelajar.
Di antara berbagai aplikasi pembelajaran, multimedia memilki suatu
kelebihan tersendiri yang tidak dapat digantikan oleh media pembelajaran yang
lain, dikarenakan pembelajaran multimedia memiliki unsur interaksi yang aktif,
hiburan yang menyenangkan, serta sebagai sumber informasi yang lebih fleksibel
untuk mendukung pelatihan terdistribusi pada kebutuhan pelajar. Unsur-unsur
yang didapat dalam menggunakan aplikasi multimedia pembelajaran, meliputi :
1. Meningkatkan aliran gagasan serta informasi.
17



2. Merupakan cara yang kaya untuk mengomunikasikan sesuatu.
3. Mendorong partisipasi, keterlibatan dan eksplorasi pelajar.
4. Menstimulasi fungsi indera.
5. Kemudahan penggunaan, terutama bagi pelajar yang masih awam.
Dengan menggunakan aplikasi multimedia sebagai media pembelajaran,
dapat meningkatkan proses penyerapan suatu informasi, dikarenakan manusia
hanya mampu mengingat 20% dari apa yang dilihat, 30% dari yang didengar, 50%
dari apa yang dilihat dan didengar, dan 80% dari apa yang didengar dan dilakukan
secara bersamaan. Proses persentase penyerapan suatu informasi dapat dilihat
pada gambar 2-7.


Gambar 2-7. Kerucut Penyerapan Informasi

2.5. Pengembangan Aplikasi Multimedia
Pada tahap ini, dilakukan perumusan kebutuhan dan definisi umum dari
aplikasi yang dikembangkan. Terdapat beberapa fungsi utama dalam tahap ini,
antara lain :
1. Mendefinisikan aplikasi, meliputi makna dan tujuan dari aplikasi yang akan
dibuat.
2. Mengevaluasi kebutuhan perangkat keras dan perangkat lunak, serta memilih
kebutuhan perangkat yang paling baik untuk digunakan.
3. Memastikan kebutuhan pengguna untuk menggunakan aplikasi yang akan
dibuat dan beberapa kebutuhan spesifik yang dijadikan sebagai bahan
pertimbangan.


18



2.5.1. Desain Perancangan
Pada tahapan ini, diharuskan untuk menggambarkan desain yang akan
dibuat secara detail. Hal-hal yang harus dilakukan adalah sebagai berikut :
1. Melakukan pemilihan model sebenarnya yang akan digunakan sebagai kunci
solusi desain antar muka untuk aplikasi yang akan dibuat.
2. Mendefinisikan jenis informasi yang diperlukan untuk diintegrasikan ke
dalam aplikasi. Terdapat beberapa informasi yang dapat diintegrasikan ke
dalam aplikasi yang meliputi teks, bunyi, video, gambar dan animasi.
3. Mengartikulasikan struktur navigasi pada aplikasi, agar navigasi terlihat jelas.
2.5.2. Implementasi
Implementasi dari pembuatan aplikasi dapat dilakukan dengan membuat
prototipe aplikasi yang bertujuan untuk memperkenalkan secara umum mengenai
aplikasi yang akan dibuat, sehingga dapat dilakukan perbaikan yang lebih dini.
2.5.3. Evaluasi
Pada tahap ini, aplikasi akan dievaluasi berdasarkan tujuan dari pembuatan
aplikasi itu sendiri. Terdapat beberapa kategori pada tahapan ini, antara lain :
1. Evaluasi formatif yang terkonsentrasi pada inovasi yang dilakukan selama
implementasi, sebagai peningkatan dalam mencapai tujuan yang telah
ditentukan.
2. Evaluasi yang terkonsentrasi pada efektifitas dari sebuah inovasi pada
penyempurnaan aplikasi dalam batas-batas tujuan yang telah ditetapkan.
Evaluasi ini dapat dimodelkan dengan memungkinkannya evaluator
memeriksa relevansi aplikasi dan pentingnya sebuah inovasi yang diterapkan
dalam pembuatan aplikasi.

2.6. Diagram Alir
Diagram alir adalah sekumpulan simbol yang digunakan untuk
menggambarkan atau merepresentasikan kegiatan dari suatu sistem, aliran
dokumen serta aliran logika yang ditunjukkan dengan arah panah. Penggambaran
diagram alir harus menggunakan cara dan ketentuan yang berlaku secara lazim
dalam pembuatan aplikasi, sehingga tidak akan menimbulkan kebebasan yang
19



tidak mempunyai standar dalam menggambarkan dan merepresentasikan suatu
sistem. Simbol diagram alir dapat dilihat pada tabel 2-1.
Tabel 2-1. Simbol Diagram Alir
Simbol Nama Keterangan


Dokumen Digunakan untuk semua jenis dokumen.


Dokumen rangkap Menggambarkan dokumen asli beserta tembusannya.


Berbagai dokumen Menggambarkan berbagai jenis dokumen yang
digabungkan bersama dalam satu paket.
Input atau outputdata Proses input output data, parameter dan informasi.

Penghubung

Penghubung bagian-bagian diagram alir yang berada
pada satu halaman.


Kegiatan manual Untuk menggambarkan suatu kegiatan manual.


Arsip sementara Menunjukkan tempat penyimpanan dokumen
sementara.


Arsip permanen Menunjukkan tempat penyimpanan dokumen secara
permanen yang tidak akan diproses lagi.


Proses

Proses perhitungan dan proses pengolahan data.


Keying atautyping Menggambarkan input data ke dalam komputer
melalui on-line terminal.


Pita magnetik Menggambarkan arsip pada komputer yang berbentuk
pita magnetik.


On-line storage Menggambarkan arsip pada komputer yang berbentuk
on-line (di dalam memori komputer)


Keputusan Menggambarkan keputusan yang harus dibuat dalam
proses pengolahan data atau operasi perbandingan
logika.


Garis alir Menunjukkan arah aliran proses pengolahan data atau
sistem.


Persimpangan
Garisalir
Jika dua garis alir bersimpangan, untuk menunjukkan
arah masing-masing garis, salah satu garis dibuat
melengkung.


Pertemuan garis alir Digunakan jika terdapat dua garis alir bertemu dan
salah satu garis mengikuti garis lainnya.


Mulai atau berakhir Menggambarkan awal dan akhir suatu sistem.





1
3
A
Ya
Tidak
20



2.7. Perangkat Lunak Pendukung Aplikasi
2.7.1. AdobeDreamweaver
Adobe Dreamweaver merupakan program penyunting halaman web dari
Adobe Sistem. Program ini banyak digunakan oleh pengembang web karena fitur-
fiturnya yang lengkap serta kemudahan dalam penggunaannya. Versi terakhir
Adobe Dreamweaver sebelum Adobe dibeli oleh Adobe Systems yaitu versi 8.
Kemudian setelah dibeli oleh Adobe Systems berkembang ke Versi selanjutnya
yakni versi 9 (CS3) versi 10 yang ada dalam Adobe Creative Suite 4 (CS4) dan
versi terbarunya yaitu CS6.
Sebagai editor web yang handal, Adobe Dreamweaver tentunya dilengkapi
dengan kemampuan manajemen situs, yang memudahkan kita mengelola
keseluruhan elemen yang ada dalam sebuah situs. Kita juga dapat melakukan
evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser,
termasuk validasi tag-tag HTML dan CSS yang tidak sesuai dengan pedoman
secara otomatis serta perkiraan waktu download pada sebuah halaman web.
Adobe Dreamweaver memiliki banyak tool-tool yang memudahkan
seorang web desain untuk mengedit dan membuat kode-kode dalam halaman web.
Fasilitas yang terdapat didalamnya antara lain: Referensi HTML, CSS dan
Javascript, Javascript debugger, dan editor kode ( tampilan kode dan Code
inspector) yang mengizinkan kita mengedit kode Javascript, XML, HTML, CSS,
TEMPLATING dan dokumen teks lain secara langsung. Teknologi Roundtrip
HTML yang dimilikinya mampu mengimpor dokumen HTML tanpa perlu
memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula
untuk membersihkan dan memformat ulang HTML tanpa susah payah.
Dengan fitur yang lengkap, kemudahan penggunaan, dukungan extention
dan Plug-In yang banyak, Adobe Dreamweaver dapat membantu seorang web
desain bekerja lebih cepat dan efisien tanpa kesulitan yang berarti, bahkan untuk
seorang pemula sekalipun yang belum banyak mengenal seputar coding HTML
dan CSS. Gambar tampilan perangkat lunak Dreamweaver dapat dilihat pada
gambar 2-8.
21




Gambar 2-8. Tampilan Dreamweaver

2.7.2. Adobe Flash
Adobe Flash adalah salah satu perangkat lunak animasi vektor yang dibuat
oleh Adobe Systems Inc.yang berfungsi untuk membuat animasi serta dapat
mengkombinasikan elemen-elemen pada multimedia, sehingga
dapatmenghasilkan media animasi interaktif yang dapat didengar maupun dilihat.
Pada Adobe Flash dilengkapi dengan fasilitas script yang digunakan untuk
memberikan fungsi pada animasidan pemrograman yang digunakan adalah
dengan menggunakan Action Script. Tampilan Adobe Flash dapat dilihat pada
gambar 2-9.




22





Gambar 2-9. Tampilan Adobe Flash

Pada perangkat lunak Adobe Flash memiliki beberapa operasi dasar dalam
penggunaan untuk membuat suatu animasi. Penggunaan operasidasar pada
perangkat lunak Adobe Flash dapat dilihat pada tabel 2-2.
Tabel 2-2. Operasi Dasar Adobe Flash
Alat Fungsi
Arrow Tool Untuk memilih suatu objek.
SubSelect Tool Untuk mengolahobjek garis.
Free Transform Tool Untuk mengubah dimensi objek dengan fleksibel.
Gradient Transform Tool Mengatur gradiasi objek.
Line Tool Untuk membuat objek garis.
Text Tool Untuk membuat objek teks.
Oval Tool Untuk membuat objek lingkaran.
Rectangle Tool Untuk membuat objek persegi.
Pencil Tool Untuk membuat objek bebasdengangaris.
Ink Bottle Untuk memberi warna pada garis luarobjek.
Paint Bucket Tool Untuk memberi warna di dalamobjek.

Action Script yang terdapat pada Adobe Flash dapat digunakan untuk
membuat animasi maupun aplikasi yang interaktif, sehingga pengguna dapat
berinteraksi dengan menggunakan kontrol navigasi, memasukkan informasi,
menggerakkan objek dengan keyboard, membuat menu dan lain sebagainya.Saat
ini terdapat beberapa versi Action Script dalam Adobe Flash, antara lain Action
Script versi satu, dua dan tiga. Perbedaan yang terdapat pada versi Action Script,
23



yaitu terletak pada penulisan variabel Action Script serta kelengkapan variabel
yang lebih banyak terdapat pada Action Script versi tiga, pada penulisan variabel
maupun statement yang terdapat pada Action Script, juga harus memperhatikan
perbedaan antara huruf besar dan kecil, spasi, tanda baca dan penulisan lainnya
untuk dapat dibaca dan diproses oleh perangkat lunak Adobe Flash.
2.8 Kognitif
Kemampuan kognitif merupakan salah satu dari bidang pengembangan
oleh guru untuk meningkatkan kemampuan dan kreativitas anak sesuai dengan
tahap perkembangannya. Pengembangan kemampuan kognitif bertujuan agar anak
mampu megolah perolehan belajarnya, menemukan bermacam-macam alternatif
pemecahan masalah, pengembangan kemampuan logika matematika, pengetahuan
ruang dan waktu, kemampuan memilah dan mengelompokkan, dan persiapan
pengembangan kemampuan berpikir teliti.
2.8.1 Perkembangan Kognitif
Perkembangan kognitif merupakan perkembangan dari pikiran (mind). Pikiran
merupakan bagian-bagian otak yang digunakan untuk bernalar, berpikir, dan
memahami sesuatu. Setiap hari, pemikiran anak akan berkembang ketika mereka
belajar tentang orang-orang yang ada di sekitarnya, belajar berkomunikasi, dan
mencoba mendapatkan lebih banyak pengalaman lainnya.
Howard Gardner, seorang psikolog Hardvard University, berdasarkan
penelitiannya, menyimpulkan bahwa setiap anak dilahirkan dengan membawa
delapan jenis kecerdasan, dengan kadar yang berbeda-beda untuk masing-masing
kecerdasan. Delapan jenis kecerdasan, yang kemudian berkembang menjadi
sembilan jenis kecerdasan adalah sebagai berikut:
a.Kecerdasan linguistik, merupakan kemampuan untuk menggunakan bahasa dan
kata-kata.
b.Kecerdasan logis-matematis, merupakan kemampuan seseorang dalam berpikir
secara induktif dan deduktif, berpikir menurut aturan logika, memahami, dan
menganalisis pola angka-angka, serta memecahkan masalah dengan
menggunakan kemampuan berpikir.
c.Kecerdasan visual spasial, merupakan kemampuan seseorang untuk memahami
secara lebih mendalam hubungan antara objek dan ruang.
24



d.Kecerdasan musikal, merupakan kemampuan seseorang yang peka terhadap
suara-suara non verbal yang berada di lingkungan sekelilingnya, termasuk dalam
hal ini adalah nada dan ritme.
e.Kecerdasan kinestetis, merupakan kemampuan seseorang untuk secara aktif
menggunakan bagian-bagian atau seluruh tubuhnya untuk berkomunikasi dan
memecahkan berbagai masalah.
f.Kecerdasan intrapersonal, merupakan kemampuan seseorang untuk peka
terhadap dirinya sendiri.
g.Kecerdasan interpersonal, merupakan kemampuan seseorang untuk peka
terhadap perasaan orang lain.
2.8.2 Tujuan pengembangan kemampuan kognitif anak usia 4-5 tahun.
Tujuan pengembangan kognitif untuk anak usia pra sekolah (termasuk
didalamnya usia 4-5 tahun) adalah sebagai berikut :
a. Belajar dan pemecahan masalah.
Anak diharapkan dapat lebih fokus dalam memperoleh dan menggunakan
informasi, sumber belajar dan penalaran. Ketika anak mengobservasi kejadian
di sekeliling mereka, anak dapat menanyakan sesuatu, membuat pernyataan,
membuat prediksi, dan mengetes pemecahan masalah yang mungkin.
b. Berpikir logis.
Anak diharapkan dapat mempertemukan dan memiliki pengalaman yang baik
terhadap suatu informasi dengan membandingkan, membedakan,
mengelompokkan, mengatur, mengukur, dan memahami pola-pola. Ketika
anak menggunakan kemampuan berpikir logis, mereka akan belajar
mengorganisasikan dunia mereka secara konseptual dan mendapatkan
pemahaman lebih baik tentang bagaimana sesuatu dapat bekerja.
c. Berpikir menggunakan simbol.
Anak diharapkan dapat menggunakan objek dengan sesuatu cara yang unik,
seperti menggunakan sapu sebagai kuda atau bangku sebagai mobil. Kegiatan
bermain pura-pura seperti ini akan mendukung kemampuan representasi.



25



BAB III
PERANCANGAN APLIKASI

3.1. Identifikasi Masalah
Identifikasi masalah dilakukan pada tahap perencanaan pembuatan website
informasi tumbuh kembang anak, dikarenakan masih terdapat masalah-masalah
yang teridentifikasi pada orang tua yang memiliki anak batita atau balita .
Permasalahan yang teridentifikasi pada orang tua yang memiliki anak batita atau
balita, antara lain :
1. Informasi kesehatan anak ( batita dan balita) yang kurang didapatkan oleh
orang tua.
2. Lokasi Puskesmas terdekat yang kurangi diketahui.
3. Terdapat berbagai informasi tentang kesehatan anak yang masih kurang
dapat dimengerti dan dipahami oleh pelajar atau penggunanya.
4. Harga media pembelajaran anak anak yang masih mahal.
5. Dibutuhkannya aplikasi alternatif sebagai media pembelajaran teknologi
komputer.
6. Pembelajaran kognitif anak yang kurang di ketahui oleh orang tua.
7. Pembelajaran kognitif yang manual dengan menggunakan bahan ajar yang
sangat banyak.
3.1.1. Identifikasi Kebutuhan
Identifikasi kebutuhan adalah suatu cara atau metode untuk mengetahui
perbedaan antara kondisi yang diinginkan atau diharapkan dengan kondisi yang
ada. Identifikasi kebutuhan dilakukan untuk mengetahui kebutuhan-kebutuhan apa
saja yang diperlukan pada saat pembuatan website informasi tumbuh kembang
anak sehingga dapat diperoleh hasil kebutuhan yang sesuai dengan website yang
akan dibuat. Adapun identifikasi kebutuhan dibagi menjadi 2 jenis yaitu:
1. Kebutuhan Fungsional
Kebutuhan fungsional dari aplikasi ini adalah:
a. Website mampu memberikan informasi status gizi anak beserta keterangan
lainya seperti lokasi puskesmas , jadwal imunisasi , imunisasi yang cocok .
26



b. Diberikan informasi berat ideal anak beserta informasi penting lainya
seperti cara menggatasi kelebihan/kekurangan berat badan anak , makanan
yang tepat.
c. Website bisa memberikan bantuan kepada pengguna mengenai cara
penggunaan beserta semua isi dari navigasi menu utama.
d. Website bisa memberikan resep menu makanan untuk anak sesuai dengan
kategorinya yaitu batita atau balita.
e. Website memberikan pelatihan kognitif anak yang dibagi menjadi dua
yaitu untuk batita dan balita.
f. Website memberikan kemudahan orang tua dalam memantau tumbuh
kembang anak.
2. Kebutuhan Non Fungsional
Kebutuhan non fungsional dari tutorial ini adalah:
- Interface pada tutorial interaktif yaitu dapat digunakan dengan sistem
operasi Windows dan juga sistem operasi Linux.
- Performance pada aplikasi dapat memberitahukan tumbuh kembang anak
melalui inputan yang diberikan
3.1.2. Kebutuhan Perangkat
Kebutuhan perangkat yang digunakan dalam membuat tutorial ini meliputi
perangkat lunak dan perangkat keras yang dihubungkan dengan sistem operasi.
Adapun perangkat lunak yang dibutuhkan dalam pembuatan aplikasi meliputi:
1. Perangkat lunak Adobe Flash CS5, merupakan perangkat utama yang
memiliki beberapa alat-alat pendukung serta bahasa pemrograman
Actionscript versi 2.0 dan 3.0.
2. Adobe Dreamweaver CS6 untuk memprogram aplikasi berbasis web.
Sedangkan perangkat keras yang digunakan dalam pembuatan aplikasi, meliputi:
1. Mainboard Intel Pentium Core 2 Solo.
2. Processor Intel Pentium Core 2 Solo @ 2.50GHz.
3. Memory 4GB.
4. Harddisk Hitachi HTS543225L9A300 320GB.
5. Sound Realtek 5.698.701.
27



6. Sistem operasi sebagai penghubung perangkat lunak dan perangkat keras
dalam membuat aplikasi, menggunakan sistem operasi Microsoft Windows
Seven 32 Bit.

3.2. Perancangan
Pada tahap perancangan aplikasi, mulai dari tampilan utama menampilkan
beberapa menu yang terdiri menu cek status gizi, cek berat ideal, pembelajaran
anak, resep, lokasi puskesmas dan informasi tumbuh kembang anak.
3.2.1. Perancangan Website Informasi Tumbuh Kembang Anak
Pada website informasi tumbuh kembang anak disajikan dalam berbagai
bentuk visual dan kontrol navigasi. Diagram alir dalam proses pembuatan
website informasi tumbuh kembang anak dapat dilihat pada gambar 3-1.











Gambar 3-1. Diagram Alir Proses Pembuatan Tutorial

3.2.2. Struktur Navigasi Tutorial
Struktur navigasi pada website informasi tumbuh kembang anak
struktur navigasi kombinasi, dimana setiap struktur yang ada, dikombinasikan
dengan navigasi yang dapat dikontrol dengan menggunakan mouse komputer
atau touchpad pada laptop. Struktur navigasi website informasi tumbuh
kembang anak, meliputi :

Data Puskesmas dari
Dinas Kesehatan
Kota malang
proses produksi
perangkat lunak
website informasi
tumbuh kembang anak
Informasi
Pembelajaran
Kognitif Anak
Pengumpulan Resep
Menu Masakan Anak
Sesuai Kategori
28




1. Menu Utama
Terdiri dari tujuh navigasi atau tombol utama, yaitu tombol menu cek
status gizi , tombol menu cek berat ideal , tombol menu bantuan , tombol menu
info tumbuh kembang anak, tombol menu resep , tombol menu pembelajaran
anak , tombol menu lokasi puskesmas malang
2. Menu Cek Status Gizi
Berisikan inputan untuk mengetahui status gizi anak dengan parameter
tinggi badan dan berat badan anak.
3. Menu Cek Berat Ideal
Menu ini digunakan untuk mengetahui berat ideal anak dengan parameter
usia dan berat badan lahir.
4. Menu Media Pembelajaran Anak
Menu ini berisikan media pembelajaran untuk melatih kemampuan
kognitif anak melalui soal yang dikemas secara baik dan disesuaikan dengan
kriteria umur anak ( batita dan balita). Media pembelajaran ini hanya dapat
digunakan ketika mengakses website.
5. Menu Bantuan
Berisikan petunjuk penggunakan aplikasi pada website. Cara penggunaan
aplikasi perhitungan tumbuh kembang anak.
6. Menu Panduan Menu Makanan Anak
Seputar menu makanan untuk anak yang di sesuaikan dengan usia anak,
7. Menu info tumbuh kembang anak
Informasi tentang perkembang tumbuh anak berupa artikel yang bisa
membantu orang tua dalam mengawasi tumbuh kembang anak
8. Menu Lokasi Puskesmas Malang
Peta lokasi puskesmas di Kota Malang berdasarkan kecamatan.





29




Struktur navigasi pada website, dapat dilihat pada gambar 3-2
.









Gambar 3-2. Struktur Navigasi Aplikasi

3.2.3. Perancangan Diagram Alir Aplikasi
Pada tahap perancangan website, membutuhkan penjelasan pada
setiap halaman website secara bertahap, mulai dari proses awal ketika
memulai website, memasuki menu dan sub menu pada website sampai
dengan mengakhiri website. Diagram alir pada website informasi tumbuh
kembang anak, dapat dilihat pada gambar 3-3.









Halaman Utama Website
Status Gizi
Berat Ideal
Media
Pembelajaran
Anak
Bantuan
Resep
Info Tumbuh
Kembang Anak
Lokasi
Puskesmas
Malang
30































If Menu
Utama
Website

If
Status
Gizi
If
Berat
Ideal
B

A

Hitung Status
Gizi Anak

Hitung Berat
Ideal Anak

START
If
Pembelajar
an Anak
Area
Batita
Area
Balita
If
Bantuan Cara penggunaan
website

C

Masuk dalam laman
31



























Gambar 3-3. Diagram Alir Aplikasi



B

A

END
If
Panduan Menu
Makanan
Anak
Tampilan Menu
Makanan Anak

If
Menu
Info
Tumbuh
Kembang
Anak

Artikel tumbuh
kembang anak

Lokasi puskesmas Malang

Lokasi puskesmas
malang tiap
kecamatan

C

32






Pada diagram alir aplikasi di atas dapat dijelaskan sebagai berikut :
1. Mulai dari start diteruskan ke halaman utama.
2. Pada menu utama dengan berisikan 7 menu yaitu menu cek status gizi , menu
cek berat ideal , menu pembelajaran anak , menu bantuan, menu resep, menu
info tumbuh kembang anak dan menu lokasi puskesmas malang.
3. Apabila memilih menu cek status gizi maka akan menampilkan form pengisian
untuk di isi user dalam penghitungan status gizi anak.
4. Apabila memilih menu cek status berat badan ideal anak maka akan
menampilkan form pengisian untuk di isi user dalam penghitungan status berat
badan ideal anak.
5. Apabila memilih pembelajaran anak maka akan diarahkan ke 2 tombol navigasi
untuk memilih media pembelajaran anak batita atau balita.
6. Apabila memilih bantuan maka akan ditampilkan petunjuk penggunaan website
secara detail.
7. Apabila memilih menu resep maka akan ditampilkan resep resep makanan
untuk anak anak
8. Pada menu Informasi tumbuh kembang anak akan ditampilkan artikel
informasi seputar pertumbuhan anak.
9. Jika memilih menu lokasi puskesmas malang maka akan ditunjukan peta Kota
Malang yang berisikan lokasi puskesmas pada setiap kecamatan
3.2.4 Perancangan Database
Di dalam pembuatan website , menggunakan database sebagai tempat
penyimpan beberapa data yaitu tabel berat bada ideal dan komentar para
pengguna website. Berikut perancangan database yang tertuang pada gambar 3-
4 .
33



SI. Website Pengguna
Tabel Komentar 1
Tabel BBI
Admin
Pengguna menulis komentar
pada laman artikel
Menampilkan Komentar
Pengguna
Pengguna mengisi parameter status
Gizi anak
Menampilkan status gizi anak
Menyimpan Komentar
Pengguna pada artikel ke-1
Menampilkan komentar
Pengguna di website
pada artikel ke-1
Mengirim parameter yang
di isikan pengguna
Menampilkan hasil perhitungan
status gizi
Mengisi artikel tambahan
Mengisi tabel status gizi
Menampilkan hasil komentar
Tabel Komentar 3
Tabel Komentar 4
Tabel Komentar 2
Menyimpan Komentar
Pengguna pada artikel ke-4
Menampilkan komentar
Pengguna di website
pada artikel ke-4
Menampilan komentar
Pengguna di website
pada artikel ke-3
Menyimpan Komentar
Pengguna pada artikel ke-3
Menyimpan Komentar
Pengguna pada artikel ke-2
Menampilkan komentar
Pengguna di website pada artikel ke-2


Gambar 3-4. Data flow diagram database website

Tabel BBI
PK Tinggi
Berlebih
Normal
Kurang
Buruk
tabel komentar
PK id
Nama
Email
Website
Komentar
Art_id
Art_url
tabel komentar2
PK id
Nama
Email
Website
Komentar
Art_id
Art_url
tabel komentar3
PK id
Nama
Email
Website
Komentar
Art_id
Art_url
tabel komentar4
PK id
Nama
Email
Website
Komentar
Art_id
Art_url

Gambar 3-5. Entity relationship diagram database website





34




3.2.4. Perancangan Layout Tutorial
1. Halaman Utama
Halaman utama merupakan halaman yang menampilkan seluruh menu dari
website. Menu yang terdapat pada halaman utama antara lain cek status gizi ,
cek berat ideal, pembelajaran anak, bantuan, resep, informasi tumbuh kembang
anak dan lokasi puskesma di kota malang. Semua tombol navigasi pada halaman
utama tersebut ditampilkan dengan tambahan beberapa animasi teks maupun
gambar. Struktur halaman utama dapat dilihat pada gambar 3-6.

| Cek Status Gizi | Cek Berat Ideal | Pembelajaran Anak |Resep | Bantuan
Header
Teks Pembuka
Footer
Informasi tumbuh
kembang anak
Lokasi Puskesmas


Gambar 3-6.Rancangan Menu Utama


35




2. Menu Status Gizi
Halaman menu status gizi ini adalah menu berisikan inputan inputan
untuk mengetahui status gizi anak yang bisa digunakan oleh orang tua untuk
mengukur tumbuh kembang anak. Struktur pada halaman menu status gizi dapat
dilihat pada gambar 3-7.

| Cek Status Gizi | Cek Berat Ideal | Pembelajaran Anak |Resep | Bantuan
Header
Cek Status Gizi Anak
Nama :
Tinggi Badan :
Berat Badan :
Footer
Informasi tumbuh
kembang anak
Lokasi Puskesmas
Submit
Nama Tinggi Berat Berat Normal Status

Gambar 3-7 Struktur Halaman Status Gizi






36





3. Menu Berat Ideal
Halaman berat ideal ini untuk menunjukan sesuai tidaknya berat ideal anak
dengan kriteria yang ditetapkan seperti tingi badan. Struktur pada halaman menu
berat ideal dapat dilihat pada gambar 3-8.

| Cek Status Gizi | Cek Berat Ideal | Pembelajaran Anak |Resep | Bantuan
Header
Cek Status Gizi Anak
Pilih menu dibawah ini yang sesuai dengan
kriteria umur anak Anda .
Footer
Informasi tumbuh
kembang anak
Lokasi Puskesmas
Usia 1 6 Bulan Usia 1 5 Tahun Usia 7 11 Bulan

Gambar 3-8. Struktur Halaman Bantuan






37





4. Menu Halaman Pembelajaran Anak
Halaman Pembelajaran Anak yaitu halaman yang menampilkan latihan
kognitif bagi anak yang berguna bagi tumbu kembang pemikiran anak . Pada
media pembelajaran ini dibagi untuk BATITA dan BALITA , sengaja dibagi
karena tahapan kognitif sudah berbeda. Struktur pada halaman untuk memulai
latihan dapat dilihat pada gambar 3-9. Kemudian untuk struktur pada halaman
media pembelajaran anak dapat dilihat pada gambar 3-9.

| Cek Status Gizi | Cek Berat Ideal | Pembelajaran Anak |Resep | Bantuan
Header
Pembelajaran Kognitif Anak
Footer
Informasi tumbuh
kembang anak
Lokasi Puskesmas
Untuk Balita Untuk Batita

Gambar 3-9. Struktur Halaman media pembelajaran anak


38



5. Menu Halaman Bantuan
Halaman bantuan merupakan halaman yang menampilkan petunjuk atau
bantuan untuk cara menggunakan aplikasi sehingga dapat digunakan untuk
membantu pengguna agar dapat lebih mudah memahami pemakaian maupun
maksud dari setiap tombol yang ada pada aplikasi ini. Berikut merupakan
Struktur pada halaman bantuan dapat dilihat pada gambar 3-10.

| Cek Status Gizi | Cek Berat Ideal | Pembelajaran Anak |Resep | Bantuan
Header
BANTUAN
Isi Menu Bantuan
Footer
Informasi tumbuh
kembang anak
Lokasi Puskesmas

Gambar 3-10. Struktur Halaman Bantuan






39



6. Menu Resep
Tampilan menu panduan anak berisikan resep resep makanan
praktis dan sehat yang di peruntukan anak anak pada usia balita dan
batita. Penyesuaian makanan untuk tumbuh kembang anak. Berikut
merupakan Struktur pada halaman Panduan Menu Makanan Anak dapat
dilihat pada gambar 3-11.

| Cek Status Gizi | Cek Berat Ideal | Pembelajaran Anak |Resep | Bantuan
Header
Isi Menu resep sesuai dengan Kriteria Umur
Footer
Informasi tumbuh
kembang anak
Lokasi Puskesmas
Untuk Balita Untuk Batita

Gambar 3-11. Struktur Halaman Panduan Menu Makanan Anak






40



7. Menu Informasi Tumbuh Kembang Anak
Halaman ini berisikan artikel artikel seputar pertumbuhan anak.
Dimana artikel ini akan sangat bermanfaat bagi orang tua untuk memantau
tumbuh kembang anak. Berikut merupakan struktur pada iInformasi
tumbuh kembang anak dapat dilihat pada gambar 3-12.

| Cek Status Gizi | Cek Berat Ideal | Pembelajaran Anak |Resep | Bantuan
Header
Footer
Informasi tumbuh
kembang anak
Lokasi Puskesmas
Artikel 1 Artikel 2
Artikel 2 Artikel 3

Gambar 3-12. Struktur Halaman Informasi Tumbuh Kembang Anak






41



8. Menu Lokasi Puskesmas Malang
Menu ini akan menunjukan lokasi puskesmas utama dan
puskesmas pembantu di Kota Malang menurut kecamatan . Berikut
merupakan struktur pada menu lokasi puskesmas Kota Malang dapat
dilihat pada gambar 3-13.

| Cek Status Gizi | Cek Berat Ideal | Pembelajaran Anak |Resep | Bantuan
Header
Peta Kota Malang dan lokasi puskesmas
Footer
Informasi tumbuh
kembang anak
Lokasi Puskesmas


Gambar 3-13. Struktur Halaman Lokasi Puskesmas Kota Malang






42



BAB IV
IMPLEMENTASI DAN PENGUJIAN PROGRAM

4.1 Implementasi Halaman Index
Halaman index adalah halaman utama dimana ini adalah halaman
yang pertama kali dibuka ketika mengakses wesbite. Dalam halaman
utama ini terdapat menu menu utama untuk navigasi menuju halaman
halaman yang ada dalam website.
Tombol menu yang ada dalam halaman index adalah : tombol
menu cek status gizi , tombol menu cek berat ideal , tombol menu
pembelajaran anak , tombol menu resep , tombol menu bantuan , tombol
menu lokasi puskesmas dan tombol menu info tumbuh kembang anak.

Gambar 4-1 Tampilan halaman index




43




Penjelasan dari menu utama yang ada adalah sebagai berikut :
1. Tombol Menu Cek Status Gizi , berisi rumus hitungan untuk
mengetahui status gizi anak dengan beberapa parameter yang tersedia.
2. Tombol Menu Cek Berat Ideal, berisi rumus hitungan untuk
mengetahui berat ideal anak dengan beberapa parameter yang tersedia.
3. Tombol Menu Pembelajaran Anak, mempunya 2 sub menu yaitu
pembelajaran untuk usia balita dan batita. Media pembelajaran ini
digunakan dengan didampingi orang tua.
4. Tombol Menu Resep , Beriskan resep makanan yang digunakan oleg
orang tua untuk balita/batita, kandungan gizi diperhatikan dalam
pembuatanya.
5. Tombol Menu Bantuan , digunakan sebagai petunjuk pemakaian
website.
6. Tombol Menu Lokasi Puskesmas , petunjuk lokasi puskesmas di Kota
Malang. Meluputi lokasi puskesmas utama dan puskesma pembantu.
7. Tombol Menu Info Tumbuh Kembang Anak, informasi berbentuk
artikel seputar tumbuh kembang anak yang berguna bagi orang tua.
4.2 Implementasi Halaman Cek Status Gizi
Menu cek status gizi ini berguna untuk menghitung status gizi anak
dengan isian yang dimasukan oleh user. Isian itu berupa nama anak , umur
dan berat badan. Setelah memasukan isian tadi maka akan dihitung dan
ditampilkan bagaimana status gizi anak tersebut.
44




Gambar 4-2 Tampilan halaman cek status gizi anak
Langkah awal dalam penghitungan adalah klik tombol menu cek
status gizi, field nama di isi dengan nama anak , field umur di isikan sesuai dengan
kategori semisal kategori 1 sampai 6 bulan di isi dengan isian angka 1 sampai 6 ,
field berat badan di isi dengan berat badan dari anak setelah ditimbang. Setelah
semua isian terisi maka akan di tampilkan hitungan status pada tabel di bawah
sebagai hasil keluaran.






Gambar 4-3 Tampilan pengisian field
45












4.3 Implementasi Menu Cek Berat Ideal
Menu cek berat idel ini berguna untuk menghitung berat ideal
anak dengan field yang di isi oleh user. field itu berupa nama anak , tinggi
badan dan berat badan. Setelah mengisi field, tmaka akan dihitung dan
ditampilkan bagaimana berat ideal anak tersebut.
Langkah penggunaan halaman ini adalah klik tombol menu cek
berat ideal . Masuk pada halaman isi field yang telah tersedia. Beberapa
parameter yang digunakan untuk menghitung adalah nama , tinggi badan dan
berat .Untuk field nama di isi dengan nama anak yang akan dihitung berat
idealnya. Field tinggi badan dipilih dengan range 52 cm sampai dengan
108 cm . Field berat badan anak di isi dengan berat badan yang anak yang
sudah ditimbang.

Gambar 4-5 Tampilan awal cek berat ideal anak
Gambar 4-4 Tampilan hasil perhitungan
46









4.4 Implementasi Menu Pembelajaran Anak
Menu pembelajaran anak ini berisikan media belajar bagi anak
anak usia balita dan batita. Pelajaran yang diberikan adalah untuk melatih
kemampuan kognitif anak seperti mengenal benda , mencocokan benda ,
membedakan besar dan kecil , mengurutkan benda , dll . Penggunaan media
belajar ini wajib didampingi oleh orang tua sebagai pendamping dalam
belajar.
Gambar 4-6 Tampilan input data
Gambar 4-7 Tampilan hasil hitung
47



Cara penggunaan halaman ini cukup klik tombol menu media
pembelajaran anak. Ada dua sub menu pada halaman ini yaitu media belajar
untuk balita dan media belajar untuk batita. Pilih salah satu dari sub menu
tersebut yang disesuaikan dengan kebutuhan anak.












4.4.1 Sub Menu Pembelajaran Batita
Pembelajaran batita ini berisikan media belajar bagi anak anak di
usia batita ( 1 sampai 3 tahun ) . Penggunaanya cukup mudah digunakan oleh
anak anak . Dibuat dengan gambar beraneka warna agar menarik perhatian
anak anak yang notabene suka dengan warna.
Penggunaan media belajar ini, klik tombol masuk berbentuk kayu .
Kemudian akan masuk pada menu utama media belajar . Ikuti perintah si
Awan dalam pengerjaan soal tersebut. Klik tombol segitiga kuning untuk
beralih ke soal selanjutnya.







Gambar 4-8 Tampilan menu pembelajaran anak
48

















Gambar 4-9 Tampilan halaman sub menu media belajar anak usia batita
Gambar 4-10 Tampilan media pembelajaran usia batita
49





4.4.2 Sub Menu Pembelajaran Balita
Pembelajaran Balita ini berisikan media belajar bagi anak anak di
usia batita ( 4 sampai 5 tahun ) . Penggunaanya cukup mudah digunakan
oleh anak anak . Dibuat dengan gambar beraneka warna agar menarik
perhatian anak anak yang dasarnya suka dengan warna.
Penggunaan media belajar ini, klik tombol. Kemudian akan masuk
pada menu utama media belajar . Ikuti perintah di atas soal dalam
pengerjaan soal tersebut. Klik tombol segitiga kuning untuk beralih ke soal
selanjutnya.

Gambar 4-11 Tampilan media pembelajaran usia batita
Gambar 4-12 Tampilan media pembelajaran usia balita
50





4.5 Implementasi Menu Resep
Menu resep berisikan resep masakan untuk anak anak. Dibagi
menjadi dua yaitu resep makanan untuk balita dan batita. Kandungan gizi
dari makanan disertakan dalam artikel hingga bisa membantu orang tua
dalam memberikan asupan gizi yang pas untuk anak anak.

Gambar 4-13 Tampilan soal media pembelajaran usia batita
Gambar 4-14 Tampilan menu resep
51




4.6 Implementasi Menu Info Tumbuh Kembang Anak
Informasi tumbuh kembang anak dalam bentuk artikel terdapat
pada halaman ini. Artikel seputar tumbuh kembang bisa digunakan oleh
orang tua guna mengawasi tumbuh kembang anak. Cara penggunaan klik
menu info tumbuh kembang anak pada menu bagian kiri dari halaman dimana
anda berada sebelumnya. Ada 4 artikel yang tersedia. Klik tombol read more
untuk membaca artikel secara lengkap. Review artikel ditaruh pada halaman
pembuka menu info tumbuh kembang anak.












Masuk pada salah satu artikel yang dipilih akan muncul penjelasan
lengkap artikel yang dipilih tersebut. Dalam artikel lengkap difasilitasi
kotak komentar agar pengguna bisa memberikan masukan atau pertanyaan
seputar artikel terkait.








Gambar 4-15 Tampilan awal menu info tumbuh kembang anak
52












4.7 Implementasi Menu Lokasi Puskesmas
Pada menu lokasi puskesmas ini akan menampilkan lokasi
puskesmas di Kota Malang. Puskesmas yang di tampilkan adalah
puskesmas utama dan puskesmas pembantu ( pustu ) . Lokasi Puskesmas
di bagi perkecamatan agar lebih mudah dalam pencarianya.













Untuk menggunakan halaman ini , klik menu lokasi puskesmas.
Pada halaman ini terdapat tampilan peta Kota Malang. Di sebelah kanan
peta ada tombol tombol navigasi perkecamatan Kota Malang. Pilih salah
satu tombol navigasi kecamatan . Setelah masuk menu pada salah satu
kecamatan akan muncul balon balon penunjuk lokasi puskesmas. Balon
Gambar 4-16 Tampilan artikel dan penjelasanya
Gambar 4-17 Tampilan menu awal lokasi puskesmas
53



kuning untuk puskesmas utama dan balon hijau untuk puskesmas
pembantu ( Pustu ). Klik salah satu balon, maka akan muncul keterangan
puskesmas tersebut seperti letak puskesmas dan nomor telpon.






Gambar 4-18 Tampilan lokasi puskesmas pada kecamatan blimbing
Gambar 4-19 Tampilan info puskesmas
54



4.8 Pengujian
4.8.1 Pengujian Fungsional Website
Metode pengujian yang digunakan untuk menguji fungsional
website ini yaitu menggunakan metode pengujian blackbox yang berarti
pengujian aplikasi berdasarkan fungsi. Hasil pengujian yang diperoleh
melalui metode blackbox dapat dilihat pada tabel 4-1. Tanda centang ()
merupakan tanda keberhasilan dan tanda silang merupakan tanda
kegagalan (x) dalam sebuah pengujian.

Fungsi
Browser
Chrome
Browser
Mozilla
Browser
IE
Browser
Opera
Halaman Index
Halaman Cek
Status Gizi

Halaman Cek
Berat Ideal

Halaman
Pembelajaran

Halaman Resep
Halaman Bantuan
Halaman Lokasi
Puskesmas

Halaman Info
Tumbuh Kembang
Anak


4.8.2 Pengujian Perhitungan
Pengujian perhitungan dilakukan pada halaman status gizi
dan cek berat ideal. Pengujian dilakukan dengan membandingkan
perhitungan manual menggunakan ms. excel dengan perhitungan
pada website.


Tabel 4-1 Hasil pengujian pada browser
55





















Dengan membandingkan gambar 4-20 dan gambar 4-21
maka di ambil kesimpulan perhitungan pada website sudah sesuai
dengan tabel perbandingan status gizi.











Gambar 4-20 Hasil perhitungan pada website
Gambar 4-21 Tabel perbandingan status gizi
Gambar 4-22 Hasil perhitungan pada halaman berat ideal ( usia 1 sampai 6 bulan )
56
















Dengan membandingkan gambar 4-22 dan gambar 4-23
maka di ambil kesimpulan perhitungan pada website sudah sesuai
dengan rumus yaitu berat badan lahir + ( usia * 600 ) .
















Gambar 4-23 Hasil perhitungan manual menggunakan Microsoft Office Excel
Gambar 4-24 Hasil perhitungan pada halaman berat
ideal ( usia 7 sampai 12 bulan )

57












Dari hasil perbandingan gambar 4-24 dan gambar 4-25 maka
di ambil kesimpulan perhitungan pada website sudah sesuai dengan
rumus yaitu berat badan lahir + ( usia * 500 ) .




Gambar 4-25 Hasil perhitungan manual menggunakan Microsoft Office Excel
Gambar 4-26 Hasil perhitungan manual menggunakan Microsoft Office Excel
58






Dengan membandingkan gambar 4-26 dan gambar 4-27
maka di ambil kesimpulan perhitungan pada website sudah sesuai
dengan rumus yaitu (2*n)+8 dimana n adalah usia anak.
4.9 Hasil Analisa Data
Selain dari pengujian metode blackbox, penulis juga melakukan
pengujian kuesioner terhadap 10 ibu muda ( berusia 23 tahun sampai 28
tahun ). Sebelum mengisi kuesioner , penguji terlebih dahulu melakukan
pengujian. Tabel 4.2 merupakan hasil pengujian dengan hasil.

No Kuisioner
Sangat
Membantu
Cukup
Membantu
Tidak
Membantu
Sangat
Tidak
Membantu
1.
Seberapa berguna
konten dalam
website ini ?
2 8 - -
2.
Apakah membantu
Anda dalam proses
belajar anak ?
7 3 - -
3.
Seberapa mudah
navigasi dari
website ini ?
6 4 - -
Tabel 4-2 Hasil kuesioner
Gambar 4-27 Perhitungan berat ideal anak pada usia 1 5 Tahun
59




Pada tabel dapat diambil hasil bahwa dari 10 ibu muda yang telah diberi
kuisioner memberikan nilai pada setiap pertanyaan dengan prosentase
sebagai berikut. Untuk pertanyaan ke-1 , 20% menjawab sangat membantu
dan 80% cukup membantu. Pertanyaan ke-2 menjawab sangat membantu
70% dan 20% cukup membantu, Pertanyaan ke-3 menjawab sangat
membantu 60% dan 40% cukup membantu, Pertanyaan ke-4 menjawab
sangat membantu 60% dan 40% cukup membantu, Pertanyaan ke-5
menjawab sangat membantu 80% dan 20% cukup membantu.
Dari data yang diperoleh dapat disimpulkan bahwa 58%
koresponden sangat terbantu oleh website ini dan 42 % koresponden
cukup terbantu dengan adanya website ini.







4.
Seberapa menarik
anak Anda dalam
penggunaan aplikasi
media belajar ?
6 4 - -
5.
Seberapa jelas
konten dari website
ini ?
8 2 - -
TOTAL 29 21 - -

TOTAL
PERSENTASE
(%)
58% 42% - -
60



BAB V
PENUTUP

5.1 Kesimpulan
1. Website ini sangat membantu orang tua dalam memantau pertumbuhan
anak dengan persentase 58% dari hasil kuesioner.
2. Pencarian lokasi puskesmas lebih mudah dengan adanya peta lokasi
puskesmas di Kota Malang.
3. Hasil kuesioner pada tiap pertanyaan adalah
a. Seberapa berguna konten dalam website ini ? , 20% menjawab sangat
membantu dan 80% cukup membantu.
b. Apakah membantu Anda dalam proses belajar anak ? menjawab
sangat membantu 70% dan 20% cukup membantu.
c. Seberapa mudah navigasi dari website ini ? menjawab sangat
membantu 60% dan 40% cukup membantu.
d. Seberapa menarik anak Anda dalam penggunaan aplikasi media
belajar ? menjawab sangat membantu 60% dan 40% cukup
membantu.
e. Seberapa jelas konten dari website ini ? menjawab sangat membantu
80% dan 20% cukup membantu.
4. Media belajar interaktif dibedakan menurut kategori usia yaitu batita
dan balita.
5. Penggunaan media belajar berbasis website ini ditujukan untuk orang
tua sebagai media pembelajaran kognitif anak.
5.2 Saran
1. Perlu ditambahnya pendaftaran anggota agar data hitungan dapat
disimpan sebagai record perkembang anak.
2. Data lokasi puskesmas bisa dikembangkan dengan keterangan fasilitas
kesehatan yang ada.
3. Kedepanya diharapkan desain dari website jauh lebih baik dengan
penambahan warna yang atraktif.
61



4. Ditambahnya fasilitas upload menu resep agar mendapatkan menu resep
yang bervariasi
























62



Daftar Pustaka
[1] Arief, Rudiyanto , 2012 , Pemrograman Web Dinamis Menggunakan PHP dan
MySql, Yogyakarta : Andi
[2] Sidik, Betha , 2012 , Pemprogaman Web Dengan PHP ( Edisi Revisi ) ,
Bandung : Informatika.
[3] Fanani , Zainul dan Arry Maulana Syarif , 2010 , Membuat Mini Games Seru
Dengan Flash, Yogyakarta : Andi.
[4] Sunyoto , Andy , 2010 , Adobe Flash + XML = Rich Multimedia Application ,
Yogyakarta : Andi
[5] Charner, Kathy . 2012 . Buku Pintar PAUD Belajar Angka , Jakarta : Esensi
Erlangga Group
[6] Kristanto,Andi. 2010 , Kupas Tuntas PHP & MySQL , Klaten : Cable Book
[7] http://posyandu.org/posyandu/posyandu-balita/data-perkembangan/146-tabel-
berat-badan-menurut-tinggi-badan.html ( diakses tanggal 9 Juni 2013 )
[8] http://posyandu.org/posyandu/posyandu-balita/data-perkembangan/147-
rumus-untuk-menghitung-berat-badan-ideal.html (diakses tanggal 10 Juni 2013
)






63





LAMPIRAN