IDENTIFIKASI OBJEK BERGERAK BADA SISTEM KEAMANAN BERBASIS

CAMERA CAPTURE

Deny Baskoro Tamahita

Jurusan Teknik Informatika, Fakultas Teknologi Industri, Universitas Gunadarma

ABSTRAK

Pada tulisan ini dibahas tentang pembuatan sebuah program aplikasi dalam sebuah

perangkat selular (ponsel), penulis tertarik mengembangkan aplikasi mobile dikarenakan

mobilitas penggunaan ponsel semakin berkembang, mulai dari aplikasi yang berupa

permainan maupun aplikasi yang bersifat mendidik seperti pembelajaran interaktif,

pembelajaran interaktif sendiri dapat digunakan oleh siapa saja dan kapan saja, dimana

dengan aplikasi ini penggunanya dapat mempelajari dasar-dasar membangun website.

Aplikasi ini dibuat dengan mengimplementasikan web service yang mana menggunakan

android sebagai klient dan apache sebagai web server dengan database mysql. Aplikasi ini

dapat memenuhi kebutuhan pengguna terhadap pembelajaran tanpa membatasi mobilitas

penggunanya.

Kata Kunci : Sistem Keamana,Webcam

PENDAHULUAN Keamanan merupakan sesuatu yang sangat penting seiring meningkatnya tingkat kejahatan.

Untuk itu dibutuhkan suatu sistem keamanan yang mampu mencatat setiap kejadian yang

tidak diinginkan, sehingga dapat digunakan untuk keperluan penyelidikan oleh pihak yang

berwajib. Teknologi keamanan pada sebuah ruangan telah berkembang pesat, baik dengan

menggunakan CCTV (closed circuit television), sensor asap, sensor suhu, sensor cahaya, dan

lain sebagainya. Pada sistem CCTV konvensional, setiap objek yang nampak pada kamera

akan direkam secara kontinyu dalam bentuk video dan disimpan ke media penyimpanan

tertentu tanpa memperhatikan adanya gerakan atau tidak. Kelemahan sistem CCTV

konvensional tersebut antara lain file video yang disimpan cenderung besar dan apabila

memerlukan informasi dari video tersebut maka video harus diputar ulang dan diamati

dengan seksama, serta masih dibutuhkannya petugas keamanan untuk berpatroli yang dapat

menyebabkan pemantauan dan penjagaan menjadi kurang maksimal. Beberapa CCTV telah

memiliki teknologi pendeteksian gerakan dan akan menampilkan icon tertentu apabila

kamera mendeteksi adanya gerakan. Namun proses penyimpanan video masih dilakukan

secara berkesinambungan tanpa memperhatikan adanya gerakan tersebut. Dengan

mengembangkan sistem keamanan ruangan menggunakan webcam dengan deteksi gerakan

(motion detection) ini, sistem akan berkerja ketika webcam mendeteksi sebuah gerakan maka

secara otomatis sistem akan mengambil gambar/foto dari setiap gerakan dan menyimpannya

kedalam format JPEG, sehingga dapat meminimalisir penggunaan media penyimpanan yang

besar. Selain itu, pada sistem keamanan ruangan ini terdapat juga alarm yang berfungsi

sebagai tanda peringatan dini bahwa telah terjadi hal yang tidak diinginkan. Selain dari pada

itu, pada sistem keamanan ruangan ini juga terdapat fungsi notifikasi sms yang berfungsi

sebagai peringatan akhir bahwa terjadi hal yang tidak diinginkan. Selain deteksi gerakan,

notifikasi sms, dan alarm, tersedia juga fitur pencarian hasil foto (history) berdasarkan

tanggal yang berfungsi untuk mempermudah user mengetahui kejadian apa saja yang telah

terjadi secara historis dan dapat dijadikan sebagai bahan bukti untuk penyelidikan

TINJAUAN PUSTAKA

Definisi Web Service

Web service adalah suatu sistem perangkat lunak yang dirancang untuk mendukung

interoperabilitas dan interaksi antar sistem pada suatu jaringan. Web service digunakan

sebagai suatu fasilitas yang disediakan oleh suatu web site untuk menyediakan layanan

(dalam bentuk informasi) kepada sistem lain, sehingga sistem lain dapat berinteraksi dengan

sistem tersebut melalui layanan-layanan (service) yang disediakan oleh suatu sistem yang

menyediakan web service. Web service menyimpan data informasi dalam format XML

ataupun JSON, sehingga data ini dapat diakses oleh sistem lain walaupun berbeda platform,

sistem operasi, maupun bahasa compiler.

Web service bertujuan untuk meningkatkan kolaborasi antar pemrogram dan

perusahaan, yang memungkinkan sebuah fungsi di dalam Web Service dapat dipinjam oleh

aplikasi lain tanpa perlu mengetahui detil pemrograman yang terdapat di dalamnya.

Beberapa alasan mengapa digunakannya web service adalah sebagai berikut:

1. Web service dapat digunakan untuk mentransformasikan satu atau beberapa bisnis logic

atau class dan objek yang terpisah dalam satu ruang lingkup yang menjadi satu, sehingga

tingkat keamanan dapat ditangani dengan baik.

2. Web service memiliki kemudahan dalam proses deployment-nya, karena tidak

memerlukan registrasi khusus ke dalam suatu sistem operasi. Web service cukup di-

upload ke web server dan siap diakses oleh pihak-pihak yang telah diberikan otorisasi.

3. Web service berjalan di port 80 yang merupakan protokol standar HTTP, dengan

demikian web service tidak memerlukan konfigurasi khusus di sisi firewall.

Android

Android adalah sistem operasi untuk telepon seluler yang berbasis Linux. Android

menyediakan platform terbuka bagi para pengembang untuk menciptakan aplikasi mereka

sendiri untuk digunakan oleh bermacam peranti bergerak. Awalnya, Google Inc. membeli

Android Inc., pendatang baru yang membuat peranti lunak untuk ponsel. Kemudian untuk

mengembangkan Android, dibentuklah Open Handset Alliance, konsorsium dari 34

perusahaan peranti keras, peranti lunak, dan telekomunikasi, termasuk Google, HTC, Intel,

Motorola, Qualcomm, T-Mobile, dan Nvidia.

Pada Juli 2005 Android telah diakuisisi oleh Google dan pada 5 November 2007 barulah

secara resmi Android di rilis oleh Google. Dalam pengembangan aplikasi android

menyediakan Android SDK yang menyediakan tools dan API untuk para pengembang

aplikasi dengan platform Android. Android menggunakan Java sebagai bahasa

pemogramannya.

Fitur Android.

Fitur-fitur pada Android antara lain adalah :

Framework aplikasi, memungkinkan daur ulang dan penggantian komponen.

Browser terintegrasi berbasis engine Open Source WebKit yang juga digunakan di

browser IPhone dan Nokia S60v3.

Rancangan handset. Platform disesuaikan dengan kebutuhan VGA (Video Graphics

Adapter) yang lebih besar, library grafik 2D dan 3D yang berdasarkan pada

spesifikasi OpenGL ES 1.0 serta layout smartphone yang tradisional.

Konektivitas. Android mendukung berbagai teknologi konektivitas seperti GSM

(Global System for Mobile Communications)/EDGE (Enhanced Data rates for GSM

Evolution), CDMA (Code Division Multiple Access), EV-DO (Evolution-Data

Optimized), UMTS (Universal Mobile Telecommunications System), Bluetooth dan

Wi-Fi (Wireless Fidelity).

Pesan. Android mendukung pengiriman pesan dalam bentuk SMS (Short Message

Service) dan MMS (Multimedia Messaging Service).

Dukungan Java. Software yang ditulis dalam bahasa Java dapat dikompilasi dan akan

dieksekusi pada mesin virtual Dalvik, yang merupakan implementasi dari VM

(Virtual Machine) yang dirancang khusus untuk penggunaan perangkat bergerak.

Dukungan media. Android mendukung beberapa format audio/video seperti: H.263,

H.264 (dalam kontainer 3GP atau MP4), MPEG-4 SP, AMR, AMR-WB (dalam

kontainer 3GP), AAC, HE-AAC (dalam kontainer MP4 atau 3GP), MP3, MIDI,

OGG Vorbis, WAV, JPEG, PNG, GIF dan BMP.

Dukungan hardware tambahan. Android mendukung penggunaan kamera, layar

sentuh, GPS (Global Positioning System), pengukur kecepatan, magnetometer,

akselerasi 2D bit blits (dengan orientasi hardware, scaling, konversi format piksel)

dan akselerasi grafis 3D.

Market. Mirip dengan App Store pada iPhone OS, Android Market adalah sebuah

katalog aplikasi yang dapat di-download dan diinstal pada telepon seluler secara

online, tanpa menggunakan PC (Personal Computer). Awalnya hanya aplikasi gratis

saja yang didukung. Dan sejak tanggal 19 Februari 2009 aplikasi berbayar telah

tersedia di Android Market untuk Amerika Serikat.

Multi-touch. Android memiliki dukungan bawaan untuk multi-touch yang tersedia

pada handset terbaru seperti HTC Hero. Pada awalnya fitur tersebut dinonaktifkan

pada level kernel (mungkin untuk menghindari pelanggaran paten terhadap teknologi

layar sentuh Apple). Sejak Google merilis update untuk Nexus One dan berencana

juga untuk merilis update untuk Motorola Droid yang memungkinkan multi-touch.

Lingkungan pengembangan yang kaya, termasuk emulator, peralatan debugging, dan

plugin untuk Eclipse IDE.

Android Development Tools (ADT).

Android Development Tools (ADT) adalah plugin untuk Eclipse yang didesain untuk

pengembangan aplikasi Android. ADT memungkinkan Eclipse untuk digunakan dalam

membuat aplikasi Android baru, membuat User Interface, menambahkan komponen

berdasarkan framework API Android, debug aplikasi, dan pemaketan aplikasi Android.

JSON

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah

dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh

komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript,

Standar ECMA-262 Edisi ke-3 - Desember 1999. JSON merupakan format teks yang tidak

bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang

umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl,

Python dll. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa

pertukaran-data.

JSON terbuat dari dua struktur:

Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai

objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash

(hash table), daftar berkunci (keyed list), atau associative array.

Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini

dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence).

Struktur-struktur data ini disebut sebagai struktur data universal. Pada dasarnya, semua

bahasa pemprograman moderen mendukung struktur data ini dalam bentuk yang sama

maupun berlainan. Hal ini pantas disebut demikian karena format data mudah dipertukarkan

dengan bahasa-bahasa pemprograman yang juga berdasarkan pada struktur data ini.

Contoh sintaks

Contoh berikut menunjukkan representasi JSON untuk suatu objek yang

mendeskripsikan seseorang.

{

"namaDepan": "Budi",

"namaBelakang": "Subudi",

"alamat": {

"namaJalan": "Jl. Sudirman 15A",

"kota": "Jakarta Selatan",

"provinsi": "DKI Jakarta",

"kodePos": 11111

},

"nomerTelepon": [

"021 555-1234",

"021 555-4567"

]

}

Sruktur Navigasi

Struktur navigasi adalah alur yang digunakan dalam aplikasi yang dibuat. Sebelum

menyusun aplikasi multimedia kedalam sebuah software, terlebih dahulu alur apa yang akan

digunakan dalam aplikasi yang dibuat. Bentuk dasar dari struktur navigasi yang biasa

digunakan dalam proses pembuatan aplikasi multimedia ada empat macam, yaitu struktur

navigasi linier, hirarki, non linier dan campuran.

2.8.1 Struktur Navigasi Linier

Struktur navigasi linier merupakan struktur yang mempunyai satu rangkaian cerita

berurutan. Struktur ini menampilkan satu demi satu tampilan layer secara berurutan menurut

aturannya.

Gambar 2.4 Struktur Navigasi Linier

2.8.2 Struktur Navigasi Hirarki

Struktur navigasi hirarki sering disebut struktur navigasi bercabang, yaitu merupakan

suatu struktur yang mengandalkan percabangan untuk menampilkan data atau gambar pada

layer dengan kriteria tertentu. Tampilan pada menu utama disebut master page, halaman

tersebut mempunyai halaman percabangan yang disebut slave page ( halaman pendukung )

dan jika dipilih akan menjadi halaman kedua, begitu seterusnya.

Gambar 2.5 Struktur Navigasi Hirarki

2.8.3 Struktur Navigasi Non Linear

Struktur navigasi non linier ( tidak terurut ) merupakan pengembangan dari struktur

navigasi linier, hanya saja pada struktur ini diperkenankan untuk membuat percabangan.

Percabangan pada struktur non linier berbeda dengan percabangan pada struktur hirarki, pada

struktur ini kedudukan semua page sama, sehingga tidak dikenal adanya master atau slave

page.

Gambar 2.6 Struktur Navigasi Non Linear

2.8.4 Struktur Navigasi Campuran

Sttruktur navigasi campuran ( composite ) merupakan gabungan dari struktur

sebelumnya dan disebut juga struktur navigasi bebas, maksudnya adalah jika suatu tampilan

membutuhkan percabangan maka dibuat percabangan. Struktur ini paling banyak digunakan

dalam pembuatan aplikasi multimedia.

Gambar 2.7 Struktur Navigasi Campuran

Diagram UML.

Diagram UML dibagi menjadi 8, diantaranya adalah :

1. Use Case Diagram.

Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah

sistem. Yang ditekankan adalah “apa” yang diperbuat sistem, dan bukan

“bagaimana”. Sebuah use case merepresentasikan sebuah interaksi antara aktor

dengan sistem.

2. Class Diagram.

Class adalah sebuah spesifikasi yang jika diinstansiasi akan menghasilkan sebuah

objek dan merupakan inti dari pengembangan dan desain berorientasi objek. Class

menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus menawarkan

layanan untuk memanipulasi keadaan tersebut (metoda/fungsi). Class diagram

menggambarkan struktur dan deskripsi class, package dan objek beserta hubungan

satu sama lain seperti containment, pewarisan, asosiasi, dan lain-lain.

3. Statechart Diagram.

Statechart diagram menggambarkan transisi dan perubahan keadaan (dari satu state

ke state lainnya) suatu objek pada sistem sebagai akibat dari stimuli yang diterima.

Pada umumnya statechart diagram menggambarkan class tertentu (satu class dapat

memiliki lebih dari satu statechart diagram).

4. Activity Diagram.

Activity diagrams menggambarkan berbagai alir aktivitas dalam sistem yang sedang

dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi,

dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan

proses paralel yang mungkin terjadi pada beberapa eksekusi. Selain itu activity

diagram merupakan state diagram khusus, di mana sebagian besar state adalah

action dan sebagian besar transisi di-trigger oleh selesainya state sebelumnya

(internal processing). Oleh karena itu activity diagram tidak menggambarkan

behaviour internal sebuah sistem (dan interaksi antar subsistem) secara eksak, tetapi

lebih menggambarkan proses-proses dan jalur-jalur aktivitas dari level atas secara

umum.

5. Sequence Diagram.

Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar

sistem (termasuk pengguna, display, dan sebagainya) berupa message yang

digambarkan terhadap waktu. Sequence diagram terdiri atar dimensi vertikal

(waktu) dan dimensi horizontal (objek-objek yang terkait). Selain itu, sequence

diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-

langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan

output tertentu. Diawali dari apa yang men-trigger aktivitas tersebut, proses dan

perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan.

6. Collaboration Diagram.

Collaboration diagram juga menggambarkan interaksi antar objek seperti sequence

diagram, tetapi lebih menekankan pada peran masing-masing objek dan bukan pada

waktu penyampaian message. Setiap message memiliki sequence number, di mana

message dari level tertinggi memiliki nomor 1. Messages dari level yang sama

memiliki prefiks yang sama.

7. Component Diagram.

Component diagram menggambarkan struktur dan hubungan antar komponen

piranti lunak, termasuk ketergantungan (dependency) di antaranya. Komponen

piranti lunak adalah modul berisi code, baik berisi source code maupun binary code,

baik library maupun executable, baik yang muncul pada compile time, link time,

maupun run time. Umumnya komponen terbentuk dari beberapa class dan/atau

package, tapi dapat juga dari komponen-komponen yang lebih kecil. Komponen

dapat juga berupa interface, yaitu kumpulan layanan yang disediakan sebuah

komponen untuk komponen lain.

8. Deployment Diagram.

Deployment physical diagram menggambarkan detail bagaimana komponen di-

deploy dalam infrastruktur sistem, di mana komponen akan terletak (pada mesin,

server atau piranti keras apa), bagaimana kemampuan jaringan pada lokasi tersebut,

spesifikasi server, dan hal-hal lain yang bersifat fisikal . Sebuah node adalah server,

workstation, atau piranti keras lain yang digunakan untuk men-deploy komponen

dalam lingkungan sebenarnya. Hubungan antar node (misalnya TCP/IP) dan

requirement dapat juga didefinisikan dalam diagram ini.

Use Case Diagram

Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem.

Yang ditekankan adalah "apa" yang diperbuat sistem, dan bukan "bagaimana". Sebuah use

case merepresentasikan sebuah interaksi antara actor dengan sistem. Use case merupakan

sebuah pekerjaan tertentu, misalnya login ke sistem, meng-create sebuah daftar belanja, dan

sebagainya. Seorang / sebuah actor adalah sebuah entitas manusia atau mesin yang

berinteraksi dengan system untuk melakukan pekerjaan-pekerjaan tertentu.

Gambar 2.8 Use Case Diagram Use case diagram dapat sangat membantu menyusun requirement sebuah sistem,

mengkomunikasikan rancangan dengan klien, dan merancang test case untuk semua feature

yang ada pada sistem. Sebuah use case dapat menginclude fungsionalitas use case lain

sebagai bagian dari proses dalam dirinya. Secara umum diasumsikan bahwa use case yang di-

include akan dipanggil setiap kali use case yang meng-include dieksekusi secara normal.

Sebuah use case dapat di-include oleh lebih dari satu use case lain, sehingga duplikasi

fungsionalitas dapat dihindari dengan cara menarik keluar fungsionalitas yang common.

Sebuah use case juga dapat meng-extend use case lain dengan behaviour-nya sendiri.

Sementara hubungan generalisasi antar use case menunjukkan bahwa use case yang satu

merupakan spesialisasi dari yang lain.

Class Diagram

Class adalah sebuah spesifikasi yang jika diinstansiasi akan menghasilkan sebuah

objek dan merupakan inti dari pengembangan dan desain berorientasi objek. Class

menggambarkan keadaan ( atribut / property ) suatu sistem, sekaligus menawarkan layanan

untuk memanipulasi keadaan tersebut ( metoda / fungsi ). Class diagram menggambarkan

struktur dan deskripsi class, package dan objek beserta hubungan satu sama lain seperti

containment, pewarisan, asosiasi, dan lain-lain.

Class memiliki tiga area pokok :

1. Nama ( dan stereotype )

2. Atribut

3. Metoda

Atribut dan metoda dapat memiliki salah satu sifat berikut :

Gambar 2.9 Class Diagram

1. Private, tidak dapat dipanggil dari luar class yang bersangkutan.

2. Protected, hanya dapat dipanggil oleh class yang bersangkutan dan anak-anak yang

mewarisinya.

3. Public, dapat dipanggil oleh siapa saja.

Class dapat merupakan implementasi dari sebuah interface, yaitu class abstrak yang hanya

memiliki metoda. Interface tidak dapat langsung diinstansiasikan, tetapi harus

diimplementasikan dahulu menjadi sebuah class.

Activity Diagram

Activity diagrams menggambarkan berbagai alur aktivitas dalam sistem yang sedang

dirancang, bagaimana masing-masing alur berawal, decision yang mungkin terjadi dan

bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan contoh class

diagram, menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi.

Activity diagram merupakan state diagram khusus, dimana sebagian besar state adalah action

dan sebagian besar transisi di-trigger oleh selesainya state sebelumnya ( internal processing ).

Oleh karena itu activity diagram tidak menggambarkan behaviour internal sebuah sistem (

dan interaksi antar subsistem ) secara eksak, tetapi lebih menggambarkan proses-proses dan

jalur-jalur aktivitas dari level atas secara umum. Sebuah aktivitas dapat direalisasikan oleh

satu use case atau lebih. Aktivitas menggambarkan proses yang berjalan, sementara use case

menggambarkan bagaimana aktor menggunakan sistem untuk melakukan aktivitas.

Gambar 2.10 Activity Diagram

Sama seperti state, standar UML menggunakan segiempat dengan sudut membulat

untuk menggambarkan aktivitas. Decision digunakan untuk menggambarkan behaviour pada

kondisi tertentu. Untuk mengilustrasikan proses-proses parallel ( fork dan join ) digunakan

titik sinkronisasi yang dapat berupa titik, garis horizontal atau vertikal. Activity diagram

dapat dibagi menjadi beberapa object swimlane untuk menggambarkan objek mana yang

bertanggung jawab untuk aktivitas tertentu.

Sequence Diagram

Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar

sistem ( termasuk pengguna, display, dan sebagainya ) berupa message yang digambarkan

terhadap waktu. Sequence diagram terdiri antar dimensi vertikal ( waktu ) dan dimensi

horizontal ( objek-objek yang terkait ). Sequence diagram biasa digunakan untuk

menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons

dari sebuah event untuk menghasilkan output tertentu. Diawali dari apa yang men-trigger

aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa

yang dihasilkan. Masing-masing objek, termasuk aktor, memiliki lifeline vertikal.

Gambar 2.11 Sequence Diagram Message digambarkan sebagai garis berpanah dari satu objek ke objek lainnya. Pada

fase desain berikutnya, message akan dipetakan menjadi operasi / metoda dari class.

Activation bar menunjukkan lamanya eksekusi sebuah proses, biasanya diawali dengan

diterimanya sebuah message. Untuk objek-objek yang memiliki sifat khusus, standar UML

mendefinisikan icon khusus untuk objek boundary, controller dan persistent entity.

METODE PENELITIAN

PEMBAHASAN

Aplikasi pembelajaran berbasis mobile ini terdiri dari empat pembelajaran yang

berbentuk kuis, yaitu kuis HTML, CSS, PHP dan MySQl. Pembelajaran berbasis mobile ini

dibuat agar memudahkan orang-orang dalam mempelajari pembelajaran tersebut.

Dalam pembangunan suatu program ada langkah-langkah yang harus diikuti agar

pembangunan program tersebut menjadi terarah. Langkah-langkah tersebut terdiri dari

struktur navigasi, perancangan program/Storyboard, perancangan aplikasi, cara menggunakan

aplikasi, uji coba dan implementasi.

Perancangan Navigasi

Rancangan navigasi merupakan hal yang diperlukan di dalam proses pembuatan

aplikasi yang terdapat di dalamsuatu aplikasi mobile. Perancangan navigasi digunakan untuk

mengkomunikasikan kebutuhan user kedalam suatu desain untuk diisi dengan fitur-fitur

aplikasi mobile. Sistem navigasi merupakan rancangan gambaran hubungan dan rantai kerja

dari beberapa kerja atau beberapa area yang berbeda dan dapat membantu mengorganisasikan

seluruh halaman dalam pemberian hyperlink.

Gambar 1. Sistem Navigasi User

Struktur navigasi non linier ( tidak terurut ) merupakan pengembangan dari struktur

navigasi linier, hanya saja pada struktur ini diperkenankan untuk membuat percabangan.

Percabangan pada struktur non linier berbeda dengan percabangan pada struktur hirarki, pada

struktur ini kedudukan semua page sama, sehingga tidak dikenal adanya master atau slave

page.

Sistem Navigasi Admin

Struktur navigasi diatas merupakan struktur navigasi campuran (composite). Struktur

navigasi composite merupakan gabungan dari struktur sebelumnya dan disebut juga struktur

navigasi bebas, maksudnya adalah jika suatu tampilan membutuhkan percabangan maka

dibuat percabangan

Perancangan Storyboard

Dalam perancangan suatu program, diperlukan storyboard yang akan dijadikan

pedoman dalam pembuatan program tersebut. Storyboard adalah pemetaan elemen-elemen

multimedia dalam setiap layar program multimedia. Storyboard perlu mengandung nama

program atau modul, nomor layar atau halaman, interaksi dan percabangan, gambar sketsa

layar atau halaman beserta rincian obyek-obyek yang ada pada layar tersebut, misalnya teks,

animasi, narasi, dan atribut pada masing-masing obyek beserta nilainya.

Storyboard User

Storyboard Admin

Perancangan Sistem

Perancangan sistem untuk membangun aplikasi ini menggunakan UML yang

