Lingkungan Pemrograman Seting Canvas Apps Facebook Plug In Kuisioner Aplikasi

BAB IV IMPLEMENTASI PERANGKAT LUNAK

Pada bab ini akan membahas tentang implementasi program dari hasil analisa dan perancangan sistem pada bab III, serta bagaimana cara sistem tersebut dijalankan.

4.1 Lingkungan Pemrograman

Perancangan aplikasi belajar sambil bermain dan simulasi pasangan basa DNA dikembangkan dalam lingkungan pemrograman dengan spesifikasi teknis sebagai berikut ini : 1. Windows XP 3 Profesional sebagai sistem operasi. 2. Adobe Flash Player CS5 pembuatan desain Flash. 3. Microsoft Visio 2010 untuk pembuatan diagram dan flowchart aplikasi. 4. XAMPP sebagai web server tool local. 5. Facebook JavaScript dan PHP SDK. 6. Adobe Dreamweaver CS4 sebagai text editor program. 7. GIT Tools sebagai version control apps pada host server.

4.2 Implementasi Proses

Pada bagian bab ini membahas mengenai implementasi proses untuk aplikasi yang dibuat ada berbagai macam implementasi proses yang akan dibahas satu persatu mengenai implementasinya. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

4.2.1 Implementasi Proses Pembuatan Apps Facebook

Aplikasi ini dibuat untuk terhubung dengan Facebook sebagai impelementasinya, oleh karena itu pembahasan mengenai pembuatan Facebook Apps karena tahap ini merupakan imlementasi utama. Simak pada Gambar 4.1. Gambar 4.1 Apps Dna Simulation Pada proses pembuatan mencakup pengisian data – data yang diperlukan seperti yang dibahas pada bab III sebelumnya.

4.2.2 Implementasi Proses Desain Flash player

Adobe flash merupakan tools yang digunakan untuk membuat aplikasi ini. Di dalam Adobe Flash terdapat berbagai macam pilihan pembuatan project. Untuk studi kasus kali ini, akan digunakan flash project dengan Actionscript AS3 3.0 sebagai tipe file projectnya. Untuk memulainya, buka aplikasi Adobe Flash dan memilih Create new Actionscript 3.0 sebagai file projectnya. Pada Gambar 4.2 di bawah ini adalah Gambar home project adobe flash. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.2 Home project adobe Flash. Setelah create file project selesai dilakukan, maka selanjutnya adalah memilih objek yang terdapat didalam tampilan awal pada Adobe Flash. Kemudian pilih frame kosong dan beri warna baground menggunakan shape tool dengan warna hijau kemudian beri nama layer baground seperti Gambar 4.3 di bawah ini. Gambar 4.3 Desain Baground Flash. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Setelah melakukan desain baground barulah menginjak pada animasi tombol dan animasi shape tween serta memasukan action script di dalamnya sehingga terbentuk seperti dilihat pada Gambar 4.4 berikut. Gambar 4.4 Lembar Kerja Layer Dan Frame Tombol yang digunakan pada animasi yang dibuat merupakan tombol perintah untuk menuju ke frame – frame selanjutnya yang menjadi tujuan halaman. seperti ini tombol perintah yang berisi action script seperti berikut. on release {gotoAndPlay59;} Ketika di tekan akan menunjuk ke halaman 59 begitupun tombol tombol yang lain memiliki navigasi sendiri - sendiri. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

4.2.3 Implementasi Proses Desain Kuis DNA

