35

Transkripsi

1 3. BAB III ANALISIS DAN PERANCANGAN 3.1 Analisis Sistem Analisis atau bisa juga disebut analisis sistem (system analysis) dapat didefinisikan sebagai penguraian suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasi dan mengevaluasi permasalahan-permasalahan, kesempatan-kesempatan, hambatanhambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikannya. Sistem pembelajaran yang didapatkan saat ini di Fakultas Ilmu Komputer Universitas Mercu Buana Jakarta belum memanfaatkan media pembelajaran dengan maksimal. Hal ini dapat dilihat dari belum tersedianya pembelajaran berbasis web yang dilengkapi dengan animasi dan latihan soal. Kemampuan daya serap tiap-tiap mahasiswa dalam menerima materi yang diberikan oleh dosen berbeda-beda, ada yang cepat dan ada yang lambat. Bagi mahasiswa yang daya serapnya lambat dalam menerima materi, diperlukan proses pembelajaran yang berulang-ulang, tahap demi tahap sampai mahasiswa tersebut paham. Kendala yang dihadapi oleh mahasiswa maupun dosen adalah waktu untuk proses belajar mengajar di kelas sangatlah terbatas. Solusi untuk permasalahan di atas adalah media pembelajaran dengan memanfaatkan teknologi informasi yang bisa diakses dimana saja dan kapan saja. Ada beberapa program yang bisa digunakan sebagai media pembelajaran tersebut yaitu menggunakan program visual basic, adobe flash atau web base. Penulis tertarik untuk mengembangkan aplikasi berbasis web dengan memanfaatkan animasi dan penambahan soal-soal dalam bentuk pilihan ganda yang ditampilkan secara acak. Dengan animasi, materi yang disampaikan ditampilkan secara stepby-step dan latihan soal berganda ditampilan secara acak sehingga tidak akan muncul urutan-urutan pertanyaan yang sama dengan sebelumnya. 35

2 Perancangan Pemodelan Sistem Perancangan pemodelan sistem bertujuan untuk merancang dari hasil analisa sebelumnya. Pada tahap perancangan ini disajikan pemodelan menggunakan UML yang meliputi use case diagram, activity diagram, class diagram dan sequence diagram Use Case Diagram Use case diagram merupakan diagram yang menggambarkan semua kasus (case) yang akan ditangani oleh perangkat lunak beserta actor atau pelakunya. Pembelajaran UPD Mempelajari Materi Mengerjakan Soal <<include>> mengecek jawaban <<system>> Result processor Mengubah Password <<include>> Mahasiswa Menginput Soal <<include>> <<include>> Mengupdate Soal <<include>> Login <<include>> Menghapus Soal <<include>> <<include>> Menginput Mahasiswa Menghapus Mahasiswa Gambar 3.1 Use Case Diagram Aplikasi Pembelajaran Ukuran Pemusatan Data

3 Use Case Description Use Case Description merupakan penjelasan lebih detail dari kasus (case) dari awal hingga akhirnya diperoleh sebuah output. Tabel 3.1 Use Case Description Login Nama use case Login Actor Mahasiswa & Deskripsi Use case ini menjelaskan tentang user login ke sistem untuk singkat menentukan hak akses - User memilih menu login - User mengisi form username, password dan captcha Skenario (security image) - Sistem melakukan validasi berdasarkan hak akses Pra kondisi User belum login Pasca kondisi User masuk ke dalam menu utama Tabel 3.2 Use Case Description Mempelajari Materi Nama use case Mempelajari materi Actor Mahasiswa Deskripsi Use case ini menjelaskan tentang Mahasiswa memilih materi singkat dan mempelajarinya - Mahasiswa memilih sub menu materi - Sistem menampilkan sub materi Skenario - Mahasiswa mempelajari dan menekan tombol video - Sistem menjalankan video Pra kondisi Sistem menampilkan halaman utama Pasca kondisi Sistem menampilkan materi sesuai menu yang dipilih Tabel 3.3 Use Case Description Mengerjakan Soal Nama use case Mengerjakan Soal Actor Mahasiswa Deskripsi singkat Skenario Pra kondisi Pasca kondisi Use case ini menjelaskan tentang kegiatan mahasiswa mengerjakan latihan soal pilihan berganda yang ditampilkan sistem secara acak - Mahasiswa harus sudah login ke sistem - Mahasiswa memilih menu latihan soal - Sistem menampilkan halaman soal secara acak yang ditampilkan satu persatu - Mahasiswa memilih jawaban dan mengklik next untuk melanjutkan ke soal berikutnya - Jika soal sudah habis, sistem menampilkan hasil nilai yang diperoleh Mahasiswa sudah login Mahasiswa memperoleh skor hasil pengerjaan latihan soal

