Penjelasan tentang proses pembangunan sistem dalam sub-bab ini akan dibagi menjadi 3, antara lain : Rancangan penelitian, Rancangan uji coba dan evaluasi, dan Jadwal kegiatan penelitian.
3.1Rancangan Penelitian
Proses perancangan dalam penelitian pembangunan sistem ini akan dibagi menjadi beberapa tahap antara lain : analisa sistem, perancangan sistem, perancangan proses dan perancangan database.
3.1.1 Analisa Sistem
Berdasarkan latar belakang dan perumusan masalah yang terdapat dalam bab sebelumnya dapat diketahui perancangan yang dilakukan adalah pembuatan Sistem Pembelajaran Fisika Berbasis Web Bab Besaran Dan Satuan Untuk Kelas X Semester I Menggunakan Flash. Perancangan sistem pembelajaran fisika diterapkan dengan berbasis website dan didukung dengan flash pada penelitian ini dirancang untuk menyediakan sarana media pembelajaran secara mandiri untuk user.
Pembelajaran yang disajikan dalam web ini mengenai materi pada bab besaran dan satuan untuk kelas X semester I, meliputi latihan soal dan simulasi interaktif untuk lebih memudahkan pengguna dalam memahami pembelajaran ini.
Pada sub-bab ini akan dijelaskan tentang perancangan pembuatan sistem pembelajaran fisika berbasis web, dimulai dari awal pembuatan sampai pada sistem terbentuk. Dalam merancang suatu sistem maka kita perlu menentukan jenis-jenis atau spesifikasi perangkat keras yang akan kita gunakan.
Perangkat Keras merupakan perangkat yang dapat menentukan performa kinerja dari suatu sistem aplikasi. Untuk mendukungnya kinerja yang optimal maka digunakan beberapa perangkat keras yang dapat mendukung untuk membuat sistem pembelajaran fisika secara maksimal.
Adapun beberapa standart minimal untuk pembuatan sistem pembelajaran fisika berbasis web adalah sebagai berikut :
a. CPU/ Notebook
b. Intel Dual Core Prosesor 1.7 GHz. c. RAM 1,5 GB.
d. VGA 256 MB.
e. Hardisk Seagate 80 GB
Perangkat Lunak yang digunakan untuk membuat program media pembelajaran fisika adalah sebagai berikut :
1. Sistem Operasi Windows 7 digunakan untuk membuat program media pembelajaran fisika dengan pokok bahasan gerak melingkar.
2. Macromedia Flash 8 adalah perangkat lunak yang digunakan untuk membuat simulasi gerak melingkar yang interaktif berbasis multimedia. 3. Macromedia Dreamweaver 8 adalah perangkat lunak yang digunakan
untuk membuat program media pembelajaran fisika dengan pokok bahasan gerak melingkar berbasis online.
4. Adobe Photoshop CS adalah perangkat lunak yang digunakan untuk mengedit gambar dalam pembuatan animasi flash, agar gambar yang dihasilkan lebih baik.
5. Mozillla firefox atau Google chrome adalah perangkat lunak yang digunakan sebagai web browser bisa juga menggunakan web browser yang lainnya.
6. XAMPP 1.7 adalah perangkat lunak yang menyediakan paket perangkat lunak ke dalam satu buah paket. Dalam pembuatan aplikasi ini menggunakan salah satu paket perangkat lunak yang ada dalam xampp yaitu apache sebagai server, dan phpMyadmin tools (version 3.1.3.1) adalah perangkat lunak yang digunakan sebagai penyedia layanan MySql version 5.0.51 sebagai database.
7. Rational Rose Enterprise adalah perangkat lunak dalam membuat perancangan proses sistem, yang meliputi usecase diagram, activity diagram, sequence diagram dan class diagram.
3.1.3 Perancangan Pr oses
Dalam perancangan proses pada sistem ini akan dibagi menjadi beberapa rancangan proses antara lain : Identifikasi, Use Case Diagram, Activity Diagram, Class Diagram, dan Sequence Diagram. Adapun aktor-aktor yang terlibat dalam sistem akan dijelaskan pada sub bab identifikasi aktor.
Identifikasi Aktor dengan melihat kebutuhan sistem yang ada, maka proses identifikasi aktor didapatkan berdasarkan siapa saja yang akan menggunakan dan mempengaruhi sistem. Dalam perancangan aplikasi ini, aktor yang dapat
teridentifikasi terdapat 2 aktor diantaranya sebagai siswa dan pengajar seperti yang terlihat pada Tabel 3.1.
Tabel 3.1 Identifikasi Aktor dengan Aktifitasnya Aktor Aktifitas Aktor
User - Mengetahui halaman isi beranda yang menjelaskan judul, bab, semester dan kelas pada sistem pembelajaran yang digunakan. - Mengetahui standart kompetensi yang ingin dicapai pengajar pada
halaman kompetensi.
- Mengetahui indikator penilaian pada tiap-tiap materi yang dipelajari.
- Mengimplementasikan materi yang telah dipelajari dengan mengerjakan soal-soal latihan/kuis dengan login sebagai user. - Memperoleh pemecahan masalah/petunjuk pemakaian sistem yang
tidak diketahui pada halaman manual.
- Memperoleh akses login sebagai user yang terregristasi. Admin - Manage user dalam sistem
- Manage latihan soal-soal - Manage nilai
Visitor - Mengetahui halaman isi beranda yang menjelaskan judul, bab, semester dan kelas pada sistem pembelajaran yang digunakan. - Mengetahui standart kompetensi yang ingin dicapai pengajar pada
halaman kompetensi.
- Mengetahui indikator penilaian pada tiap-tiap materi yang dipelajari.
Use Case Diagram Sistem terdapat 3 aktor yaitu admin, user dan visitor. Seperti yang terlihat pada Tabel 3.1, aktor-aktor tersebut sudah memiliki aktifitas masing-masing untuk mengakses menu yang ada di dalam sistem pembelajaran.
Gambar 3.1 Use Case Diagram Sistem
Pada Gambar 3.1, digambarkan seorang visitor atau bisa disebut juga user yang tidak terregistrasi dapat mengakases menu beranda, kompetensi, teori, manual, sedangkan User yang memiliki akses login dapat mengakses menu-menu yang ada pada sistem. Admin bertindak sebagai administrator dimana mengolah data user yang terregistrasi untuk dapat mengakses halaman kuis dan nilai, dimana kuis hanya diperuntukkan untuk user yang telah terregistrasi/ terdaftar pada sistem.
Activity diagram menunjukkan aliran proses yang terjadi pada syitem. Ada beberapa Activity diagram yang akan dijelaskan sebagai berikut:
a. Activity Diagram Beranda
Activity Diagram yang digambarkan pada Gambar 3.2, menjelaskan tentang proses awal sistem yang menampilkan halaman beranda.
Untuk dapat aktif pada sistem dapat memilih menu-menu yang ada pada sistem.
Gambar 3.2 Activity Diagram Beranda b. Activity Diagram Kompetensi
Activity Diagram kompetensi yang digambarkan pada Gambar 3.3
,
menjelaskan isi dari halaman kompetensi dimana pengguna sistem mengetahui hasil yang ingin dicapai dengan adanya pembuatan sistem pembelajaran.Deskripsi Activity Diagram :
Actor dapat memilih menu kompetensi setelah sistem menampilkan halaman utama yang selanjutnya sistem menampilkan isi dari halaman kompetensi. c. Activity Diagram Teori
Activity Diagram yang digambarkan pada Gambar 3.4
,
menjelaskan tentang proses dari actor melihat isi dari menu teori.Gambar 3.4 Activity Diagram Teori Deskripsi Activity Diagram :
Actor memilih menu teori, sistem akan menampilkan isi dari menu teori. Pada menu teori ini dibuat dengan menggunakan flash.
d. Activity Diagram Login Admin
Activity Diagram Login Admin yang digambarkan pada Gambar 3.5
,
menjelaskan tentang proses dari login ketika admin ingin masuk ke dalam sistem dengan login sebagai administrator.Gambar 3.5 Activity Diagram Login Admin Deskripsi Activity Diagram :
Admin membuka website dengan login sebagai administrator, sistem akan menampilkan form login, admin memasukkan username dan password, lalu sistem akan mengecek username dan password pada database apabila cocok dengan data yang ada dalam database untuk login sebagi admin, maka sistem akan menampilkan halaman utama website administrator apabila tidak cocok maka sistem akan kembali pada awal tampilan form login.
e. Activity Diagram Manage User
Activity Diagram yang digambarkan pada Gambar 3.6, menjelaskan tentang proses dari manipulasi informasi dan data user pada sistem yang dilakukan oleh admin.
Gambar 3.6 Activity Diagram Manage user Deskripsi Activity Diagram :
Admin login untuk dapat memasuki halaman administrator, lalu sistem akan menampilkan halaman utama administrator. Untuk dapat memanipulasi informasi dan data yang ada pada sistem admin dapat memilih salah satu menu yang ingin dimanipulasi informasi dan datanya. Lalu sistem akan memberikan pilihan edit, insert, dan hapus. Tetapi tidak semua menu yang ada terdapat pilihan aksi edit, insert dan hapus. Setelah admin memilih salah satu aksi sistem akan memproses aksi ke dalam database.
f. Activity Diagram Manage Kuis
Activity Diagram yang digambarkan, menjelaskan tentang proses dari manipulasi informasi dan data kuis pada sistem yang dilakukan oleh admin.
g. Activity Diagram Login User
Activity Diagram yang digambarkan pada Gambar 3.7, menjelaskan tentang proses dari login ketika user ingin masuk ke dalam website sebagai user yang terregistrasi.
Deskripsi Activity Diagram :
User untuk membuka menu kuis harus login terlebih dahulu. Kemudian sistem akan menampilkan form login untuk dapat masuk pada menu kuis user harus memasukkan username dan password dengan benar, selanjutnya sistem akan mengecek username dan password pada database apabila cocok dengan data yang ada dalam database user maka sistem menampilkan halaman kuis apabila tidak cocok maka sistem akan kembali pada awal tampilan form login.
Gambar 3.7 Activity Diagram Login User h. Activity Diagram Kuis
Activity Diagram yang digambarkan pada Gambar 3.8, menjelaskan tentang proses dari pengerjaan kuis. Menu kuis hanya bisa diakses oleh user yang sudah terdaftar pada sistem
Deskripsi Activity Diagram :
Untuk dapat mengerjakan kuis user dapat memilih menu kuis pada website, sistem akan menampilkan semua soal-soal latihan. Apabila user sudah selesai menjawab semua soal-soal, sistem akan menampilkan score yang diperoleh user.
Gambar 3.8 Activity Diagram Kuis
Class Diagram digunakan untuk menggambarkan visualisasi struktur kelas-kelas dari suatu sistem juga memperlihatkan hubungan antar kelas-kelas dan penjelasan detail tiap-tiap kelas di dalam model desain (logical view) dari suatu sistem. Selama proses desain, diagram kelas berperan dalam menangkap struktur dari semua kelas yang membentuk arsitektur sistem yang dibuat. Class diagram pada sistem
pembelajaran menjelaskan tiga actor admin,user dan visitor yang memiliki pemodelan class pada sistem sperti yang terlihat pada Gambar 3.9.
Gambar 3.9 Class Diagram Sistem
Sequence Diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem termasuk pengguna, display, dan sebagainya yang berupa pesan yang digambarkan terhadap waktu. Sequence diagram terdiri antar dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait). Ada beberapa Sequence Diagram yang akan dijelaskan sebagai berikut:
a. Sequence Diagram Login
Admin masuk ke halaman website administrator media pembelajaran gerak melingkar, kemudian isi username dan password pada form login. Setelah isi form selesai akan melakukan proses login, apabila username dan password yang diisi valid dengan data yang ada pada database admin, maka proses login berhasil dan menampilkan halaman utama administrator.
Gambar 3.10 Sequence Diagram Login Admin b. Sequence Diagram Manage User
Sebelum admin dapat memanipulasi informasi dan data website Admin harus masuk ke halaman website administrator terlebih dahulu, untuk bisa masuk ke halaman website administrator prosesnya sama seperti proses yang ada pada sequence diagram login admin sebelumnya.
Admin dapat mengolah informasi data user dengan memilih salah satu menu edit, insert, delete. Apabila proses perubahan selesai halaman admin akan menampilkan data yang sudah terupdate.
c. Sequence Diagram Manage Kuis
Sebelum admin dapat memanipulasi informasi dan data website Admin harus masuk ke halaman website administrator terlebih dahulu, untuk bisa masuk ke halaman website administrator prosesnya sama seperti proses yang ada pada sequence diagram login admin sebelumnya.
Admin dapat memanipulasi informasi data kuis dengan memilih salah satu menu edit, insert, delete. Apabila proses manipulasi selesai halaman admin akan menampilkan data yang sudah terupdate.
Gambar 3.12 Sequence Diagram Manage Kuis d. Sequence Diagram Manage Nilai
Untuk dapat manage nilai, admin harus login terlebih dahulu. Gambar 3.10 menggambarkan admin dapat memanipulasi informasi hasil penilaian dengan
memilih salah satu menu edit, insert, delete. Apabila proses manipulasi selesai halaman admin akan menampilkan data yang sudah terupdate sebelumnya.
Gambar 3.13 Sequence Diagram Manage Nilai e. Sequence Diagram Beranda
User/Visitor masuk dalam sistem secara langsung halaman beranda menampilkan isi dari beranda, karena beranda merupakan halaman awal yang ditampilkan sistem.
f. Sequence Diagram Kompetensi
User/Visitor memilih menu kompetensi secara langsung sistem menampilkan isi dari halaman kompetensi. Kompetensi merupakan halaman yang ada pada sistem.
Gambar 3.15 Sequence Diagram Kompetensi g. Sequence Diagram Teori
User/Visitor masuk dalam website dan memilih menu teori secara langsung halaman teori menampilkan isi halaman dengan proses pengambilan data dari database kemudian menampilkan data teori ke dalam website.
h. Sequence Diagram Manual
User/Visitor masuk dalam website dan memilih menu manual sistem secara langsung menampilkan isi dari manual untuk pemakaian website..
: User : User
: Halam anMateri
:
Halam anMateri : Materi : Materi
load( )
get data( )
view res pons ( )
Gambar 3.17 Sequence Diagram Manual i. Sequence Diagram Login User
User masuk ke halaman sistem, login dengan mengisi username dan password pada form login. Setelah isi form selesai akan melakukan proses login, apabila username dan password yang diisi valid dengan data yang ada pada database user, maka proses login berhasil dan menampilkan halaman utama website.
Gambar 3.18 Sequence Diagram Login User
Untuk masuk dalam menu kuis user harus login terlebih dahulu dan sistem secara otomatis langsung melakukan proses pengambilan data dari database untuk menampilakan isi kuis. Untuk lebih jelasnya dapat dilihat pada Gambar 3.13. : Admin : Admin : Halam anAdm in :
Halam anAdm in : Informasi&Data : Informasi&Data load( )
get data( )
view res pons ( )
s et data( )
view res pons ( )
Gambar 3.19 Sequence Diagram Kuis k. Sequence Diagram Nilai
Nilai merupakan hasil akumulasi penilaian soal-soal pada halaman kuis. Untuk masuk dalam halaman nilai diperlukan masuk pada menu kuis terlebih dahulu. Sistem secara langsung mengambil data hasil penilaian pada database untuk ditampilkan pada sistem.
: Adm in : Adm in
: Halam anAdm in
:
Halam anAdm in : Inform as i&Data : Inform as i&Data load( )
get data( )
view res pons ( )
s et data( )
view res pons ( )
Gambar 3.20 Sequence Diagram Nilai 3.2Rancangan Uji Coba dan Evaluasi
Dalam pembuatan aplikasi ini dibutuhkan movie clip (istilah objek dalam flash), button dan background untuk kelangsungan berjalannya aplikasi ini. Berikut ini akan dijelaskan fungsi Button, Movie Clip dan background pada interface sistem pembelajaran.
3.2.1 User Interface Beranda
Adapun tampilan awal web sistem pembelajaran yang dibuat dengan menampilkan judul dari sistem pembelajaran dan menu-menu utama yang ada pada sistem yaitu sebagai berikut:
Gambar 3.21 User Interface Beranda 3.2.2 User Interface Kompetensi
Kompetensi merupakan penjelasan mengenai target pembelajaran dibuatnya sistem pembelajaran.
Gambar 3.22 User Interface Kompetensi 3.2.3 User Interface Materi
Pada halaman materi akan ditampilkan modul pembelajaran menggunakan flash, dengan menampilkan simulasi-simulasi pembelajaran yang interaktif.
3.2.4 User Interface Kuis
Halaman kuis berisi halaman dimana sistem memberikan latihan pengerjaan soal sesuai materi pembelajaran yang ada, berikut kerangka user interface yang akan dibuat.
Gambar 3.24 User Interface Kuis
Gambar 3.25 User Interface Penilaian 3.2.5 User Interface Admin Menu
Pada halaman menu admin terdapat menu-menu yang dapat diakses oleh admin untuk mengelola data user dan soal. Dimana data user maupun data soal meliputi form tambah data dan merubah data user maupun menghapus data yang ada.
Gambar 3.26 User Interface Materi
Gambar 3.28 User Interface Data soal
Gambar 3.30 User Interface Form tambah soal
3.3User Interface Manual
Manual merupakan menu dimana terdapat penjelasan-penjelasan menganai isi ataupun petunjuk penggunaan sistem pembelajaran.
Gambar 3.31 User Interface manual 3.4J adwal Kegiatan Penelitian
Dalam kegiatan penelitian ini mulai dari penelitian sampai pada selesai pembuatan aplikasi membutuhkan waktu sebagai berikut: