LAPORAN SKRIPSI TEKNIK INFORMATIKA

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 ITN Malang , [email protected] , [email protected]

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 – anak anak .

Kata Kunci : Pertumbuhan : Pertumbuhan , media interaktif interakt if , 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 Teknik Informatika, Fakultas Teknologi Industri di Institut Teknologi 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. 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 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......................... 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 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................................................. Batita............................................................. ............ 47 4.4.2 Sub Menu Pembelajaran Balita........................................ Balita............................................................ .................... 49 4.5 Implementasi Menu M enu Resep ........................................ .............................................................. .................................. ............ 50 4.6 Implementasi Menu Info Tumbuh Kembang Anak..................................... Anak..................................... 51 4.7 Implementasi Menu Lokasi Puskesmas ...................................................... ...................................................... 52 4.8 Pengujian .................................................... .......................................................................... ............................................. ........................... .... 54 4.8.1 Pengujian Fungsional Website............................................................. 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 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 Tampilan Dreamweaver ............................................ ................................................................... ....................... 21 Gambar 2-9. Tampilan Adobe Tampilan Adobe Flash Flash ..................................................... .................................................................... ................ 22 Gambar 3-1. Diagram Dia gram Alir Proses Pembuatan Tutorial ........................................ ........................................ 27 Gambar 3-2. Struktur Navigasi Aplikasi ........................................... ............................................................... .................... 29 Gambar 3-3. Diagram Alir Aplikasi........................................... Aplikasi.................................................................. ........................... .... 31 Gambar 3-4. Data 3-4. Data flow diagram database website ................................... ............................................... ............ 33 Gambar 3-5. Entity 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 stat us gizi anak ............................................ ............................................ 44 Gambar 4-3 Tampilan pengisian field pengisian field ............................................... .................................................................. .................... 44 Gambar 4-4 Tampilan hasil hasi l perhitungan...................................................... perhitungan............................................................... ......... 45 Gambar 4-5 Tampilan Tampila n awal cek berat ideal anak a nak ......................................... .................................................. ......... 45 Gambar 4-6 Tampilan input data .......................................... ................................................................. ............................... ........ 46 Gambar 4-7 Tampilan hasil hitung ............................................ ................................................................... ........................... .... 46

x

Gambar 4-8 Tampilan Tampila n menu pembelajaran pembelaja ran anak ............................................. .................................................. ..... 47 Gambar 4-9 Tampilan halaman sub menu media belajar anak usia batita ............ 48 Gambar 4-10 Tampilan media pembelajaran pembelajar an 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 s oal 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 a rtikel dan penjelasanya....................... penjelas anya............................................. ........................... ..... 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 websit e ............................... ..................................................... ........................ 55 Gambar 4-21 Tabel perbandingan status gizi............................................... 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 Of fice 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 Of fice Excel .. 57 Gambar 4-26 Hasil perhitungan manual menggunakan Microsoft Office Of fice Excel .. 57 Gambar 4-27 Perhitungan berat ideal anak pada usia 1 – 5 Tahun...................... ...................... 58

xi

DAFTAR TABEL

Tabel 2-1. Simbol Diagram Diagra m Alir ............................................ ................................................................... ............................... ........ 19 Tabel 2-2. Operasi Dasar Adobe Dasar Adobe Flash Flash .......................................... ................................................................. ....................... 22 Tabel 4-1 Hasil pengujian pada browser .................... browser .......................................... .......................................... .................... 54 Tabel 4-2 Hasil H asil 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 diukur dari 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 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 anak dan bisa di akses dimanapun 1.2. Rumusan Masalah Adapun rumusan masalah yang akan dibahas adalah adalah Bagaimana membangun

aplikasi untuk membantu orang tua memantau tumbuh kembang anak dan melatih pengembangan kognitif 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 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 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 Berisi

: PENUTUP tentang

kesimpulan

dan

pengembangan program program selanjutnya. C. BAGIAN PENUTUP 1. Daftar Pustaka 2. Lampiran 3. Biodata Peneliti