4 38 Tabel 3.4 Use Case Description Mengubah Password Nama use case Actor Deskripsi singkat Pra kondisi Skenario Pasca kondisi Mengubah password Use case ini memungkinkan user mengubah password apabila perlu untuk diubah kemudian database mengupdate dengan password yang baru. User sudah memiliki username dan password - User harus sudah dalam keadaan login - User memilih menu ubah password - Sistem menampilkan halaman ubah password - User mengisi form ubah password - Sistem melakukan validasi password lama dengan password baru. Jika cocok maka update password baru ke dalam database Password yang baru sudah terupdate ke database Tabel 3.5 Use Case Description Menginput Soal Nama use case Actor Deskripsi singkat Skenario Pra kondisi Pasca kondisi Menginput Soal Use case ini menjelaskan tentang dosen menginput soal ke dalam database - harus sudah login ke sistem - memilih menu input soal - Sistem menampilkan form input soal - mengisi form input soal - Jika tombol save ditekan, tabel soal akan bertambah Tabel soal masih kosong atau sudah ada soal yang lama Tabel soal bertambah Tabel 3.6 Use Case Description Mengupdate Soal Nama use case Actor Deskripsi singkat Skenario Pra kondisi Pasca kondisi Mengupdate Soal Use case ini menjelaskan tentang dosen merevisi soal yang ditemukan adanya kesalahan ketika mengisi form inputan soal - harus sudah login ke sistem - memilih menu lihat soal - Sistem menampilkan seluruh soal - mengklik edit pada soal yang ingin dirubah - Sistem menampilkan form edit soal dengan isian form dari database - merevisi form isian kemudian mengklik save dan soal di update ke dalam database Ditemukan adanya kesalahan soal Soal sudah terupdate

5 39 Tabel 3.7 Use Case Description Menghapus Soal Nama use case Actor Deskripsi singkat Skenario Pra kondisi Pasca kondisi Menghapus Soal Use case ini menjelaskan tentang dosen menghapus soal yang sudah tidak diperlukan lagi - harus sudah login ke sistem - memilih menu lihat soal - Sistem menampilkan seluruh soal - mengklik hapus pada soal yang ingin dihapus - Sistem menampilkan notivikasi apakah yakin akan menghapus. Jika ditekan OK maka soal akan terhapus Soal masih ada Soal sudah terhapus Tabel 3.8 Use Case Description Menginput Mahasiswa Nama use case Actor Deskripsi singkat Skenario Pra kondisi Pasca kondisi Menginput Mahasiswa Use case ini menjelaskan tentang dosen menginput daftar mahasiwa untuk proses mengerjakan soal - harus sudah login ke sistem - memilih menu input mahasiswa - Sistem menampilkan form input mahasiswa - mengisi form input mahasiswa - Setelah tombol save diklik, tabel user akan bertambah dimana secara default sistem akan mengenali bahwa inputan user yang baru levelnya adalah 1 yang berarti levelnya mahasiswa Nama mahasiswa belum diinput Tabel user bertambah Tabel 3.9 Use Case Description Menghapus Mahasiswa Nama use case Actor Deskripsi singkat Skenario Pra kondisi Pasca kondisi Menghapus Mahasiswa Use case ini menjelaskan tentang dosen menghapus mahasiswa - harus sudah login ke sistem - memilih menu lihat daftar mahasiswa - Sistem menampilkan seluruh daftar mahasiswa - mengklik hapus pada mahasiswa yang ingin dihapus - Sistem menampilkan notivikasi apakah yakin akan menghapus. Jika ditekan OK maka mahasiswa tersebut akan terhapus Mahasiswa masih terdaftar Mahasiswa sudah terhapus

