Bab 3 Metode dan Perancangan Sistem - Institutional Repository | Satya Wacana Christian University: Teknologi HTML5 dalam Perancangan Media Pembelajaran Penentuan Letak Suatu Unsur pada Tabel Periodik Unsur Kimia Berbasis Web (Studi Kasus : SMA Kristen 1
Bab 3
Metode dan Perancangan Sistem
Pada bab ini akan dibahas mengenai metode perancangan
yang digunakan dalam membuat perancangan sistem media
pembelajaran letak suatu unsur kimia pada tabel periodik unsur
beserta rancangan design interface yang terdapat dalam aplikasi
tersebut.
3.1 Metode Perancangan Sistem
Metode penelitian ini dilakukan melalui empat langkah,
antara lain : (1) Analisis kebutuhan dan pengumpulan data. (2)
Perancangan sistem. (3) Pengembangan dan implementasi sistem.
(4) Pengujian sistem dan analisis hasil pengujian.
Analisis Kebutuhan, dan Pengumpulan Data
Perancangan Sistem meliputi Perancangan Proses (UML)
Pengembangan dan Implementasi Sistem
Pengujian Sistem dan Analisis Hasil Pengujian
Gambar 3.1 Tahapan Penelitian (Hasibuan, 2007)
Langkah penelitian pada Gambar 3.1, dapat dijelaskan
sebagai berikut. Langkah pertama: pengumpulan kebutuhan
dilakukan dengan melakukan wawancara kepada Ibu Yuli selaku
guru kimia di SMA Kristen 1 Salatiga. Wawancara yang
dilakukan bertujuan untuk mengetahui proses belajar tabel
periodic pada siswa SMA Kristen 1 Salatiga dan kesulitan-
11
12
kesulitan yang ada pada siswa saat mempelajari prinsip-prinsip
yang terdapat pada materi tabel periodik unsur; Langkah kedua:
perancangan sistem ini dilakukan setelah semua data terkumpul,
proses perancangan menggunakan diagram Unified Modelling
Language (UML) yang bertujuan untuk menggambarkan alur
yang terdapat pada aplikasi media pembelajaran kimia ini.
3.2
Perancangan Sistem
Perancangan
sistem
menggunakan
UML
(Unified
Modelling Language) ini antara lain use case diagram, activity
diagram, class diagram, dan sequence diagram. Perancangan
database yang termasuk didalamnya yaitu perancangan tabel,
field dalam tabel, tipe data masing-masing field dan perancangan
relasi antar tabel; Langkah ketiga: Pengembangan ini berguna
untuk menambahkan beberapa fitur apabila terdapat kekurangan
di dalam perancangan sistem pada langkah kedua. Database
server yang digunakan ialah MySQL database server. Interface
pada website ini menggunakan HTML5 yang didukung dengan
teknologi client-side scripting yaitu Javascript dan server-side
scripting
yaitu
PHP.
Teknologi
yang
digunakan
pada
perancangan sistem ini merupakan teknologi opensource;
Langkah keempat: pengujian sistem yaitu proses pengecekan
terhadap aplikasi yang telah dibuat sesuai dengan yang
diharapkan dan tidak terjadi kesalahan, jika belum sesuai maka
akan dilakukan perbaikan.
13
Hasil yang diperoleh dari analisis kebutuhan dan
pengumpulan data ialah informasi mengenai perlunya media
pembelajaran yang interaktif tentang prinsip-prinsip pada tabel
periodik unsur kimia, sehingga dapat memudahkan siswa dalam
memahami materi yang diajarkan selain dari buku pelajaran itu
yang telah tersedia. Adanya media pembelajaran yang interaktif
juga diharapkan dapat meningkatkan minat belajar siswa dalam
mata pelajaran kimia.
3.2.1 Use Case Diagram
Hapus Data Unsur Kimia Tambah Data Unsur Kimia Ubah Data Unsur Kimia
Tambah Kategory Soal
Atur Data Unsur Kimia
Mengerjakan Soal Latihan
Ubah Kategory Soal
Admin/Guru
Atur Kategory Soal
Atur Data Soal Quiz
Hapus Kategory Soal
Melihat Hasil Latihan
Tambah Soal Quiz
Siswa
Ubah Soal Quiz
Hapus Soal Quiz
Tambah Soal Test Online
Atur data Siswa
Melihat Pembahasan Quiz
Atur Data Soal Test Online
Melihat Pembahasan Test Online
Ubah Data Siswa
Ubah Password
Ubah Soal Test Online
Tambah Data Siswa
Hapus Data Siswa
Hapus Soal Test Online
Gambar 3.2 Use Case Diagram
Perancangan media pembelajaran ini menggunakan 2
aktor, seperti yang ditampilkan pada Gambar 3.2. Admin
14
merupakan aktor yang mengatur data siswa, data unsur kimia,
latihan soal, test online dan kategori soal serta test online.
Kategori soal berperan untuk melihat tingkat kesulitan soal dan
kemampuan siswa dalam memahami materi pelajaran yang telah
diberikan. Kategori soal juga memudahkan admin dalam
membagi soal quiz/test online sesuai dengan tingkat kesulitan.
Siswa merupakan aktor yang berperan untuk melihat materi
pembelajaran, mengikuti latihan soal, test online serta melihat
hasil dari latihan soal dan test online yang telah dikerjakan. Siswa
juga dapat melihat pembahasan mengenai jawaban yang salah
pada latihan soal/test online yang telah diberikan guna
mengingatkan kembali materi pelajaran tersebut. Selain itu, siswa
juga dapat mengubah password sesuai dengan keinginannya
sendiri.
15
3.2.2 Activity Diagram
Siswa
Validasi
Siswa memasukkan
username dan password
Sistem
Validasi login
username/password salah
Siswa masuk ke
halaman home
username dan password benar
Siswa memilih menu
quiz dan kategori quiz
Siswa mengerjakan soal quiz
sesuai dengan yang dipilih
Siswa mengumpulkan jawaban
quiz yang telah dikerjakan
Siswa dapat melihat pembahasan
dari quiz yang telah dikerjakan
Menampilkan hasil dari quiz
yang telah dikerjakan siswa
Menampilkan
pembahasan quiz
Gambar 3.3 Activity Diagram Siswa Mengerjakan Quiz
Gambar 3.3 menunjukkan activity diagram siswa dalam
mengerjakan quiz. Siswa dapat memilih kategori soal pada bagian
quiz, dan jika siswa sudah selesai mengerjakan soal quiz tersebut
16
maka siswa dapat mengumpulkan jawaban. Siswa mendapatkan
nilai dari hasil pengerjaan quiz, siswa juga bisa melihat
pembahasan mengenai quiz yang telah dikerjakan dengan
membuka bagian info di sebelah kanan dari nilai. Hasil dari quiz
tersebut disimpan juga dalam score board sehingga siswa dapat
melihat semua hasil pengerjaan quiz. Pembahasan dibuat untuk
memudahkan siswa dalam memahami materi yang ada pada quiz
tersebut.
Admin
Validasi
Sistem
Admin memasukkan
username dan password
Validasi Login
Admin
username/password salah
Admin masuk ke tampilan
beranda Admin
username dan password benar
Admin memilih
menu daftar soal
Admin memilih tambah
pada menu daftar soal
Admin mengisi soal, pembahasan, kategori, opsi A,
opsi B, opsi C, opsi D, opsi E beserta jawabannya
Sistem menampilkan soal yang telah ditambahkan
beserta pembahasan dan jawaban yang benar
Gambar 3.4 Activity Diagram Admin menambahkan daftar soal
17
Gambar 3.4 menunjukkan activity diagram admin dalam
menambahkan daftar soal untuk quiz/test online. Admin harus
login terlebih dahulu untuk dapat menambahkan daftar soal,
setelah itu admin dapat memilih menu daftar soal quiz/test online
yang ingin ditambahkan. Admin dapat memasukkan kategori soal
quiz/test
online
sesuai
dengan
yang
diinginkan
beserta
pembahasan terhadap soal yang ingin ditambahkan. Lalu admin
dapat mengecek kembali soal quiz/test online yang telah
ditambahkan pada halaman daftar soal. Tingkat kesulitan soal dan
juga pemahaman siswa akan materi pembelajaran yang telah
diberikan juga dapat diukur melalui hasil pengerjaan quiz/test
online.
3.2.3 Class Diagram
Gambar 3.5 Class Diagram
18
Gambar 3.5 menunjukkan kelas-kelas yang diambil dari
tabel pada database sesuai dengan sistem yang telah dirancang.
Unsur dan media berfungsi sebagai keterangan terhadap suatu
unsur yang digambarkan dalam bentuk tulisan maupun berupa
video. Keterangan tersebut sudah mencakup 3 prinsip dari
penentuan letak suatu unsur pada tabel periodik kimia, yaitu
prinsip aufbau, aturan hund dan larangan pauli.
3.2.4 Sequence Diagram
Tampilan Menu
Utama
Tampilan Quiz
Pembahasan
Hasil Quiz
Database
Siswa :
Open DB
Login
Pilih menu quiz
Pilih kategori soal yang akan dikerjakan
Load DB
Menampilkan hasil dari pengerjaan quiz
Melihat pembahasan quiz yang telah dikerjakan
Close DB
Logout
Gambar 3.6 Sequence Diagram Siswa Dalam Mengerjakan Quiz
19
Gambar 3.6 menunjukkan sequence diagram siswa dalam
mengerjakan quiz. Siswa melakukan login terlebih dahulu dengan
memasukkan username dan password, kemudian siswa dapat
memilih menu quiz sesuai dengan kategori yang telah ditentukan.
Setelah semua soal selesai
dijawab maka
siswa
dapat
mengumpulkan quiz tersebut dan siswa mendapatkan nilai dari
hasil quiz, apabila siswa ingin belajar dari kesalahan dalam
mengerjakan quiz tersebut maka siswa dapat memilih menu
pembahasan
pada
Tampilan Utama
Halaman Admin
bagian
Tampilan Daftar
Soal
kanan
dari
Tambah Data
Soal
hasil
nilai.
Database
Admin :
Login
Pilih menu daftar soal
Tambah data soal
Isi soal, pembahasan, kategori, opsi A, opsi B, opsi C, opsi D, opsi E beserta jawaban
Open DB
Melihat data soal setelah dimasukkan
Close DB
Logout
Gambar 3.7 Sequence Diagram Admin dalam menambahkan daftar soal
20
Gambar 3.7 menunjukkan sequence diagram admin dalam
menambahkan daftar soal quiz/test online. Admin login terlebih
dahulu untuk dapat menambahkan daftar soal. Setelah itu, admin
memilih
menu
ditambahkan dan
daftar
soal
quiz/test
online
yang
ingin
admin memasukkan data soal beserta
pembahasan mengenai soal tersebut. Soal quiz/test online itu akan
disimpan dalam database dan admin dapat melihatnya kembali
pada menu
daftar soal. Admin juga dapat mengubah dan
menghapus soal quiz/test online yang telah didaftarkan.
Metode dan Perancangan Sistem
Pada bab ini akan dibahas mengenai metode perancangan
yang digunakan dalam membuat perancangan sistem media
pembelajaran letak suatu unsur kimia pada tabel periodik unsur
beserta rancangan design interface yang terdapat dalam aplikasi
tersebut.
3.1 Metode Perancangan Sistem
Metode penelitian ini dilakukan melalui empat langkah,
antara lain : (1) Analisis kebutuhan dan pengumpulan data. (2)
Perancangan sistem. (3) Pengembangan dan implementasi sistem.
(4) Pengujian sistem dan analisis hasil pengujian.
Analisis Kebutuhan, dan Pengumpulan Data
Perancangan Sistem meliputi Perancangan Proses (UML)
Pengembangan dan Implementasi Sistem
Pengujian Sistem dan Analisis Hasil Pengujian
Gambar 3.1 Tahapan Penelitian (Hasibuan, 2007)
Langkah penelitian pada Gambar 3.1, dapat dijelaskan
sebagai berikut. Langkah pertama: pengumpulan kebutuhan
dilakukan dengan melakukan wawancara kepada Ibu Yuli selaku
guru kimia di SMA Kristen 1 Salatiga. Wawancara yang
dilakukan bertujuan untuk mengetahui proses belajar tabel
periodic pada siswa SMA Kristen 1 Salatiga dan kesulitan-
11
12
kesulitan yang ada pada siswa saat mempelajari prinsip-prinsip
yang terdapat pada materi tabel periodik unsur; Langkah kedua:
perancangan sistem ini dilakukan setelah semua data terkumpul,
proses perancangan menggunakan diagram Unified Modelling
Language (UML) yang bertujuan untuk menggambarkan alur
yang terdapat pada aplikasi media pembelajaran kimia ini.
3.2
Perancangan Sistem
Perancangan
sistem
menggunakan
UML
(Unified
Modelling Language) ini antara lain use case diagram, activity
diagram, class diagram, dan sequence diagram. Perancangan
database yang termasuk didalamnya yaitu perancangan tabel,
field dalam tabel, tipe data masing-masing field dan perancangan
relasi antar tabel; Langkah ketiga: Pengembangan ini berguna
untuk menambahkan beberapa fitur apabila terdapat kekurangan
di dalam perancangan sistem pada langkah kedua. Database
server yang digunakan ialah MySQL database server. Interface
pada website ini menggunakan HTML5 yang didukung dengan
teknologi client-side scripting yaitu Javascript dan server-side
scripting
yaitu
PHP.
Teknologi
yang
digunakan
pada
perancangan sistem ini merupakan teknologi opensource;
Langkah keempat: pengujian sistem yaitu proses pengecekan
terhadap aplikasi yang telah dibuat sesuai dengan yang
diharapkan dan tidak terjadi kesalahan, jika belum sesuai maka
akan dilakukan perbaikan.
13
Hasil yang diperoleh dari analisis kebutuhan dan
pengumpulan data ialah informasi mengenai perlunya media
pembelajaran yang interaktif tentang prinsip-prinsip pada tabel
periodik unsur kimia, sehingga dapat memudahkan siswa dalam
memahami materi yang diajarkan selain dari buku pelajaran itu
yang telah tersedia. Adanya media pembelajaran yang interaktif
juga diharapkan dapat meningkatkan minat belajar siswa dalam
mata pelajaran kimia.
3.2.1 Use Case Diagram
Hapus Data Unsur Kimia Tambah Data Unsur Kimia Ubah Data Unsur Kimia
Tambah Kategory Soal
Atur Data Unsur Kimia
Mengerjakan Soal Latihan
Ubah Kategory Soal
Admin/Guru
Atur Kategory Soal
Atur Data Soal Quiz
Hapus Kategory Soal
Melihat Hasil Latihan
Tambah Soal Quiz
Siswa
Ubah Soal Quiz
Hapus Soal Quiz
Tambah Soal Test Online
Atur data Siswa
Melihat Pembahasan Quiz
Atur Data Soal Test Online
Melihat Pembahasan Test Online
Ubah Data Siswa
Ubah Password
Ubah Soal Test Online
Tambah Data Siswa
Hapus Data Siswa
Hapus Soal Test Online
Gambar 3.2 Use Case Diagram
Perancangan media pembelajaran ini menggunakan 2
aktor, seperti yang ditampilkan pada Gambar 3.2. Admin
14
merupakan aktor yang mengatur data siswa, data unsur kimia,
latihan soal, test online dan kategori soal serta test online.
Kategori soal berperan untuk melihat tingkat kesulitan soal dan
kemampuan siswa dalam memahami materi pelajaran yang telah
diberikan. Kategori soal juga memudahkan admin dalam
membagi soal quiz/test online sesuai dengan tingkat kesulitan.
Siswa merupakan aktor yang berperan untuk melihat materi
pembelajaran, mengikuti latihan soal, test online serta melihat
hasil dari latihan soal dan test online yang telah dikerjakan. Siswa
juga dapat melihat pembahasan mengenai jawaban yang salah
pada latihan soal/test online yang telah diberikan guna
mengingatkan kembali materi pelajaran tersebut. Selain itu, siswa
juga dapat mengubah password sesuai dengan keinginannya
sendiri.
15
3.2.2 Activity Diagram
Siswa
Validasi
Siswa memasukkan
username dan password
Sistem
Validasi login
username/password salah
Siswa masuk ke
halaman home
username dan password benar
Siswa memilih menu
quiz dan kategori quiz
Siswa mengerjakan soal quiz
sesuai dengan yang dipilih
Siswa mengumpulkan jawaban
quiz yang telah dikerjakan
Siswa dapat melihat pembahasan
dari quiz yang telah dikerjakan
Menampilkan hasil dari quiz
yang telah dikerjakan siswa
Menampilkan
pembahasan quiz
Gambar 3.3 Activity Diagram Siswa Mengerjakan Quiz
Gambar 3.3 menunjukkan activity diagram siswa dalam
mengerjakan quiz. Siswa dapat memilih kategori soal pada bagian
quiz, dan jika siswa sudah selesai mengerjakan soal quiz tersebut
16
maka siswa dapat mengumpulkan jawaban. Siswa mendapatkan
nilai dari hasil pengerjaan quiz, siswa juga bisa melihat
pembahasan mengenai quiz yang telah dikerjakan dengan
membuka bagian info di sebelah kanan dari nilai. Hasil dari quiz
tersebut disimpan juga dalam score board sehingga siswa dapat
melihat semua hasil pengerjaan quiz. Pembahasan dibuat untuk
memudahkan siswa dalam memahami materi yang ada pada quiz
tersebut.
Admin
Validasi
Sistem
Admin memasukkan
username dan password
Validasi Login
Admin
username/password salah
Admin masuk ke tampilan
beranda Admin
username dan password benar
Admin memilih
menu daftar soal
Admin memilih tambah
pada menu daftar soal
Admin mengisi soal, pembahasan, kategori, opsi A,
opsi B, opsi C, opsi D, opsi E beserta jawabannya
Sistem menampilkan soal yang telah ditambahkan
beserta pembahasan dan jawaban yang benar
Gambar 3.4 Activity Diagram Admin menambahkan daftar soal
17
Gambar 3.4 menunjukkan activity diagram admin dalam
menambahkan daftar soal untuk quiz/test online. Admin harus
login terlebih dahulu untuk dapat menambahkan daftar soal,
setelah itu admin dapat memilih menu daftar soal quiz/test online
yang ingin ditambahkan. Admin dapat memasukkan kategori soal
quiz/test
online
sesuai
dengan
yang
diinginkan
beserta
pembahasan terhadap soal yang ingin ditambahkan. Lalu admin
dapat mengecek kembali soal quiz/test online yang telah
ditambahkan pada halaman daftar soal. Tingkat kesulitan soal dan
juga pemahaman siswa akan materi pembelajaran yang telah
diberikan juga dapat diukur melalui hasil pengerjaan quiz/test
online.
3.2.3 Class Diagram
Gambar 3.5 Class Diagram
18
Gambar 3.5 menunjukkan kelas-kelas yang diambil dari
tabel pada database sesuai dengan sistem yang telah dirancang.
Unsur dan media berfungsi sebagai keterangan terhadap suatu
unsur yang digambarkan dalam bentuk tulisan maupun berupa
video. Keterangan tersebut sudah mencakup 3 prinsip dari
penentuan letak suatu unsur pada tabel periodik kimia, yaitu
prinsip aufbau, aturan hund dan larangan pauli.
3.2.4 Sequence Diagram
Tampilan Menu
Utama
Tampilan Quiz
Pembahasan
Hasil Quiz
Database
Siswa :
Open DB
Login
Pilih menu quiz
Pilih kategori soal yang akan dikerjakan
Load DB
Menampilkan hasil dari pengerjaan quiz
Melihat pembahasan quiz yang telah dikerjakan
Close DB
Logout
Gambar 3.6 Sequence Diagram Siswa Dalam Mengerjakan Quiz
19
Gambar 3.6 menunjukkan sequence diagram siswa dalam
mengerjakan quiz. Siswa melakukan login terlebih dahulu dengan
memasukkan username dan password, kemudian siswa dapat
memilih menu quiz sesuai dengan kategori yang telah ditentukan.
Setelah semua soal selesai
dijawab maka
siswa
dapat
mengumpulkan quiz tersebut dan siswa mendapatkan nilai dari
hasil quiz, apabila siswa ingin belajar dari kesalahan dalam
mengerjakan quiz tersebut maka siswa dapat memilih menu
pembahasan
pada
Tampilan Utama
Halaman Admin
bagian
Tampilan Daftar
Soal
kanan
dari
Tambah Data
Soal
hasil
nilai.
Database
Admin :
Login
Pilih menu daftar soal
Tambah data soal
Isi soal, pembahasan, kategori, opsi A, opsi B, opsi C, opsi D, opsi E beserta jawaban
Open DB
Melihat data soal setelah dimasukkan
Close DB
Logout
Gambar 3.7 Sequence Diagram Admin dalam menambahkan daftar soal
20
Gambar 3.7 menunjukkan sequence diagram admin dalam
menambahkan daftar soal quiz/test online. Admin login terlebih
dahulu untuk dapat menambahkan daftar soal. Setelah itu, admin
memilih
menu
ditambahkan dan
daftar
soal
quiz/test
online
yang
ingin
admin memasukkan data soal beserta
pembahasan mengenai soal tersebut. Soal quiz/test online itu akan
disimpan dalam database dan admin dapat melihatnya kembali
pada menu
daftar soal. Admin juga dapat mengubah dan
menghapus soal quiz/test online yang telah didaftarkan.