Gambar 4.5 Preloading kuis DNA Pada implementasi kuis, desain awal selamat datang pada preloading berfungsi melakukan load pada file xml yang dibuat berikut kodenya. Gambar 4.6 Action Scrip load file xml Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Pada action script load diletakkan pada layer yang berbeda sehingga tidak menggangu layer – layer desain, load file terdapat pada perintah myData.load“direktori.xml”;. Berikut isi file xml. Gambar 4.7 File XML Unsur Element inti adalah quiz quiz A memiliki title dan satu set items. items - jamak - berisi satu atau lebih item item Sebuah terdiri dari 1 question dan 2 atau lebih s answer. question harus di inisialisialisasikan sebelumanswer s. Jawaban yang benar ditunjukkan oleh atribut: benar = y. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Pada gambar 4.7 item. Dimulai dengan tag item dan diakhiri dengan item tag. Untuk menambahkan pertanyaan, hanya menambahkan copy ganti elemen item dan mengubah konten. Kemudian dapat mengubah pertanyaan dan jawaban. Jawaban yang benar harus memiliki atribut: benar = y. Misalnya, di atas, jawaban ke-4 adalah jawaban yang benar. Harus ada hanya satu jawaban yang benar per item. Kemudian membuat desain Flash player pada tag – tag tersebut serta menetapkan variable yang terbentuk di tiap elemen nya. Gambar 4.8 Elemen Pertanyaan dan Jawaban Pada desain Gambar 4.8 diatas terdapat 3 tag element yang merupakan variable yang ditetapkan untuk proses lebih lanjut, diatas terdapat tag nomor yang ditetapkan sebagai currentQuestionNumber pada label properties-option pada label variable. Kemudian pada tulisan pertanyaan biru tersebut merupakan tag pertanyaan question dan pada element jawaban answer1-4 Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.9 Menetapkan Variable Nomor Selanjutnya adalah menetapkan elemen – elemen yang lain seperti gambar diatas. Lihat pada Gambar 4.10 struktur elemen yang terbentuk. Gambar 4.10 Struktur Elemen Quis Kemudian menentukan pernyataan benar dan pernyataan salah, pada bagian ini desain membuat layer baru dan frame baru mengikuti kuis yang ditampilkan terlebih dahulu yang diberi tulisan “anda benar” dan “anda salah” simak pada Gambar 4.11 Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.11 Layer Animasi Quiz Dan berikut action scrip dari penetapan pertanyaan benar, variable yang ditetapkan ialah question number nomor pertanyaan yang akan tetap bertambah meskipun pertanyaan salah atau benar akan tetapi diselingi oleh variable yang ditetapkan sebagai pertanyaan benar answer correcly, untuk lebih jelas simak pada script di bawah ini. currentQuestionNumber++; numOfQuestionsAnsweredCorrectly++;pertanyaan Benar gotoAndStopShowQuiz; currentQuestionNumber++; numOfQuestionsAnsweredIncorrectly++;pernyataan Salah gotoAndStopShowQuiz; dari script diatas mengisi data number untuk lanjut ke pertanyaan selanjutnya dan numOfQuestionAnswered mengisi data untuk nantinya di tampilkan pada hasil akhir result yang akan menampilkan skor, lihat script berikut. userScore=numOfQuestionsAnsweredCorrectly100 Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. numOfQuestionsAnsweredIncorrectly+numOfQuestionsAnsweredCorre ctly stop; Skor pengguna akan ditampilkan dengan variable userScore yang berisi nomor pertanyaan benar 100 jumlah dari pertanyaan benar + pertanyaan salah lihat desain pada Gambar 4.12 mengenai gambar dan lihat table property- variable. Gambar 4.12 Result Score

4.2.4 Implementasi Desain Simulasi Pasangan Basa

Pada implementasi desain simulasi pasangan basa DNA ini merupakan penerapan proses replikasi dari pasangan basa yang terdiri dari Adenina, Guanina, Citosina, Timina yang dimana simulasinya akan diterapkan untuk melengkapi aplikasi agar lebih terlihat menarik lihat pada Gambar 4.13. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Terdapat struktur – struktur dan sedikit wacana mengenai penerapanya pada saat memasuki aplikasi sehingga mereka yang menjalankan akan diberi petunjuk untuk memasuki aplikasinya. Gambar 4.13 Interface Pasangan basa Gambar 4.14 Halaman Petunjuk.

4.2.5 Implementasi Komentar Facebook

Pada halaman ini adalah halaman komentar posting dimana untuk komentar Facebook bagi pengguna siapa saja yang memiliki akun Facebook dan juga telah menginstal aplikasi DNA ini, demi penunjang Platform Facebook yang dibuat hal ini adalah sebagai salah satu penerapan dan hal utama dalam Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. mengembangkan dan menerapkan Platform, lihat pada Gambar 4.15 pada halaman selanjutnya. Gambar 4.15 Posting Komentar Aplikasi Pada gambar diatas adalah posting komentar yang diambil dari class Facebook Javascipt SDK yang telah di upload oleh pihak Facebook sehingga tidak perlu mendownload untuk diimplementasikan pada aplikasi, diterapkan pada header, berikut script implementasinya. script functiond, s, id { var js, fjs = d.getElementsByTagNames[0]; if d.getElementByIdid return; js = d.createElements; js.id = id; js.src = connect.facebook.netid_IDall.jsxfbml=1appId=269864056441813 ; fjs.parentNode.insertBeforejs, fjs; }document, script, facebook-jssdk;script script Pada script di atas yang sudah di load sdk melewati element connect.facebook.netid dimana element tersebut memanggil parameter fbml yang telah di deklarasikan pada file javasript dan appId=merupakan id aplikasi yang Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. dibuat sebelumnya, berikut ini script yang memanggil Facebook javascript sdk document, script, facebook-jssdk;, dan pemanggilanya terletak pada file lain yang diterapkan pada file kometar.php menggunakan class”fb-comment” yang sudah di buat oleh pihak Facebook.inc dan tinggal melakukan implementasi terhadap situs yang dibuat menggunakan HTML bukan FBML karena FBML telah dimasukkan pada halaman – halaman class sdknya masing - masing. div class=fb-comments data-href=http:apps.facebook.comdnakuselalu data-num-posts=5 data-width=570div Dan halaman ini melakukan pemangilan file header. ?php include_once header.php;? 4.2.6 Implementasi Undang Teman Undang teman adalah fitur social untuk memperbanyak pengunjung pada aplikasi yang dibuat, fitur ini adalah fitur yang dianjurkan oleh platform Facebook, script pada undang teman sama halnya dengan fitur komentar yang harus meload JavaScript Sdknya untuk class fiturnya, berikut scrip untuk komentarnya. Gambar 4.16 Script Undang Teman Facebook Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Pada script undang teman diatas merupakan fitur app request yang telah ditetapkan oleh pihak Facebook, akan tetapi diwajibkan memasukan id apps untuk menginisialisasi aplikasinya yang akan dimunculkan kepada teman – teman yang di undang lihat pada Gambar 4.17 fitur undang teman. Gambar 4.17 Undang Teman Facebook Apps