digunakan untuk merancang model sebuah sistem. Perancangan model sistem pada situs web

ini digambarkan melalui beberapa diagram seperti :

Use Case Diagram

Pada diagram ini terdapat dua aktor yang merupakan pengguna sistem, yaitu user dan

administrator. User memiliki use case, yaitu hanya dapat mengakses soal kuis.

Aktor administrator memiliki use case untuk memelihara, mengelola kejadian yang

terjadi selama sistem berlangsung. Selain itu aktor administrator juga memiliki use case

menambah user dan soal, mengubah user dan soal, menghapus user dan soal.

Use Case Diagram

Activity Diagram

Diagram activity administrator menggambarkan bahwa seorang administrator wajib

melakukan otentikasi dengan melakukan login terlebih dahulu sebelum dapat mengelola data,

apabila admin melakukan validasi dengan benar maka administrator dapat mengakses menu-

menu yang ada untuk mengelola segala yang berkaitan dengan kebutuhan yg diperlukan disis

klient / Aplikasi. Setelah selesai, administrator harus keluar dengan melakukan logout.

Activity Diagram Administrator

Pada diagram activity user dibawah ini, apabila aplikasi ini di buka maka akan

dihadapkan pada menu utama yang terdiri dari Begin to Learn, About dan Exit. Jika memilih

Begin to Learn maka terdapat 4 pilihan jenis kuis. Pada pilihan tersebut dapat memulai

melakukan kuis hingga mendapatkan hasil. Disini bisa melakukan kuis kembali karena

terdapat tombol back atau apabila user ingin mengakhiri kuis dapat memilih tombol exit.

Activity Diagram User

Perancangan Database

Perancangan database merupakan suatu perancangan yang bertujuan untuk

menggambarkan struktur dan bagian-bagian dari suatu database. Dengan membuat rancangan

database, relasi antar tabel juga akan terlihat. Dibawah ini merupakan rancangan database di

dalam sistem pembelajaran interktif. Secara umum database aplikasi ini memiliki 2 tabel

yang masing-masing tabelnya memiliki field tersendiri. Ke-2 tabel itu antara lain:

Tabel admin

Tabel ini digunakan untuk menyimpan username dan password yang digunakan untuk

masuk kedalam halaman admin. Baik berstatus admin maupun user. Field-field yang

dimiliki sebagai berikut :

Tabel Admin

Tabel soal

Tabel yang digunakan untuk menyimpan sejumlah soal kuis berikut jawaban soal

tersebut. Field-field yang digunakan sebagai berikut

Tabel Soal

Field Type Null Extras

Id Int(11) No Auto_in

crement

Username Varchar(30) No

Password

Varchar(10)

No

Field Type Null Extras

id Int(11) No Auto_increment

soal Text No

Pilihan_a Varchar(100) No

Pilihan_b Varchar(100) No

Pilihan_c Varchar(100) No

Jawaban Varchar(1) No

Type soal Varchar(6) No

Koneksi Database.

Pada aplikasi pembelajaran interaktif ini menggunakan database MySQL. Untuk

berkomunikasi dengan server ada beberapa cara yang dapat kita tempuh yaitu melalui Http

connection atau Native Socket Connection. Pada aplikasi ini fokus menggunakan Http

Connection untuk menghubungkan aplikasi android dengan server. Dengan Http Connection

artinya kita harus mempunyai web server. Dalam hal ini umunya Apache dan untuk format

data standar antara aplikasi android dan server biasnya menggunakan XML, JSON. Pada

aplikasi ini penulis menggunakan JSON. Berikut potongan konek.php yg berfungsi untuk

koneksi database dan konekhtml.php mengubah data menjadi format JSON.

Pada script diatas bertujan untuk koneksi database MySQL yang datanya di konversi

menjadi format JSON sebagai penghubung antar platform agar dapat dibaca. Pada gambar

dibawah adalah bentuk format JSON dari data yang berada dalam database setelah

dikonversi. Pada format inilah yang diakses oleh aplikasi Pembelajaran Interaktif. Berikut ini

adalah hasil dari konversi data dalam bentuk JSON :