6 40 Tabel 3.10 Use Case Description Mengecek Jawaban Nama use case Actor Deskripsi singkat Skenario Pra kondisi Pasca kondisi Mengecek Jawaban Sistem Use case ini mencocokkan jawaban mahasiswa dengan jawaban yang terdapat pada database - Mahasiswa mengerjakan soal - Mahasiswa men-submit jawaban - Sistem mencocokkan jawaban user dengan jawaban yang ada di database - Sistem menampilkan skor penilaian Mahasiswa mengerjakan soal Mahasiswa mendapatkan nilai Activity Diagram Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana berakhir. Dalam penelitian ini terdapat beberapa activity diagram, diantaranya: Activity Diagram Login User Sistem Pilih menu login Tampilkan form login masukkan username, password & captcha Tidak valid valid Tampilkan halaman user Gambar 3.2 Activity Diagram Login Activity ini merupakan proses login bagi user mahasiswa maupun dosen untuk masuk ke sistem. Jika inputan user valid maka akan diarahkan ke halaman

7 41 yang sesuai dengan level user. Bila inputan user tidak valid maka sistem akan memanggil form login lagi Activity Diagram Mempelajari Materi Mahasiswa Sistem Memilih menu Materi Menampilkan Materi Mempelajari Materi Gambar 3.3 Activity Diagram Mempelajari Materi 4. Gambar di atas merupakan gambar activity diagram untuk use case mempelajari materi. Untuk mengakses halaman ini tidak diperlukan login terlebih dahulu, sehingga siapa saja bisa mengakses halaman ini. Dimulai dari user memilih menu materi yang sudah disediakan untuk selanjutnya dipelajari atau dibaca.

8 Activity Diagram Mengerjakan Soal Mahasiswa Sistem Login Tampilkan halaman Mahasiswa Pilih Menu Latihan Soal Ambil soal secara acak sebanyak 10 Pilih Jawaban Tampilkan soal submit cek jawaban tambahkan 0 utk jawab salah tambahkan 10 utk jawab benar [cek < 10] jumlah nilai [cek = 10] tampilkan nilai Gambar 3.4 Activity Diagram Mengerjakan Soal Activity di atas merupakan kegiatan mahasiswa mengerjakan soal. Sebelum mengakses halaman ini, mahasiswa diwajibkan untuk login terlebih dahulu. Jika berhasil login, maka akan diarahkan ke halaman mahasiswa. Mahasiswa memilih menu latihan soal. Sistem mengambil sepuluh soal dari tabel soal secara acak. Mahasiswa harus menyelesaikan seluruh soal yang disajikan kemudian mengklik submit. Sistem melakukan pencocokan antara jawaban actor dengan jawaban yang ada di tabel tb_soal. Apabila jawaban benar maka diberikan nilai 10 apabila salah maka diberikan nilai 0, begitu seterusnya dilakukan proses looping sampai mencapai soal ke-10. Kemudian sistem menampilkan jumlah nilai yang diperoleh.

9 Activity Diagram Menginput Soal Sistem Login Tampilkan halaman Pilih Menu Input soal Tampilkan form input Input soal Save Tambahkan ke tabel soal Gambar 3.5 Activity Diagram Menginput Soal Activity ini merupakan kegiatan dosen dalam menginput soal ke dalam tabel soal yang akan digunakan mahasiswa untuk mengerjakan latihan. Sebelum mengakses halaman ini, dosen diwajibkan untuk login terlebih dahulu. Jika berhasil login, maka akan diarahkan ke halaman dosen. memilih menu input soal. Sistem menampilkan form inputan soal kemudian dosen mengisi form inputan soal. mengklik save maka field isian form akan ditambahkan ke tabel soal.

10 Activity Diagram Mengupdate Soal Sistem Login Tampilkan halaman Pilih menu lihat soal Tampilkan halaman Lihat Soal Pilih edit Tampilkan form edit soal Edit soal Simpan Update ke tabel soal Gambar 3.6 Activity Diagram Mengupdate Soal Activity ini merupakan kegiatan dosen dalam merubah soal yang dilakukan jika ditemukan adanya kesalahan dalam menginput soal sehingga dosen tidak perlu menghapus dan menginput ulang soal tersebut. Sebelum mengakses halaman ini, dosen diwajibkan untuk login terlebih dahulu. Jika berhasil login, maka akan diarahkan ke halaman dosen. memilih menu lihat soal sehingga sistem menampilkan seluruh soal kemudian dosen memilih soal yang akan diganti. Sistem menampilkan soal yang terpilih dan dosen memperbaharui isian form edit soal. Jika dosen mengklik save maka akan dilakukan proses update ke tabel soal.

11 Activity Diagram Menghapus Soal Sistem Login Tampilkan halaman Pilih menu lihat soal Tampilkan halaman Soal Pilih hapus Hapus soal dari tabel soal Gambar 3.7 Activity Diagram Menghapus Soal Activity ini merupakan kegiatan dosen menghapus soal yang terdapat dalam tabel soal. Sebelum mengakses halaman ini, dosen diwajibkan untuk login terlebih dahulu. Jika berhasil login, maka akan diarahkan ke halaman dosen. memilih menu lihat soal kemudian sistem menampilkan seluruh soal. mengklik tombol hapus pada soal yang ingin dihapus selanjutnya sistem akan menghapus soal tersebut dari tabel soal.

12 Activity Diagram Menginput Mahasiswa Sistem Login Tampilkan halaman Pilih Menu Input Mahasiswa Tampilkan form input Mahasiswa Input Mahasiswa Save Tambahkan ke tabel user Gambar 3.8 Activity Diagram Menginput Mahasiswa Activity ini merupakan kegiatan dosen dalam menginput mahasiswa ke dalam tabel user. Sebelum mengakses halaman ini, dosen diwajibkan untuk login terlebih dahulu. Jika berhasil login, maka akan diarahkan ke halaman dosen. memilih menu input mahasiswa. Sistem menampilkan form inputan mahasiswa kemudian dosen mengisikannya ke dalam form. mengklik save dan field isian form akan ditambahkan ke tabel user.

13 Activity Diagram Menghapus Mahasiswa Sistem Login Tampilkan halaman Pilih Lihat mahasiswa Tampilkan daftar mahasiswa Pilih hapus Hapus mahasiswa dari tabel user Gambar 3.9 Activity Diagram Menghapus Mahasiswa Activity ini merupakan kegiatan dosen menghapus mahasiswa yang terdapat dalam tabel mahasiswa. Sebelum mengakses halaman ini, dosen diwajibkan untuk login terlebih dahulu. Jika berhasil login, maka akan diarahkan ke halaman dosen. memilih menu lihat mahasiswa kemudian sistem menampilkan seluruh nama mahasiswa. mengklik tombol hapus pada mahasiswa yang ingin dihapus selanjutnya sistem akan menghapus mahasiswa tersebut dari tabel user.

14 Activity Diagram Mengubah Password Sistem Login Tampilkan halaman Pilih menu ubah password Tampilkan form ubah password Input isian form Save Update ke tabel user Gambar 3.10 Activity Diagram Mengubah Password Activity ini merupakan kegiatan dosen mengubah passwordnya. Sebelum mengakses halaman ini, dosen diwajibkan untuk login terlebih dahulu. Jika berhasil login, maka akan diarahkan ke halaman dosen. memilih menu ubah password kemudian sistem menampilkan form ubah password. mengisi form ubah password. Klik save untuk menyimpan password yang baru dan sistem menyimpannya ke dalam tabel user.

15 Sequence Diagram Berikut sequence diagram pada sistem yang sedang dirancang Sequence Diagram Login Halaman Home Form Login Sec_Image User User klik login load form login buat sec_image tampilkan form input username, password, captcha tampilkan sec_image cek sec_image cek username & pass tampilkan halaman sesuai level cek level Gambar 3.11 Sequence Diagram Login Gambar di atas menerangkan hubungan antara actor mahasiswa maupun dosen dengan sistem pada saat proses login. Sistem membuat captcha (security image) dalam bentuk gambar kemudian di insert ke tabel tb_secimage dan ditampilkan ke dalam form login. Actor memasukkan username, password dan captcha. Sistem mencocokkan inputan actor. Apabila valid, maka sistem menampilkan halaman sesuai level actor. Apabila tidak sesuai sistem menampilkan form login lagi Sequence Diagram Logout Menu Logout User klik menu logout session destroy Gambar 3.12 Sequence Diagram Logout