4.2.7 Implementasi Halaman Utama

Pada implementasinya halaman utama dari apps pembelajaran DNA ini adalah halaman yang sederhana karena hanya memiliki tombol navigasi yang tidak begitu banyak. Akan tetapi desain sederhana mendukung dengan fungsinya sebagai pembelajaran yang sesuai dengan kebutuhan pembelajaran. Facebook dengan fitur sosialnya dan yang terkandung didalamnya, halaman utama terdiri atas like box pada halaman penggemar atau yang biasa disebut fan page yang bisa terhubung dengan halaman penggemar untuk bersosialisasi dan juga seperti yang di jelaskan sebelumnya yaitu memiliki fitur undang teman dan fitur komentar, lihat pada Gambar 4.18 halaman utama. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.18 Halaman Utama Apps Gambar 4.19 Like Box Itulah implementasi dari halaman awal apps Pembelajaran yang diterapkan pada Facebook Platform , likebox terletak pada bagian bawah aplikasi padasaat mouse indicator mengarah ke bagian bawah aplikasi. Untuk script yang di hasilkan pada halaman utama seperti Gambar 4.20 pada halaman selanjutnya. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.20 Halaman Utama Dan untuk meletakkan file flash pada halaman situs aplikasi menggunakan HTML dengan format tag param lihat pada Gambar 4.21 berikut ini. Gambar 4.21 Insert Flash halaman utama Terdapat juga button undang teman lihat pada Gambar 4.22 Gambar 4.22 Button Undang Teman Halaman Utama Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Pada Gambar 4.22 memanggil file all.js memanggil fitur – fitur API dari Facebook, terdapat dua opsi pilihan untuk mengundang teman yaitu dengan memasukan id dari teman atau pilihan multi Friend selector dimana teman – teman yang akan di undang , menampakkan daftarnya pada daftar teman pengguna.

4.3 Upload File Menggunakan Git

Seperti yang dijelaskan sebelumnya upload file menggunakan Git, Git merupakan sebuah version control untuk mengakses file di direktori lain, Git digunakan karena memiliki keuntungan yang signifikan yaitu kecepatan akses dari perubahan kode untuk direktori lokal ke direktori hosting. Gambar 4.23 Git GUI Gambar 4.24 Git Konsole Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

4.3.1 Penerapan Git Dalam Aplikasi