saran-saran

yang

digunakan

untuk

5

BAB II LANDASAN TEORI

2.1 Action Script Action Script adalah bahasa adalah bahasa berorientasi objek awalnya dikembangkan

oleh Macromedia Inc (sekarang dimiliki oleh oleh Adobe Adobe Systems ). Ini adalah dialek ECMA Script (berarti itu adalah superset dari sintaks dan semantik bahasa lebih luas dikenal sebagai JavaScript sebagai JavaScript ), dan digunakan terutama untuk pengembangan situs web dan perangkat lunak menargetkan Adobe menargetkan Adobe Flash Player platform, Player platform, digunakan pada halaman Web di bentuk file tertanam SWF. Bahasa itu sendiri adalah open-source dalam spesifikasi yang ditawarkan secara ditawarkan secara gratis dan keduanya compiler open source (sebagai bagian dari Apache dari Apache Flex ) dan open source mesin virtual ( Mozilla ( Mozilla Tamarin ) yang tersedia. Action Script pada awalnya dirancang untuk mengendalikan animasi vektor 2D sederhana yang dibuat di Adobe di Adobe Flash (sebelumnya Macromedia Flash). 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 ini, Action Script cocok cocok untuk digunakan dalam beberapa aplikasi database, dan robotika dasar, seperti dengan Membuat dengan Membuat Kit Pengawas . Flash Flash MX 2004 diperkenalkan Action Script 2.0, 2.0, sebuah bahasa sebuah bahasa scripting yang lebih cocok untuk pengembangan aplikasi Flash. 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 kedatangan Flash Player Player 9 alpha (tahun 2006) versi terbaru dari Action

Script telah

dirilis, Action

Script 3.0. Action 3.0. Action

Script 3.0

adalah berorientasi 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 versi Action Script Virtual Machine Machine yang telah sendiri sepenuhnya ditulis ulang dari bawah bawah ke atas (dijuluki AVM2). Karena itu, kode yang 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 kode Action Script warisan warisan karena Just-In-Time karena Just-In-Time compiler tambahan. tambahan. Perpustakaan Flash Flash dapat digunakan dengan kemampuan XML browser untuk membuat konten yang kaya dalam browser. Teknologi ini dikenal sebagai

Asynchronous Flash dan XML, mirip AJAX mirip AJAX .. Adobe

menawarkan nya Flex nya Flex lini produk untuk memenuhi permintaan untuk Rich untuk Rich Internet Applications dibangun pada runtime Flash, 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, 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 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, 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 melalui mesin scanner . c. Teks Digital 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, video, yaitu video analog dan video digital . Video analog dibentuk 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 yang berbentuk bilangan biner (0 dan 1). Pada video video digital terdapat tiga komponen utama yang terbentuk, yaitu frame rate, rate, frame size size dan datatype. datatype. Pada frame rate rate menggambarkan berapa kali bingkai gambar yang dapat dimunculkan pada setiap detiknya, sementara frame size merupakan size merupakan ukuran fisik yang sebenarnya dari setiap bingkai gambar yang telah disusun dan datatype menentukan datatype menentukan seberapa banyak perbedaan warna yang dapat dimunculkan pada saat bersamaan. Dalam penggunaannya, video 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 m enjadi 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) node (titik) dan line (garis) 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 (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 Gambar bitmap bitmap merupakan rekontruksi dari gambar asli yang tersimpan sebagai serangkaian pixel serangkaian pixel (titik-titik) (titik-titik) yang memenuhi bidang pixel pada pada layar komputer. Kelebihannya dalam menggunakan gambar bitmap antara lain : 1.

Proses pengolahan yang minimal.

2.

Lebih cepat untuk ditampilkan, dikarenakan gambar bitmap 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, bitmap, dikarenakan resolusi gambar bitmap tergantung dari gambar aslinya. 2.

Kapasitas data bitmap relatif bitmap relatif masih besar.

3.

Apabila gambar bitmap 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 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 dalam format data *.jpg, *.jpeg, *.gif, *.png dan lainnya. Sifat gambar vektor yang telah diekspor tersebut, secara otomatis berubah menjadi tipe gambar bitmap, bitmap, meskipun gambar tersebut dibuat dengan menggunakan perangkat lunak gambar vektor. Perbedaan gambar vektor dan gambar bitmap dapat bitmap dapat dilihat pada gambar 2-2.

Gambar 2-2. Perbedaan Gambar Vektor dan Bitmap 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 setiap frame yang yang saling berkaitan dengan frame dengan frame lainnya. lainnya. 3. Sprite Animation Sprite animation animation merupakan sebuah animasi yang bergerak secara mandiri, sedangkan latar pada belakang animasi tersebut diam. 4. Path Animation Path animation animation (animasi lintasan) adalah animasi yang bergerak mengikuti garis pada suatu lintasan yang dibuat. 5. Spline Animation Spline animation merupakan 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 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 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. keindahan. 3. Ekonomis Desain multimedia juga harus memperhatikan faktor ekonomis, artinya ukuran data dan jumlah data dari desain multimedia mult imedia 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. pengguna.

2.3.4. Struktur Navigasi Multimedia Dalam membangun multimedia ternavigasi yang didukung dengan elemen

penunjang multimedia, terbagi menjadi beberapa 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 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 ber guna 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, 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 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 t abel 2-1. Tabel 2-1. Simbol Diagram Alir Simbol

Nama Dokumen

Dokumen rangkap

A

1

Berbagai dokumen

Input atau atau output data data Penghubung Kegiatan manual Arsip sementara Arsip permanen Proses Keying atautyping atautyping Pita magnetik On-line storage Ya

Keputusan

Tidak

Garis alir Persimpangan Garisalir Pertemuan garis alir Mulai atau berakhir

Keterangan Digunakan untuk semua jenis dokumen.

Menggambarkan dokumen asli beserta tembusannya. Menggambarkan berbagai jenis dokumen yang digabungkan bersama dalam satu paket. Proses input output data, data, parameter dan informasi. Penghubung bagian-bagian diagram alir yang berada pada satu halaman. halaman. Untuk menggambarkan suatu kegiatan manual. Menunjukkan tempat penyi mpanan penyimpanan dokumen sementara. Menunjukkan tempat penyimpanan dokumen secara permanen yang yang tidak akan diproses diproses lagi.

Proses perhitungan dan proses pengolahan data. Menggambarkan input data ke dalam komputer melalui on-line terminal. Menggambarkan arsip pada komputer yang berbentuk pita magnetik. magnetik. Menggambarkan arsip pada komputer yang berbentuk on-line (di on-line (di dalam memori komputer) Menggambarkan keputusan yang harus dibuat dalam proses pengolahan data atau operasi perbandingan perbandingan logika. Menunjukkan Menunjukkan arah aliran proses pengolahan data atau sistem. Jika dua garis alir bersimpangan, untuk menunjukkan arah masing-masing garis, salah satu garis dibuat melengkung. Digunakan jika terdapat dua garis alir bertemu dan salah satu garis mengikuti garis lainnya. Menggambarkan Menggambarkan awal dan akhir suatu sistem.

20

2.7. Perangkat Lunak Pendukung Aplikasi 2.7.1. Adobe Dreamweaver Adobe Adobe Dreamweaver merupakan program penyunting halaman web dari

Adobe Sistem. Adobe Sistem. Program ini banyak digunakan oleh pengembang web karena fiturfiturnya yang lengkap serta kemudahan dalam penggunaannya. Versi terakhir Adobe Dreamweaver sebelum Adobe Adobe dibeli oleh Adobe Systems Systems yaitu versi 8. Kemudian setelah dibeli oleh Adobe Systems Systems berkembang ke Versi selanjutnya yakni versi 9 (CS3) versi 10 yang ada dalam Adobe Adobe Creative Suite 4 (CS4) dan versi terbarunya yaitu CS6. Sebagai editor web yang handal, Adobe handal, Adobe Dreamweaver 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 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 susa h payah. Dengan fitur yang lengkap, kemudahan penggunaan, dukungan extention dan Plug-In yang banyak, Adobe 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 Tampilan Dreamweaver

2.7.2. Adobe Flash Adobe Flash adalah Flash adalah salah satu perangkat lunak animasi vektor yang dibuat

oleh Adobe 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 Flash dapat dilihat pada gambar 2-9.

22

Gambar 2-9. Tampilan Adobe Tampilan Adobe Flash Flash

Pada perangkat lunak Adobe lunak Adobe Flash memiliki Flash memiliki beberapa operasi dasar dalam penggunaan untuk membuat suatu animasi. Penggunaan operasidasar pada perangkat lunak Adobe lunak Adobe Flash dapat Flash dapat dilihat pada tabel 2-2. Tabel 2-2. Operasi Dasar Adobe Dasar Adobe Flash Flash Alat Arrow Tool SubSelect Tool Free Transform Tool Gradient Transform Tool Line Tool Text Tool Oval Tool Rectangle Tool Pencil Tool Ink Bottle Paint Bucket Tool

Fungsi Untuk memilih suatu objek. Untuk mengolahobjek garis. Untuk mengubah dimensi objek dengan fleksibel. Mengatur gradiasi objek. Untuk membuat objek garis. Untuk membuat objek teks. Untuk membuat objek lingkaran. Untuk membuat objek persegi. Untuk membuat objek bebasdengangaris. Untuk memberi warna pada garis luarobjek. Untuk memberi warna di dalamobjek.

Action Script yang terdapat pada Adobe Flash 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, Flash, antara lain Action Script versi 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 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 lunak Adobe Flash. 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 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 4 -5 tahun. Tujuan pengembangan kognitif 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 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” pura” seperti ini akan mendukung kemampuan 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 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 i munisasi , 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 Interface pada tutorial interaktif yaitu dapat digunakan dengan sistem operasi Windows dan Windows dan juga sistem operasi Linux operasi Linux.. Performance pada aplikasi dapat memberitahukan tumbuh kembang anak - Performance pada melalui inputan yang diberikan 3.1.2. Kebutuhan Perangkat Kebutuhan perangkat yang digunakan dalam membuat tutorial ini meliputi

perangkat lunak dan perangkat perangkat keras yang dihubungkan dengan sistem operasi. Adapun perangkat lunak yang dibutuhkan dalam pembuatan aplikasi meliputi: 1. Perangkat lunak Adobe Flash CS5, CS5 , merupakan perangkat utama yang memiliki beberapa alat-alat pendukung serta bahasa pemrograman Actionscript versi versi 2.0 dan 3.0. web. 2. 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 Solo.. 2. Processor Intel Pentium Core 2 Solo @ 2.50GHz 2.50GHz . 3. Memory 4GB. 4. Harddisk Hitachi HTS543225L9A300 HTS543225L9A300 320GB. 5. Sound Realtek 5.698.701. 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.

Data Puskesmas dari Dinas Kesehatan Kota malang

perangkat lunak

proses produksi Informasi Pembelajaran Kognitif Anak

website informasi tumbuh kembang anak

Pengumpulan Resep Menu Masakan Anak Sesuai Kategori

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 :

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 t umbuh 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 . Halaman Utama Website

Status Gizi Resep Berat Ideal Media Pembelajaran Anak Lokasi Puskesmas Malan

Bantuan Info Tumbuh Kembang Anak

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.

30

START

Masuk dalam laman

If Menu Utama Website

If Status Gizi

If Berat Ideal

If Pembelajar an Anak

Hitung Status Gizi Anak

Hitung Berat Ideal Anak

Area Batita

Area Balita

If Bantuan

Cara penggunaan website

A B

C

31

A

B

C

If Panduan Menu Makanan Anak

Tampilan Menu Makanan Anak

If Menu

Artikel tumbuh kembang anak

Info Tumbuh

Lokasi puskesmas Malang

Lokasi puskesmas malang tiap kecamatan

END

Gambar 3-3. Diagram Alir Aplikasi

32

Pada diagram alir aplikasi di atas dapat dijelaskan sebagai berikut : 1. Mulai dari start dari start diteruskan 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 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 yang tertuang pada gambar 34.

33

Tabel Komentar 1 Admin Menyimpan Komentar Pengguna pada artikel ke-1

Tabel BBI

Mengisi artikel tambahan Mengisi tabel status gizi Menampilkan komentar Pengguna di website pada artikel ke-1

Menampilkan hasil komentar

Mengirim parameter yang di isikan pengguna Pengguna menulis komentar pada laman artikel

Pengguna

SI. Website

Menampilkan Komentar Pengguna

Menampilkan hasil perhitungan status gizi

Pengguna mengisi parameter status Gizi anak Menampilkan komentar Pengguna di website pada artikel ke-4

Menampilkan status gizi anak

Menyimpan Komentar Pengguna pada artikel ke-4

Menampilkan komentar Pengguna di website pada artikel ke-2

Menampilan komentar Pengguna di website pada artikel ke-3

Tabel Komentar 4



Tabel Komentar 2

Tabel Komentar 3

Gambar 3-4. Data 3-4. Data flow diagram database diagram database website

Tabel BBI

tabel komentar

tabel komentar2

tabel komentar3

tabel komentar4

PK

Ting Tinggi gi

PK

id

PK

id

PK

id

PK

id

Berlebih Normal Kurang Buruk

Nama Email Website Komentar Art_id Art_url




Gambar 3-5. Entity 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

Informasi tumbuh kembang anak Lokasi Puskesmas

Teks Pembuka

Footer

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.


Header


Cek Status Gizi Anak Nama Tinggi Badan Berat Badan

: : : Submit

Nama

Tinggi

Berat

Berat Normal

Footer

Gambar 3-7 Struktur Halaman Status Gizi

Status

36

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


Header


Cek Status Gizi Anak Pilih menu dibawah ini yang sesuai dengan kriteria umur anak Anda .

Usia 1 – 6 Bulan

Usia 7 – 11 Bulan

Footer

Gambar 3-8. Struktur Halaman Bantuan

Usia 1 – 5 Tahun

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 tahapan kognitif 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.


Header

Informasi tumbuh kembang anak

Pembelajaran Kognitif Anak

Lokasi Puskesmas

Untuk Balita

Untuk Batita

Footer

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. ini . Berikut merupakan Struktur pada halaman bantuan dapat dilihat pada gambar 3-10.


Header


BANTUAN

Lokasi Puskesmas

Isi Menu Bantuan

Footer

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.


Header


Untuk Balita

Untuk Batita

Lokasi Puskesmas

Isi Menu resep sesuai dengan Kriteria Umur

Footer

Gambar 3-11. Struktur Halaman Panduan Menu Makanan Anak

40

7. Menu Informasi Tumbuh Kembang Anak Halaman ini berisikan artikel – 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.


Header

Informasi tumbuh kembang anak Lokasi Puskesmas Artikel 1

Artikel 2

Artikel 2

Artikel 3

Footer

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.


Header


Peta Kota Malang dan lokasi puskesmas

Footer

Gambar 3-13. Struktur Halaman Lokasi Puskesmas Kota Malang

42

BAB IV IMPLEMENTASI DAN PENGUJIAN PROGRAM

4.1 Implementasi Halaman Index Halaman index index adalah halaman utama dimana ini adalah halaman

yang pertama kali dibuka ketika mengakses wesbite. wesbite. Dalam halaman utama ini terdapat menu – menu menu utama untuk navigasi menuju halaman – halaman yang ada dalam website. Tombol menu yang ada dalam halaman index 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. 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 a nak Langkah awal dalam penghitungan adalah klik tombol menu cek status gizi, field gizi, field nama nama di isi dengan nama anak , field umur 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 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 pengisian field

45

Gambar 4-4 Tampilan hasil perhitungan 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, 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 menghitung adalah nama , tinggi badan dan berat .Untuk field nama di isi dengan nama anak yang akan dihitung berat idealnya. Field 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

46

Gambar 4-6 4-6 Tampilan input input data

Gambar 4-7 Tampilan hasil hitung

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.

47

Cara penggunaan penggunaan halaman halaman ini cukup klik tombol 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.

Gambar 4-8 Tampilan menu pembelajaran anak 4.4.1 Sub Menu Pembelajaran Batita Pembelajaran batita ini berisikan media belajar bagi anak – anak anak di

usia batita ( 1 sampai 3 tahun ) . Penggunaanya cukup mudah digunakan oleh anak – anak anak . Dibuat dengan gambar beraneka warna agar menarik perhatian anak – 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.

48

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

Gambar 4-10 Tampilan media pembelajaran usia batita

49

Gambar 4-11 Tampilan media pembelajaran usia batita 4.4.2 Sub Menu Menu Pembelajaran Pembelajaran Balita Balita Pembelajaran Balita ini berisikan media belajar bagi anak – 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 anak yang dasarnya suka dengan warna. Penggunaan media belajar ini, klik kli k 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-12 Tampilan media pembelajaran usia balita

50

Gambar 4-13 Tampilan soal media pembelajaran usia batita 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. anak.

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 Review artikel ditaruh pada halaman pembuka menu info tumbuh tumbuh kembang anak.

Gambar 4-15 Tampilan awal menu info i nfo 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.

52

Gambar 4-16 Tampilan artikel dan penjelasanya 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.

Gambar 4-17 Tampilan menu awal lokasi puskesmas 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 balon penunjuk lokasi puskesmas. Balon

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 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. Tabel 4-1 Hasil pengujian pada browser Fungsi

Browser

Browser

Browser

Browser

Chrome

Mozilla

IE

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.

55

Gambar 4-20 Hasil perhitungan pada website

Gambar 4-21 Tabel perbandingan status gizi 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-22 Hasil perhitungan pada halaman berat ideal ( usia 1 sampai 6 bulan )

56

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

Gambar 4-24 Hasil perhitungan pada halaman berat ideal ideal usia usia 7 sam ai 12 bulan bulan

57

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

Gambar 4-26 Hasil perhitungan manual menggunakan Microsoft Office Excel

58

Gambar 4-27 Perhitungan berat ideal anak pada usia 1 – 5 5 Tahun 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. Tabel 4-2 Hasil kuesioner

No

Kuisioner

Sangat

Sangat

Cukup

Tidak

Membantu

Membantu

Membantu

2

8

-

-

7

3

-

-

6

4

-

-

Tidak Membantu

Seberapa berguna 1.

konten dalam website ini ? Apakah membantu

2.

Anda dalam proses belajar anak ? Seberapa mudah

3.

navigasi dari website ini ?

59

Seberapa menarik 4.

anak Anda dalam penggunaan aplikasi aplikasi

6

4

-

-

8

2

-

-

29

21

-

-

58%

42%

-

-

media belajar ? Seberapa jelas 5.

konten dari website ini ? TOTAL TOTAL PERSENTASE (%)

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.

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 perkembang anak. 2. Data lokasi puskesmas bisa dikembangkan dengan keterangan fasilitas kesehatan yang ada. 3. Kedepanya diharapkan desain dari website website jauh lebih baik dengan penambahan warna yang atraktif.

61

4. Ditambahnya fasilitas upload menu 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/147rumus-untuk-menghitung-berat-badan-ideal.html (diakses tanggal 10 Juni 2013 )

63

LAMPIRAN

LAPORAN SKRIPSI TEKNIK INFORMATIKA

Recommend Documents