16 50 Gambar 3.12 merupakan proses logout dari sistem. Jika user sudah login kemudian ingin keluar dari sistem maka klik menu logout. Sistem memastikan bahwa tidak ada lagi session yang terekam yaitu dengan menggunakan sistem destroy Sequence Diagram Mempelajari Materi Halaman Materi Video User klik menu materi tampilkan halaman materi klik tombol video jalankan video Gambar 3.13 Sequence Diagram Mempelajari Materi Gambar di atas menjelaskan ketika actor sedang mempelajari materi. Untuk mengakses halaman materi actor tidak diwajibkan login dahulu. Actor mengklik menu materi kemudian sistem menampilkan materi dan video yang sudah disertakan di dalamnya. Untuk menjalankan video actor mengklik tombol video.

17 Sequence Diagram Mengerjakan Soal Form Login Halaman Utama Halaman Latihan Soal Mahasiswa login validasi user muat halaman utama tampilkan halaman utama klik menu latihan ambil 10 soal acak kirim soal tampilkan soal kerjakan submit Loop cek jawaban [cek jwb <10] Tambah 0 jk jwb salah Tambah 10 jk jwb benar tampilkan jumlah nilai Gambar 3.14 Sequence Diagram Mengerjakan Soal Gambar di atas menerangkan ketika actor mengerjakan soal. Apabila actor berhasil login, maka bisa mengakses menu latihan soal. Actor menjawab soal dan mengklik submit. Sistem melakukan pencocokan antara jawaban actor dengan jawaban yang ada di tabel tb_soal kemudian sistem menampilkan hasil pengerjaan soal.

18 Sequence Diagram Menginput Soal Form Login Halaman Form Input Soal Soal login validasi user muat halaman dosen tampilkan halaman dosen pilih menu input soal tampilkan form muat form input soal isi form save input berhasil insert Gambar 3.15 Sequence Diagram Menginput Soal Gambar di atas menjelaskan ketika actor menginput soal. Apabila berhasil login, maka actor dapat mengakses form input soal. Actor mengisi form dan mengklik save kemudian sistem akan menambahkan soal tersebut ke dalam tabel tb_soal.

19 Sequence Diagram Mengupdate Soal Form Login Halaman Halaman Lihat Soal Form Edit Soal login validasi user muat halaman dosen tampilkan halaman dosen pilih menu lihat soal muat hal. lihat soal tampilkan hal. lihat soal pilih satu soal tampilkan soal terpilih edit soal save edit berhasil select * from soal tampilkan semua soal soal terpilih update Gambar 3.16 Sequence Diagram Mengupdate Soal Gambar di atas menjelaskan ketika actor mengubah soal. Apabila berhasil login, actor dapat mengakses halaman lihat soal. Di halaman ini semua soal ditampilkan dan actor dapat memilih soal mana yang akan diganti dengan cara mengklik tombol edit pada soal yang dipilih. Selanjutnya sistem menampilkan form edit soal dan actor merubah soal kemudian mengklik tombol save. Sistem menyimpannya ke dalam tabel tb_soal.

20 Sequence Diagram Menghapus Soal Form Login Halaman Halaman Lihat Soal Soal login validasi user muat halaman dosen tampilkan halaman dosen pilih menu lihat soal tampilkan hal. lihat soal muat hal. lihat soal select * from soal tampilkan * soal pilih satu soal hapus soal berhasil hapus soal Gambar 3.17 Sequence Diagram Menghapus Soal Gambar di atas menjelaskan ketika actor menghapus soal. Apabila berhasil login, actor dapat menghapus soal. Agar soal yang dimaksud bisa dihapus maka actor harus mengklik menu halaman lihat soal. Di halaman lihat soal semua soal ditampilkan dan actor dapat memilihnya untuk dihapus. Jika actor mengklik tombol hapus maka sistem akan menghapusnya dari tabel tb_soal.

21 Sequence Diagram Menginput Mahasiswa Form Login Halaman Form Mahasiswa User login validasi user muat halaman dosen tampilkan halaman dosen pilih menu input mahasiswa muat form mahasiswa tampilkan form isi form save input berhasil tambah Gambar 3.18 Sequence Diagram Menginput Mahasiswa Gambar di atas menjelaskan ketika actor menginput mahasiswa. Apabila berhasil login, actor dapat menginput mahasiswa. Actor mengklik menu input mahasiswa kemudian sistem menampilkan form input mahasiswa. Actor melengkapi isian form dan mengklik save maka sistem akan menambahkan user baru dengan level mahasiswa ke dalam tabel tb_mahasiswa.