<?php $conn = @mysql_connect('localhost', 'root', ''); if (!$conn) { die('Gagal melakukan koneksi ke server: ' . mysql_error()); } $db = mysql_select_db('droid', $conn); if (!$db) { die('Gagal memilih database: ' . mysql_error()); } ?>

<?php include 'konek.php'; $sql = mysql_query("select * from quiz where quiz = 'html'"); while($row=mysql_fetch_assoc($sql)) $output[]=$row; print(json_encode($output)); mysql_close(); ?>

Tampilan JSON Di Server

Uji Coba.

Setelah selesai membuat tampilan, kode koneksi database dan mengubah dalam forma

JSON dalam Aplikasi pembelajaran interktif ini, berikut adalah langkah – langkah userannya:

Install aplikasi Pembelajaran Interaktif pada ponsel anda.

1. Memilih dan membuka aplikasi tersebut yang telah diinstal pada ponsel anda.

Gambar 3.27 Tampilan Menu Handphone

2. Setelah dipilih maka tampilan pertama yang akan muncul ialah :

Gambar 3.28 Tampilan Menu Utama

3. Jika User memilih menu Begin to Learn pada layar menu utama, tampilan yang

muncul adalah sebagai berikut :

Gambar 3.29 Tampilan Menu Pilih Kuis

Pada tampilan ini user dapat memilih kuis yang ingin dipelajari. Pada aplikasi ini

terdapat 4 jenis kuis yaitu kuis HTML, CSS, PHP dan MySQL.

4. Jika User memilih menu kuis salah satu kuis, misalnya HTML pada layar menu kuis,

tampilan yang muncul adalah sebagai berikut :

Gambar 3.30 Tampilan Kuis HTML

Pada tampilan kuis yang user pilih terdapat soal-soal kuis, pada aplikasi ini masing-

masing kuis terdapat 10 soal yang di paging.

5. Jika User telah menyelesaikan semua soal akan menuju halaman hasil kuis yang

terdapat nilai user dan laporan sukses atau tidaknya user dalam mengerjakan kuis

tersebut, tampilan yang muncul adalah sebagai berikut :

Gambar 3.31 Tampilan Hasil Kuis

Pada tampilan hasil kuis ini terdapat button back untuk kembali ke halaman menu

kuis agar dapat user mencoba kuis kembali dan juga terdapat button exit untuk keluar

aplikasi.

6. Jika User memilih menu About pada layar menu utama, tampilan yang muncul adalah

sebagai berikut :

Gambar 3.32 Tampilan Menu About

PENUTUP

Setelah menyelesaikan proses pembuatan Sistem pembelajaran Interktif Berbasis

Mobile dengan menggunakan Android, maka penulis mengambil kesimpulan bahwa telah

berhasil mengimplementasikan web service pada studi kasus pembelajaran interaktif

berbasisi Android. Selain itu juga dapat mengetahui bagaimana membangun sebuah aplikasi

untuk perangkat komunikasi bergerak ini dengan system operasi baru Android.

Dalam perancangan aplikasi ini disadari masih banyak memiliki kekurangan. Maka dari

itu perlu dikembangkan lagi misalnya dengan ditambahkan materi-materi kuis sebelum

mengerjakan soal, countdown timer (waktu) dalam mengerjakan soal kuis, soal-soal lebih

diperbanyak dan juga perlu ditambah efek supaya tampilan dalam aplikasi ini menjadi lebih

menarik.

Selain itu lebaih baik juga perangkat lunak yang digunakan untuk membangun

aplikasi ini, diharapkan dijalankan pada spesifikasi komputer yang cukup memadai (System

Requirementsi yang telah ditentukan pada software).

DAFTAR PUSTAKA Haseman, Chris.2008.Android Essential.Heidelberg:Appres.

Hashimi, Sayed Y and Satya Komatineni.2009.Pro Android.USA:Appres.

Meier, Reto. 2009. Professional Android Application Development. Indianapolis:Wiley

Publishing Inc.

Murphy, Mark L.2008.The Busy Coder’s Guide to Android Development.USA:Commonsware.

Rogers, Rick and John Lombardo.2009. Android Application Development.USA: O'Reilly

Media, Inc.

URL : http://developer.android.com Tanggal Akses : 22 Juni 2011.

URL : http://diskusiandroid.com Tanggal Akses : 10 Juli 2011