6
Salah satu peralatan TIK yang sangat diperlukan dalam berbagai bidang antara lain komputer. [2]
Media pembelajaran adalah segala sesuatu yang menyangkut software
dan hardware yang dapat digunakan untuk meyampaikan isi materi ajar dari sumber belajar ke pelajar individu atau kelompok, yang dapat merangsang
pikiran, perasaan, perhatian dan minat pelajar sedemikian rupa sehingga proses belajar di dalam atau luar kelas menjadi lebih efektif. Sebelum media
pembelajaran digunakan, media pembelajaran mempunyai manfaat dan tujuan, yaitu sebagai berikut.Manfaat media dalam pembelajaran antara lain;
1. Penyampaian materi pelajaran dapat diseragamkan. 2. Proses pembelajaran menjadi lebih jelas dan menarik.
3. Proses pembelajaran menjadi lebih interaktif. 4. Efisiensi dalam waktu dan tenaga.
5. Meningkatkan kualitas hasil belajar siswa. 6. Media memungkinkan proses belajar dapat dilakukan di mana saja dan
kapan saja. 7. Media dapat menumbuhkan sikap positif siswa terhadap materi dan proses
belajar. 8. Mengubah peran guru ke arah yang lebih positif dan produktif.
Sedangkan fungsi media pembelajaran antara lain: 1. Menyampaikan informasi dalam proses belajar mengajar.
2. Melengkapi dan memperkaya informasi dalam kegiatan belajar mengajar. 3. Mendorong motivasi belajar.
4. Menambah variasi dalam penyajian materi. 5. Menambah pengertian nyata tentang suatu pengetahuan.
6. Memungkinkan siswa memilih kegiatan belajar sesuai dengan
kemampuan, bakat dan minatnya.[3]
3. Metode Penelitian
Metode yang akan digunakan dalam penelitian ini adalah metode prototyping, yang dapat digambarkan sebagai proses pengembangan perangkat
lunaknya yang banyak digunakan oleh user sebagai acuan dan memberikan ide untuk menyajikan gambar yang lengkap. Dengan metode prototyping ini
pengembang dan pelanggan dapat saling berinteraksi selama proses pembuatan sistem. Tahap-tahap di dalam prototyping model yang akan diimplementasikan di
dalam perancangan web antara lain langkah-langkah dalam metode ini adalah:
a. Listen to customer
Tahap awal dari metode ini adalah listen into customer, yaitu mengumpulkan kebutuhan dari sistem yang akan dibuat. Pada tahap ini
dilakukan pengumpulan bahan dan data berdasarkan kebutuhan dari pengguna, yaitu SMP N 1 Salatiga yang dilakukan adalah pengamatan
langsung ke SMP N 1 Salatiga dan wawancara singkat dengan guru tik kelas VIII untuk mengetahui kebutuhan dari sisi pengguna.
7
b. Build
Langkah berikutnya dari metode ini adalah build, yaitu membangun sistem berdasarkan hasil dari tahap sebelumya. Sistem yang nantinya
dibangun dengan memanfaatkan Google Docs. Sebelum dibuat tentunya dibutuhkan suatu perancangan. Untuk perancangan sistem ini menggunakan
model UML Unified Modeling Language
c. Customer Test
Tahap terakhir dari metode ini adalah customer test. Tahap ini user akan melakukan pengujian sistem untuk mengetahui hasil dari sistem dibuat.
Aplikasi ini menyediakan beberapa fitur-fitur yang membantu siswa dalam pemahaman pembelajaran seperti Soal latihan dalam content aplikasi berupa form
soal yang akan disimpan di spreadsheet admin, Diskusi berupa kotak komentar, Materi pelajaran dari semester 1 dan 2, dimana siswa dapat mendownload materi
tersebut dan dapat melihat informasi data-data sekolah seperti Contact us, Sejarah sekolah , profil sekolah, gallery.
Gambar 3.1 Rancangan Diagram Sistem Secara Manual
Gambar 3.1 Merupakan diagram sistem yang memperlihatkan proses sistem. Tujuannya adalah memberikan pandangan umum sistem. Dari proses tersebut
memperlihatkan hubungan dan interaksi antara AdminGuru dan UserSiswa melalui aplikasi web
Metode perancangan sistem yang digunakan untuk merancang aplikasi ini adalah menggunakan UML unified Modelling Languange, untuk perencanaan
8
dan implementasi proyek secara keseluruhan dengan simbol-simbol yang mudah dimengerti. Dalam perancangan aplikasi UML yang digunakan terdiri dari;
Use Case Diagram merupakan proses tindakan yang dilakukan actor untuk melengkapi satu tugas dan memodelkan perilaku dari suatu sistem yang
dibutuhkan oleh user. Dengan kata lain, use case menggambarkan bagaimana seseorang akan menggunakan atau memanfaatkan sistem.
Gambar 3.2 Use Case Diagram Admin dan User
Dalam use case diagram yang digambarkan pada Gambar 3.2 menggambarkan fungsi-fungsi yang dapat dilakukan jika seorang pengguna
masuk sebagai administrator atau user Dari gambar di atas dapat diketahui bahwa kedua pengguna tersebut mempunyai fungsi dan tugas yang berbeda. Fungsi dari
admin antara lain insert data, Update data, Delete data, Upload Materi, Suntingedit, Download materi, Lihat gallery sekolah, Diskusi, Lihat tugas, dan
Lihat home, Sedangkan Untuk fungsi user antara lain Download materi, Lihat gallery sekolah, Diskusi, Lihat tugas, Lihat home dan latihan soal..
Activity Diagram merupakan tipe khusus dari diagram state yang memperlihatkan aliran dari suatu aktifitas ke aktifitas lainnya dalam suatu sistem
mulai dari alir awal, decision yang mungkin terjadi dan alir terakhir. Seperti terlihat di gambar 3.3
Insert Data
Delete Data Update Data
Upload Materi Diskusi
Lihat gallery sekolah
Lihat Home sunting edit
User Download Materi
Lihat Materi
Lihat tugas Admin
Latihan soal
9
Gambar 3.3 Activity Diagram Admin
Gambar 3.3 merupakan activity diagram dari admin serta proses aliran aktivitas yang dilakukan. Proses dimulai dengan membuka halaman web terlebih dahulu.
Jika username dan password benar, maka langsung bisa mengakses web, jika username dan password salah maka kembali mengulang login. Setelah bisa login,
admin bisa langsung masuk ke layanan web e-learning. Admin dapat melakukan insert data, Update data, Delete data, Upload Materi, Suntingedit, Download
materi, Lihat gallery sekolah, Diskusi, Lihat tugas, dan Lihat home Setelah melakukan aktivitas-aktivitas tersebut admin melakukan logout untuk keluar dari
aplikasi.
Sequence diagram merupakan interaksi antar objek di dalam dan di sekitar sistem termasuk pengguna, display,dan sebagainya berupa message yang
digambarkan terhadap waktu. Di dalam Sequence diagram juga memperlihatkan tahap demi tahap apa yang seharusnya terjadi untuk menghasilkan sesuatu
didalam use case atribut atau method pada class yang telah dibentuk oleh class diagram. Seperti terlihat di gambar 3.4
Start Login
Mas uk ke web
Mengecek username dan pas sword
Cek tabel Login
Pesan username dan password benar s ... Login berhasil
Mas uk ke web e-learning
Pilih Menu web
Insert data Delete
data Update data
Logout Lihat gallery
Dis kus i stop
Lihat H ome Sunting
edit
Download materi
Lihat tugas
Sis te m A dminis tr a tor
10
Gambar 3.4
Sequence Diagram User
Gambar 3.4 merupakan Sequence Diagram User beserta proses yang dilakukan. Didalam diagram ini Proses dimulai dengan menulis alamat web di browser yang
digunakan user terlebih dahulu. Jika alamat web benar, maka langsung bisa mengakses web, jika alamat web salah maka user kembali mengulang. Setelah
alamat web bisa dibuka,maka tampilan web e-learning akan muncul
Setelah proses perancangan sistem dilakukan, langkah selanjutnya adalah peracangan interface aplikasi. Dimana proses ini akan membantu dalam
pembuatan aplikasi dari awal sampai selesai. Perancangan interface aplikasi terlihat seperti berikut;
Gambar 3.5 Rancangan Muka Utama Aplikasi
Gambar 3.5 merupakan desain muka utama aplikasi dari yang akan dibuat. Informasi elemen-elemen dalam desain ini yaitu Header berisi desain dari sekolah
SMP N 1 Salatiga. Menu yang digunakan adalah 1Home berisi Contant us, Profil sekolah dan Sejarah sekolah , 2 Gallery, 3Download, 4Semester 1
berisi tentang materi yang diajarkan di semester 1 seperti Corel draw X3 dan Macromedia flash 8, dan 5 Semester 2 berisi tentang materi yang diajarkan di
: User Sistem
Database 1: Masukkan alamat web
5: Lihat gallery 6: Lihat materi
7: Diskusi 8: Lihat tugas
11: Menampilkan halaman web 12: Proses penampilan
13: Proses selesai 10: Latihan soal
9: Lihat home 2: Mengecek alamat web
4: Masuk ke web e-learning 3: Proses pengecekkan
11
semester 2 seperti Dasar-dasat Internet-Intranet, Penggunaan Internet dan Teknologi dan Profesi. Footer berisi tentang pembuat dan hak cipta.
Gambar 3.6 Rancangan Tampilan Diskusi dan Test
Gambar 3.6 merupakan desain tampilan Diskusi dan Test dari web yang akan dibuat. Informasi elemen-elemen dalam desain ini yaitu Header berisi desain dari
sekolah SMP N 1 Salatiga. Menu yang digunakan adalah1 Home berisi Contant us,Profil sekolah dan Sejarah sekolah 2Gallery,3Download,4Semester 1
berisi tentang materi yang diajarkan di semester 1 seperti Corel draw X3 dan Macromedia flash 8,5 Semester 2 berisi tentang materi yang diajarkan di
semester 2 seperti Dasar-dasat Internet-Intranet, Penggunaan Internet dan Teknologi dan Profesi dan pada bagian Content materi berisi 6 Pertemuan ke-,
7Materi, 8Diskusi dan 9Test. Footer berisi tentang pembuat dan hak cipta
Gambar 3.7 Rancangan Tampilan Lembar Diskusi
Gambar 3.7 merupakan desain tampilan lembar diskusi yang akan dibuat. Informasi elemen-elemen dalam desain ini yaitu Header berisi desain dari sekolah
SMP N 1 Salatiga. Menu yang digunakan adalah 1Home berisi Contant us, Profil sekolah dan Sejarah sekolah, 2 Gallery, 3Download, 4Semester 1
berisi tentang materi yang diajarkan di semester 1 seperti Corel draw X3 dan
12
Macromedia flash 8,5 Semester 2 berisi tentang materi yang diajarkan di semester 2 seperti Dasar-dasat Internet-Intranet, Penggunaan Internet dan
Teknologi dan Profesi dan pada bagian Content materi berisi 6 Materi diskusi, dan 7 Komentar , dan Footer berisi tentang pembuat dan hak cipta.
4. Hasil pembahasan dan implementasi