22 Sequence Diagram Menghapus Mahasiswa Form Login Halaman Halaman Lihat Mahasiswa User login validasi user muat halaman dosen tampilkan halaman dosen pilih menu lihat mahasiswa muat hal. lihat mahasiswa select * mahasiswa tampilkan halaman view mahasiswa pilih satu mahasiswa hapus mahasiswa berhasil tampilkan * mahasiswa hapus mahasiswa Gambar 3.19 Sequence Diagram Menginput Mahasiswa Gambar di atas menjelaskan ketika actor menghapus mahasiswa. Apabila berhasil login, actor dapat menghapus mahasiswa. Actor mengklik menu lihat mahasiswa dahulu kemudian sistem menampilkan semua mahasiswa yang sudah terdaftar. Di setiap baris pada nama-nama mahasiswa terdapat tombol hapus. Apabila actor mengklik tombol hapus maka sistem akan menghapus mahasiswa yang terpilih dari tabel tb_mahasiswa.

23 Sequence Diagram Mengubah Password Form Login Halaman Form Ubah Psw User User login validasi user muat halaman dosen tampilkan halaman utama klik menu ubah password muat form ubah psw tampilkan form ubah password isi form save cek pass lama ubah pass berhasil update pass Gambar 3.20 Sequence Diagram Menginput Mahasiswa Gambar di atas menjelaskan actor mengubah password. Agar bisa mengubah password maka actor harus dalam keadaan login. Actor mengklik menu ubah password kemudian sistem menampilkan form ubah password. Actor mengganti password baru. Apabila tombol save di klik maka sistem menyimpan password baru ke dalam tabel tb_user.

24 Class Diagram Pemodelan class diagram ini digunakan untuk membantu dalam merencanakan, mengatur, megontrol dan mengevaluasi pembangunan database pada aplikasi dengan disertai relasi antar tabel database. Berikut adalah pemodelan class diagram yang digunakan. User Sec_Image -username -password -nm_lengkap +tambah() +hapus() +verifikasi_login() 1 1 -id -insertdate -refid -hiddentext +tambah() +hapus() +tampilkan() +verifikasi_sec_image() Mahasiswa -level -level +mengerjakan_soal() 1 * 1 +menambah_soal() +merubah_soal() +menghapus_soal() +menambah_mhs() +menghapus_mhs() 1 * Soal -id_soal -soal -pilihan_a -pilihan_b -pilihan_c -pilihan_d -pilihan_e -kunci +tambah() +ubah() +hapus() +tampilkan() * Gambar 3.21 Class diagram Diagram Aplikasi Pembelajaran Ukuran Pemusatan Data Gambar di atas menjelaskan bahwa class user digunakan untuk login ke sistem. Class sec_image digunakan oleh user untuk menginput security code (captcha) setiap kali login. Class user mengalami generalisasi yaitu menjadi mahasiswa dan dosen. Perbedaan user terletak pada level. Jika levelnya nol (0) maka dosen, jika levelnya satu (1) maka mahasiswa. Class dosen dapat menginput, mengubah, menghapus banyak soal, dan juga dapat menambah dan menghapus banyak mahasiswa. Sedangkan class mahasiswa dapat mengerjakan banyak soal.

25 Perancangan Database Tabel 3.11 Tb_Soal Field Type Length Keterangan id_soal int (auto increment) 11 Primary Key Soal varchar 500 pilihan_a varchar 25 pilihan_b varchar 25 pilihan_c varchar 25 pilihan_d varchar 25 pilihan_e varchar 25 kunci_jawaban char 1 Tabel 3.12 Tb_User Field Type Length Keterangan username varchar 30 Primary Key password char 32 nama_lengkap varchar 50 level tinyint 1 Tabel 3.13 Tb_Secimage Field Type Length Keterangan id int 11 Primary Key insertdate timestamp 32 refid char 32 hiddentext varchar Perancangan Storyboard Storyboard merupakan deskripsi masing-masing tampilan suatu kejadian dari movie yang akan dimainkan. Satu tampilan dalam storyboard mewakili satu tampilan di layar monitor. Penulis tidak merancang storyboard untuk semua tampilan pada tiap-tiap materi, dikarenakan semua materi pada intinya sama, yang membedakan adalah isi materi. Penulis mengambil sampel untuk materi mean pada data tak berkelompok.