Aplikasi yang dibuat adalah aplikasi yang diletakkan di server localhost dengan nama folder lively-latosha berasal dari nama app lively- latosha.pagodabox.com sebelumnya yang dibahas mengenai apps di apps storage, lively-latosha folder ini dihasilkan dari hasil remote dan clone apps setelah dibuat pada hosting server layaknya public_host pada hosting server atau htdocs pada localhost. Sebelum melakukan remote dan clone aplikasi, dilakukan terlebih dahulu adalah membuat id_rsa.pub atau biasa disebut public_key ssh, tuliskan command pada Git console lihat pada Gambar 4.25 berikut. ssh-keygen –t rsa –f id_rsa Gambar 4.25 Membuat Key Id_RSA Kemudian isikan password yang sesuai lalu kemudian file yang dibuat akan Nampak di direktore yang diakses yaitu c:document and settingayam.sshid_rsa. Lihat pada Gambar 4.26 Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.26 Direktori Id_RSA Kode inti atau root pada id_rsa.pub tersebut yang digunakan untuk mengakses aplikasi dari lokal ke file host. Buka file id_rsa.pub dengan Notepad lalu integrasikan dengan apps yang dibuat pada hostingan file di apps storage. Lihat pada Gambar 4.27 pada Pagodabox. Gambar 4.27 Add SSH Key Untuk APPS Yang Dibuat Key dibuat kemudian perizinan akses aplikasi menggunakan password public key ssh kemudian lakukan clone terhadap aplikasi dengan mengetik git clone githost:nama-aplikasi.git –o directory simak pada Gambar 4.28 Git clone Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.28 Duplikat Direktory Clone Lakukan cloning pada apps ke dalam direktori lokal, yang terletak pada htdocs –xampp, pada direktori tersebut terdapat file apps bernama lively-latosha folder dan folder ini merupakan tempat apps akan dikembangkan. Diwajibkan melakukan initialize pada folder yang dikembangkan untuk keperluan perubahan kode dalam aplikasi tersebut. Lihat pada Gambar 4.29. Gambar 4.29 Git Initialize Pada kasus diatas folder lively-latosha sudah ter inisialisasi oleh git dan git membentuk folder baru bernama .git didalam folder lively-latosha terdapat folder hidden bahwa folder lively-latosha telah terinisialisasi. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Push adalah perintah untuk melakukan dorongan kepada aplikasi ke dalam apps host storage tetapi sebelumnya diwajibkan melakukan commit agar perubahan kode dapat terlacak. Gambar 4.30 Git Commit Terdapat tulisan pada Gambar 4.30 menyatakan bahwa working directory clean artinya tidak ada perubahan kode yang dilakukan. Gambar 4.31 Pushing Git Pushing dilakukan untuk merubah kode pada apps host untuk disamakan dengan kode pada file lokal pengembang. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

4.4 Seting Canvas Apps Facebook

Aplikasi akan dinikmati di Facebook melalui setingan canvas app dimuat pada Facebook developer pada https:developers.facebook.comapps simak pada Gambar 4.32 Gambar 4.32 Canvas URL Alamat aplikasi yang dibuat memuat url yang diterapkan pada canvas url dan appdomain sehingga apps dapat dibuka melalui Facebook pada http:apps.facebook.comdnakuselalu url appsnya dengan namespace yang dibuat sebelumnya.

4.5 Plug In Kuisioner Aplikasi

Pada aplikasi ini merupakan aplikasi pembelajaran bagi penyimak materi dan siswa yang membutuhkan, akan tetapi pada tahap ini sebagai pihak pengembang berusaha sebaik-baiknya untuk membuat apa yang menjadi kenyamaan bagi para penyimak, oleh karena itu modul untuk menyaring data dari pihak penyimak dibutuhkan oleh karena itu aplikasi data kuesioner dibuat, simak pada Gambar 4.33. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.33 Kuisioner Aplikasi kuisioner ini merupakan aplikasi plug-in yang tersedia untuk umum dalam pembahasanya mengenai pendataan secara online. Mengenai pembuatan kuisioner untuk diterapkan pada fans-page Facebook menggunakan Popup Java Script seperti berikut. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. script type=textjavascript function myPopup2 { window.open https:www.facebook.compembelajarandnaapp_208195102528120, myWindow, top=10, left=10, width=600, height=800, location=1,status=1,scrollbars=1 } script Untuk hasil dari respon pendataan akan tersimpan pada link plug-in kuesioner pada alamat dimana kuisioner diletakkan pada alamat http:soorvey.commyforms seperti pada Gambar 4.34. Gambar 4.34 Hasil Respon Dan untuk hasil berupa grafik seperti pada Gambar 4.35 di bawah ini. Gambar 4.35 Hasil Kuisioner Grafik Karena plug-in survey Facebook aplikasi berbayar maka penulis mencari alternatif pada server yang lebih memungkinkan, dalam kasus ini penulis memakai server kuisioner dengan url: http:soorvey.com. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

BAB V UJI COBA DAN EVALUASI PROGRAM

Pada bab ini membahas tentang ujicoba dan evaluasi program yang menerangkan bagaimana jalannya program secara detail dan akan dijelaskan pada sub bab di bawah ini.

5.1 Uji Coba Sistem

Pada bagian ini akan dijelaskan mengenai proses uji coba dari aplikasi yang telah dibuat berdasarkan dari desain sistem yang telah dijelaskan sebelumnya. Uji coba ini dilakukan untuk melihat dari aplikasi yang telah dibuat sesuai dengan yang diharapkan, mulai dari akses halaman utama, ujicoba interaksi flash player, dan sebagainya uji coba yang akan dijalankan adalah sebagai berikut.

5.2 Uji Coba Akses Halaman Utama

Pada halaman utama ini terdapat beberapa menu link dan bukan termasuk link dari pihak Facebook yaitu link Wacana DNA, Pasangan Basa, Kuis, Komentar, Undang Teman, Like Box, dan click untuk lanjut. Berikut ini tampilan dari halaman utama seperti pada Gambar 5.1 di bawah ini. Gambar 5.1 Uji Coba Akses Halaman Utama Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.