26 60 Frame ke-n Data : 60, 50, 40, 30, 20, 10 Jumlah individu (N) = 6 Frame ke-. Maka : Data : 60, 50, 40, 30, 20, 10 Jumlah individu (N) = 6 Maka : Frame ke-4 Data : 60, 50, 40, 30, 20, 10 Jumlah individu (N) = 6 Maka : Frame ke-3 Data : 60, 50, 40, 30, 20, 10 Jumlah individu (N) = 6 Maka : Data : 60, 50, 40, 30, 20, 10 Jumlah individu (N) = 6 Frame ke-2 Data : 60, 50, 40, 30, 20, 10 Frame ke-1 Gambar 3.22 Storyboard Materi Gambar di atas merupakan serangkaian animasi teks berjalan (bergerak) dengan memanfaatkan frame per frame. Dari frame-frame tersebut nanti dikompile menjadi video.

27 Perancangan Antarmuka Antarmuka Halaman Utama (Home) Pembelajaran Ukuran Pemusatan Data Home Data Tak Berkelompok Data Berkelompok Quiz Uraian singkat materi Ukuran Pemusatan Data Gambar 3.23 Antarmuka Halaman Utama Antarmuka halaman Materi Data Tak Berkelompok Pembelajaran Ukuran Pemusatan Data Home Data Tak Berkelompok Mean Median Modus Kuartil 1 Kuartil 2 Kuartil 3 Data Berkelompok Materi Ukuran Pemusatan Data pada data tak berkelompok sesuai menu yang dipilih Tombol video Quiz Gambar 3.24 Antarmuka Halaman Materi Data Tak Berkelompok

28 Antarmuka halaman Materi Data Berkelompok Pembelajaran Ukuran Pemusatan Data Home Data Tak Berkelompok Data Berkelompok Materi Ukuran Pemusatan Data pada data berkelompok sesuai menu yang dipilih Mean Median Modus Kuartil 1 Kuartil 2 Kuartil 3 Tombol video Quiz Gambar 3.25 Antarmuka Halaman Materi Data Berkelompok Antarmuka halaman Latihan Soal Pembelajaran Ukuran Pemusatan Data Home Data Tak Berkelompok Data Berkelompok Quiz Latihan Soal 1. Pertanyaan o Pilihan A o Pilihan B o Pilihan C o Pilihan D o Pilihan E Next >> Gambar 3.26 Antarmuka Halaman Latihan Soal

29 Antarmuka Form Login Masukkan Username dan Password Anda username password A 7 5 B 8 C input captcha Login Gambar 3.27 Antarmuka Form Login Antarmuka Halaman Input Soal Pertanyaan : FORM INPUT SOAL Teks Area Pilihan a : Pilihan b : Pilihan c : Pilihan d : Jawaban : Save Reset Gambar 3.28 Antarmuka Input Soal

30 Antarmuka Halaman Update Soal Uraian soal : Teks Area (soal lama) Pilihan a : Pilihan b : Pilihan c : Pilihan d : Jawaban : Save Jawaban lama Jawaban lama Jawaban lama Jawaban lama Jawaban lama Reset Gambar 3.29 Antarmuka Update Soal Antarmuka Halaman Lihat Soal TABEL SOAL No. Pertanyaan Pil_a Pil_b Pil_c Pil_d Pil_e Kunci Aksi 1. Bla..bla..bla a b c d e a Edit / hapus 2. Bla..bla..bla a b c d e b Edit / hapus 3. Bla..bla..bla a b c d e c Edit / hapus 4. Bla..bla..bla a b c d e d Edit / hapus dst. Gambar 3.30 Antarmuka Lihat Soal

31 Antarmuka Halaman Lihat Mahasiswa TABEL SOAL No. NIM Nama Aksi AHMAD hapus BUDI hapus RUDI hapus DIDIK hapus dst. Tambah Mahasiswa Gambar 3.31 Antarmuka Lihat Mahasiswa Antarmuka Ubah Password FORM UBAH PASSWORD Username : (disable, tdk bisa diubah) Password lama : Password baru : Konfirmasi password : Save Reset Gambar 3.32 Antarmuka Ubah Password