Upload
lynga
View
213
Download
0
Embed Size (px)
Citation preview
31
3. BAB 3
ANALISIS DAN PERANCANGAN SISTEM
Tahap analisis dan perancangan diperlukan tahapan sistematis agar aplikasi
yang dibuat sesuai dengan kegunaan dan tujuannya. Tahap pertama dari analisis
adalah melakukan analisis sistem, mulai dari analisis masalah, analisis fungsional
dan analisis non-fungsional. Sedangkan untuk tahap perancangan di mulai dengan
melakukan perancangan sistem dan perancangan antarmuka yang akan digunakan
untuk diterapkan pada aplikasi.
3.1 Analisis Sistem
Analisis sistem merupakan penguraian dari suatu sistem yang utuh ke dalam
bagian-bagian komponennya yang dimaksudkan untuk mengidentifikasi dan
mengevaluasi segala permasalahan dan hambatan yang terjadi serta kebutuhan yang
diharapkan dapat menjadi acuan untuk diusulkannya perbaikan-perbaikan.
Tahap analisis sistem ini sangat penting karena apabila terjadi kesalahan
dalam tahap ini akan mengakibatkan kesalahan pada tahap selanjutnya, untuk itu
diperlukan tingkat ketelitian dan kecermatan yang tinggi untuk dapat mendapatkan
kualitas kerja sistem yang baik.
Analisis Masalah
Analisis masalah merupakan penjabaran tentang masalah apa saja yang ada
sebelum dibangun dan bermaksud untuk membantu siswa dalam belajar materi
ikatan kimia pada mata pelajaran kimia untuk kelas X di lingkungan SMA Negeri
7 Bandung. Analisis masalah yang ada meliputi hal-hal sebagai berikut:
1. Sistem pembelajaran kurang interaktif dan variatif.
2. Kurangnya media pembelajaran ikatan kimia, membuat siswa kesulitan
belajar diluar jam sekolah.
3. Guru mengalami kesulitan dalam melihat pemahaman setiap siswa
32
Analisis Aplikasi Sejenis
Analisis aplikasi sejenis merupakan analisis yang akan membahas mengenai
aplikasi yang menjadi acuan dalam pembangunan sebuah aplikasi. Dalam aplikasi
sejenis akan dibahas mengenai berbagai hal yang ada didalam aplikasi sejenis
diantaranya meliputi konten, materi yang disampaikan, model/metode yang
digunakan, untuk menjadi acuan bagi kebutuhan yang dibangun. Berikut sedikit
ulasan mengenai aplikasi yang akan dibahas yaitu Elements: The Periodic Table
dan Interactive the Periodic Table.
Elements: The Periodic Table
Aplikasi Elements: The Periodic Table berjalan pada sistem operasi
windows 8. Software ini mengangkat materi sistem periodik tabel unsur dan
pengenalan atom. Konten pada aplikasi ini berisi tentang atom dengan konfigurasi
elektron bilangan kuantum yang menjelaskan konfigurasi elektron pada setiap
orbital subkulit, juga pembagian elektron perkulit, dan properti-properti atom
lainnya, seperti nilai titik didih, tingkat keeletronegatifan, dan spesifikasi energi
lainnya. Software ini tersedia di apps store microsoft secara gratis.
Gambar 3.1 Tampilan awal aplikasi
33
Gambar 3.2 Tampilan Informasi Atom
Gambar 3.3 Tampilan Informasi Atom
Interactive the Periodic Table
Aplikasi ini berbasis web yang dipublis oleh learner.org, yaitu sebuah web
yang memiliki banyak aplikasi pembelajaran berbantuan komputer. Aplikasi ini
memuat materi ikatan kimia. Gambaran secara umum aplikasi ini sebagai berikut:
1. Aplikasi menyediakan beberapa contoh atom dan molekul. Dibagi menjadi dua
bagian, kation dan anion.
2. Aplikasi memberikan instruksi kepada pengguna untuk menggabungkan kation
dengan anion untuk membentuk ikatan kimia.
34
3. Jika pengguna melakukan instruksi dengan benar, maka aplikasi memberikan
informasi tentang molekul dan rumus molekul hasil dari eksperimen pengguna.
Gambar 3.4 Tampilan Awal Apliasi
Gambar 3.5 Tampilan Kation dan Anion Sebelum Berikatan
35
Gambar 3.6 Tampilan Kation dan Anion yang Berikatan
Gambar 3.7 Tampilan Informasi Molekul Baru
Kesimpulan Hasil Analisis Aplikasi Sejenis
A. Hasil analisis Aplikasi Elements: The Periodic Table adalah sebagai berikut:
1. Aplikasi ini menggunakan metode tutorial
2. Aplikasi ini merupakan sistem periodik unsur dalam bentuk aplikasi
interaktif. Sistem periodik unsur sendiri, merupakan pegangan wajib
siswa untuk belajar kimia.
36
3. Aplikasi ini hanya memberikan informasi tentang atom/unsur, tanpa
disediakan nya materi ataupun evaluasi terhadap pengguna.
4. Aplikasi ini menggunakan metode tutorial bercabang, yaitu informasi
disampaikan sesuai keinginan pengguna terhadap atom yang
dipilih/diklik.
B. Hasil analisis interactive the Periodic Table
1. Aplikasi ini menggunakan metode eksperimen.
2. Aplikasi menyediakan contoh kation dan anion sebagaiberikatan
3. Aplikasi ini tidak hanya menyediakan atom sebagai bahan eksperimen,
tapi juga menyediakan molekul yang sudah berikatan.
4. Informasi yang disampaikan pada aplikasi ini hanya nama molekul dan
rumus molekul yang terbentuk, tanpa disertakan informasi dan
gambaran geometri molekul dan jenis ikatan kimia.
5. Aplikasi menggunakan grafis 2D.
Analisis Model
Aplikasi Pembelajaran Ikatan Kimia ini dibangun dengan menggunakan
pendekatan model tutorial dan model penemuan(discovery). Pada bagian materi,
aplikasi menggunakan pendekatan model tutorial, penyajian materi menggunakan
bantuan teks, animasi 2D dan model 3D interaktif. Model tutorial menyampaikan
materi sesuai dengan bahan yang akan diajarkan. Dengan menggunakan model
tutorial, siswa dapat belajar diluar jam sekolah, karena model tutorial pada dasarnya
dibangun dengan tujuan dapat menggantikan peran pengajar . Dalam beberapa hal,
tutorial diperlukan agar membantu siswa dalam mengatasi masalah belajarnya.
Biasanya dengan bantuan navigasi materi yang diajarkan, tutorial akan
memudahkan siswa mempelajari bagian-bagian materi tertentu.
Penyajian materi dengan menggunakan model tutorial bercabang
(branching). Siswa dapat mempelajarai materi ikatan kimia secara menyeluruh
maupun hanya subbab-subbab tertentu dari materi ikatan kimia. Dengan asumsi,
setiap siswa memiliki pengetahuan berbeda-beda tentang materi ikatan kimia,
pembelajaran tidak harus dimulai dari awal materi ikatan kimia, siswa bisa
langsung mengacu pada subbab tertentu dari materi ikatan kimia.
37
Berikut uraian peran pengajar, komputer, dan pelajar dengan melakakukan
pendekatan model tutorial dapat dilihat pada Gambar 3.8.
Pengajar Pelajar
Seleksi bahan materiMenyediakan soal evaluasi
Menyajikan MateriMenyajikan Evaluasi
Menyimpan hasil evaluasi
Menjawab PertanyaanMenyajikan hasil evaluasi siswa
Gambar 3.8 Uraian Pendekatan Model Tutorial
Aplikasi juga menanamkan pendekatan terhadap model penemuan
(discovery) pada fitur sistem periodik unsur interaktif, dimana siswa bisa mencoba
menggabungkan atom satu dengan atom lainnya untuk melihat apakah atom-atom
tersebut bisa saling terikat membentuk ikatan kimia, jenis ikatan kimia dan juga
atribut-atribut penting molekul. Selain digabungkan, sistem periodik unsur
interaktif juga bisa melihat konfigurasi elektron, dan atribut-atribut atom yang perlu
diketahui siswa. Model penemuan (discovery) bersifat coba-coba atau trial dan
error dalam memecahkan suatu permasalahan.
Dari model penemuan (discovery), Siswa dapat mencari informasi dan
membuat kesimpulan dari sejumlah informasi yang telah dipelajarinya. Dari proses
belajar yang dilakukannya siswa dapat menemukan konsep dan pengetahuan baru
yang belum pernah dipelajari sebelumnya.
Berikut uraian peran pengajar, komputer, dan pelajar dengan melakakukan
pendekatan model penemuan (discovery) dapat dilihat pada Gambar 3.9. Gambar 3.8
Pengajar Pelajar
Menentukan bahan percobaan Menyajikan masalahMenyajikan Informasi
Melakukan percobaan
Gambar 3.9 Uraian Pendekatan Model Penemuan (Discovery)
Analisis Aplikasi Pembelajaran yang Dibangun
Aplikasi pembelajaran yang akan dibangun memuat pembelajaran untuk
mata pelajaran Kimia pada materi ikatan kimia. Aplikasi ini ditujukan untuk siswa
38
kelas X SMA N 7 Bandung untuk membantu siswa dalam memahami pelajaran
kimia pada materi ikatan kimia yang berisi banyak materi dan ilustrasi.
Analisi Materi
Materi yang diajarkan pada materi ikatan kimia sesuai Kurikulum 2013 yang
digunakan di SMA Negeri 7 Bandung. Ikatan Kimia memiliki tujuh subbab, antara lain:
1. Kestabilan unsur
2. Struktur/rumus Lewis
3. Ikatan ionik
4. Ikatan kovalen
5. Ikatan logam
6. Senyawa ionik dan kovalen
7. Geometri elektron dan bentuk molekul
Dari tujuh subbab ikatan kimia tersebut, SMAN 7 Bandung memiliki
kompetensi dasar yang ingin dicapai terhadap siswa adalah:
1. Siswa diharapkan mampu menuliskan/menggambarkan struktur lewis pada
molekul.
2. Siswa diharapkan memahami defenisi dan karakteristik jenis-jenis ikatan kimia.
3. Siswa diharapkan memahami teori vsper, yaitu teori untuk mempredisksi
geometri molekul.
4. Siswa diharapkan mengetahui karakteristik dan bentuk geometeri dari molekul
yang terbentuk akibat proses ikatan kimia.
Deskripsi Aplikasi Pembelajaran Ikatan Kimia
Aplikasi ini dibangun untuk digunakan oleh siswa kelas X SMAN 7 Bandung
dalam membantu proses belajar mengajar siswa yang cenderung kesulitan dalam
memahami materi ikatan kimia. Selain siswa, aplikasi ini juga ditujukan kepada
guru, untuk memudahkan guru memonitoring kegiatan belajar siswa diluar jam
sekolah. Pada aplikasi ini guru dikategorikan menjadi dua tipe, yaitu guru sebagai
pengajar, bertujuan untuk memonitoring kegiatan belajar siswa, dan guru
koordinator untuk mengolah data guru pengajar.
39
Pada bagian siswa, ada tiga fitur yang disediakan untuk menunjang proses belajar
mengajar yaitu antara lain,
1. Materi, berisi materi ikatan kimia yang diambil dari beberapa buku Kimia.
2. Sistem periodik unsur, berisi tabel periodik unsur interaktif bertujuan untuk
percobaan siswa terhadap kepahaman materi.
3. Evaluasi, berisi kumpulan sal yang ditambhakan oleh guru untuk mengetahui
kepahaman siswa terhadap materi.
Aplikasi menyajikan materi ikatan kimia dengan bantuan teks narasi,
animasi 2D, dan model 3D interaktif.
3.1.4.2.1 Blok Diagram utama
Blok diagram utama menjelaskan peran keseluruhan jenis pengguna meliputi,
siswa, guru koordinator dan guru(pengajar) terhadap aplikasi yang dibangun, dapat
dilihat pada Gambar 3.10.
Materi
Menampilkan aplikasi
Pembelajaran ikatan kimia
Sistem
periodik unsur
interaktif
Evaluasi
Menampilkan halaman guru
aplikasi
Pembelajaran ikatan kimia
Data Guru
Data Siswa
Data Soal
Data Molekul
DATABASE
Menampilkan halaman
guru koordinator
aplikasi
Pembelajaran ikatan kimia
Gambar 3.10 Blok Diagram Utama
40
Pada Gambar 3.10 menjelaskan tugas/peran pengguna antara lain:
1. Siswa
a. Mempelajari dan memahami materi yang disajikan.
b. Melakukan percobaan ikatan kimia pada sistem periodik unsur interaktif.
c. Melakukan Evaluasi
2. Guru Koordinator
a. Mengolah data guru (pengajar)
3. Guru
a. Mengolah data siswa.
b. Mengolah data soal.
c. Mengolah data molekul.
3.1.4.2.2 Blok Diagram Materi
Blok diagram materi menjelaskan peran aplikasi dalam membantu siswa memhami
materi ikatan kimia yang berisi ilustrasi. Gambar blok diagram materi dapa dilihat
pada Gambar 3.11.
Halaman Materi
Siswa memilih sub materi
dari materi ikatan kimia
dengan cara menglik
blok/gambar yang
disediakan
Tampilan materi
(teks, animasi 2D, 3D
interaktif)
Gambar 3.11 Blok Diagram Materi
Aplikasi berisi materi ikatan kimia, yang didalamnya meliputi 7 Subbab yang harus
dipahami oleh siswa. Siswa memilih subbab materi ikatan kimia yang ingin
dipelajari dengan cara mengklik gambar subbab yang disediakan, dalam subbab
materi ikatan kimia berisi konten materi yang disampaikan dengan bantuan teks
narasi, animasi 2D, dan model 3D interaktif.
41
3.1.4.2.3 Blok Diagram Sistem Periodik Unsur Interaktif
Blok diagram sistem periodik unsur interaktif menjelaskan peran aplikasi dalam
melihat kepahaman siswa terhadap materi yang telah dipelajari, dapan dilihat pada
Gambar 3.12.
Halaman
Sistem periodik
unsur interaktif
Atom Jenis_unsur
Siswa menggabungkan
atom 1 dengan atom
lainnya dengan cara
drag and drop
Cek hasil
penggabungan
Detail_
molekul
MolekulGeometri_molekul Jenis_ikatan_kimia
Informasi molekul
(teks, animasi 2D, 3D
interaktif)
Pengecekan
molekul
Ada
Tidak ada
Gambar 3.12 Blok Diagram Sistem Periodik Unsur Interaktif
Stage ini berisi tabel sistem periodik unsur pada umumnya, hanya saja
sistem periodik unsur ini didesain interaktif, siswa bisa bereksperimen
menggabungkan unsur satu dengan unsur lainnya dengan cara men-drag and drop
ke stage yang telah disediakan. Jika unsur-unsur yang digabungkan tersedia
didatabase yang diinputkan oleh guru, maka aplikasi akan menampilkan informasi
tentang molekul yang terbentuk.
3.1.4.2.4 Blok diagram Evaluasi
Blok diagram Evaluasi menjelaskan peran aplikasi dalam melihat pemahaman
siswa terhadap materi yang telah dipelajari, dapat dilihat pada Gambar 3.13.
42
Halaman
Evaluasi
Soal
Siswa menjawab setiap
soal yang diberikan
dengan cara mengklik
pilihan yang disediakan
Cek hasil jawaban
Detail_evaluasi
Total Nilai
(teks)
Hasil jawaban
Cek jumlah soalTidak
ada
Gambar 3.13 Blok Diagram Evaluasi
Ketarangan Evaluasi adalah sebagai berikut:
1. Siswa melakukan evaluasi, setalah mempelajari materi ikatan kimia, dan
melakukan percobaan ikatan kimia untuk melihat sejauh mana pemahaman
siswa terhadap materi ikatan kimia.
2. Jumlah soal adalah tergantung pada keinginan guru. pertanyaan dalam bentuk
pilihan ganda, soal dan opsi jawaban akan diacak.
3. Bentuk soal berupa teks.
4. Hasil evaluasi yang ditampilkan berupa skor dalam bentuk teks.
Komponen pada Aplikasi Pembelajaran Ikatan Kimia
Adapun komponen pada Aplikasi Pembelajaran Ikatan Kimia dapat dilihat pada
Tabel 3.1
Tabel 3.1 Komponen pada Aplikasi Pembelajaran Ikatan Kimia
No komponen Keterangan
1 Menu Aplikasi ini memiliki menu yaitu:
1. Menu Materi dan Evaluasi
2. Menu Sistem periodik unsur, pengenalan atom dan simulasi
ikatan kimia
2 Informasi Memberikan informasi mengenai materi ikatan kimia, antara lain
informasi atom beserta nilai-nilai property nya, jenis ikatan kimia
yang disampaikan berupa teks dan animasi
3 Grafis Aplikasi ini memiliki grafis 2 dan 3 dimensi.
43
4 Fungsi
Aplikasi
Aplikasi ini berfungsi sebagai berikut:
1. Berfungsi untuk mengenalkan materi ikatan kimia pada siswa
kelas X
2. Memberikan evaluasi terhadap siswa
Offline Web Apps
HTML5 menyediakan mekanisme caching aplikasi, yang memungkinkan
aplikasi berbasis web berjalan offline. Pengembang dapat menggunakan
Application Cache (AppCache) untuk menentukan sumber daya apa saja yang
harus di-cache dan membuat tersedia untuk pengguna offline. Keuntungan utama
dalam membangun aplikasi dengan mekanisme chace adalah, pengguna tetap dapat
mengakses website dalam keaadan offline, serta kecepatan dalam mengambil
sumberdaya aplikasi yang telah tersedia pada harddrive client jauh lebih cepat.
Dengan memanfaat kan fitur ini, aplikasi ikatan kimia berbasis web akan dapat
diakses dalam keaadan offline.
Arsitektur aplikasi pada aplikasi ikatan kimia berbasis web dapa dilihat pada
Gambar 3.14.
Include/modul.php
Login.php Evaluasi.phpMateriSistem Periodik Unsur
Interaktif
Halaman Guru Koordinator
Halaman Guru
CSSJavascript
Arsitektur Client Arsitektur Server
Gambar 3.14 Arsitektur Aplikasi
Pada Gambar 3.14, dapat dilihat arsitektur client nantinya akan dapat
diakses dalam keaadan offline. Bagian aplikasi yang di-chacing merupakan bagian
yang hanya membaca sumberdaya basis data.
44
Setelah sebagian aplikasi di-chacing, sejumlah sumberdaya basisdata juga
disimpan ke browser untuk menunjang performansi aplikasi dalam mode offline.
Provider yang digunakan untuk menyimpan sumberdaya basisdata kedalam
browser adalah LocalStorage. LocalStorage dipilih karena dari semua provider
client side database, hanya LocalStorage yang support pada semua browser, karena
hanya bersifat membaca data, LocalStorage yang tidak mendukung relasi antar
tabel cocok digunakan pada aplikasi ini.
Arsitektur basis data pada aplikasi ini dapat dilihat pada Gambar 3.15.
BASIS DATA
Atom
Molekul
Detail Molekul
Jenis Ikatan Kimia
Geometri molekul
siswa
Guru
Evaluasi
Soal
Jenis Unsur
LocalStorage
Gambar 3.15 Arsitektur Basisdata
Pada Gambar 3.15 dapat dilihat data pada tabel atom, molekul, jenis ikatan kimia,
detail molekul, geometri molekul, dan jenis unsur disimpan ke dalam LocalStorage.
Semua data pada tabel tadi, digunakan pada halaman sistem periodik unsur
interaktif.
Spesifikasi Kebutuhan Perangkat Lunak
Spesifikasi kebutuhan perangkat lunak merupakan kebutuhan perangkat
lunak sebagai hasil dari proses analisis yang dilakukan dalam konteks
45
pengembangan perangkat lunak.. Analisis spesifikasi kebutuhan perangkat lunak
yang akan dijelaskan adalah analisis spesifikasi kebutuhan fungsional dan non
fungsional. Analisis spesifik kebutuhan perangkat lunak fungsional dapat dilihat
pada Tabel 3.2.
Tabel 3.2 Spesifikasi Kebutuhan Fungsional
No Kode kebutuhan Deskripsi Kebutuhan
1 SKPL-PBKF-01 Siswa dapat memilih dan melihat materi
2 SKPL-PBKF-02 Siswa dapat melakukan eksperimen ikatan
kimia
3 SKPL-PBKF-03 Siswa dapat melakukan evaluasi
4 SKPL-PBKF-04 Guru dapat mengolah data soal
5 SKPL-PBKF-05 Guru dapat mengolah data molekul
6 SKPL-PBKF-06 Guru koordinator dapat mengolah data guru
Analisis spesifik kebutuhan perangkat lunak non fungsional dapat dapat
dilihat pada Tabel 3.3
Tabel 3.3 Spesifikasi Kebutuhan Non Fungsional
No Kode kebutuhan Deskripsi Kebutuhan
1 SKPL-PBKNF-01 Sistem yang dibangun berbasis Website
2 SKPL- PBKNF -02 Menggunakan tampilan yang menarik dan
interaktif
3 SKPL- PBKNF -03 Aplikasi akan menampilkan data sesuai dengan
keinginan pengguna
4 SKPL- PBKNF -04 Antarmuka dengan pengguna menggunakan
bahasa Indonesia
Analisis Kebutuhan Non-Fungsional
Analisis kebutuhan non-fungsional menjelaskan kebutuhan luar sistem yang
diperlukan untuk menjalankan aplikasi yang dibangun. Adapun kebutuhan non-
fungsional pada Aplikasi pembelajaran ikatan kimia berbasis web, meliputi
kebutuhan perangkat keras, kebutuhan perangkat lunak dan pengguna sistem yang
akan menggunakan aplikasi. Analisis kebutuhan non-fungsional bertujuan agar
aplikasi yang dibangun dapat digunakan sesuai dengan kebutuhan.
Analisis Perangkat Keras
Berikut spesifikasi standar perangkat keras yang dapat digunakan untuk
aplikasi Pembelajaran Ikatan Kimia dapat dilihat pada Tabel 3.4
46
Tabel 3.4 Analisis Perangkat Keras
No Perangkat Keras Spesifikasi
1 Prosessor Processor dengan kecepatan minimal 1,8 Ghz
2 Monitor Monitor dengan resolusi 1024 x 768
3 VGA VGA minimal 256 MB
4 Hardisk 160 GB
5 Memori RAM minimal 1 GB
6 Lan Card Lan Card 10/100 Mbps
7 Koneksi Koneksi Internet minimal 64 kbps.
8 Keyboard Standar
9 Mouse Standar
Setelah melakukan analisis perangkat keras maka dapat diambil
kesimpulan, untuk mendapatkan tampilan maksimal dalam mengakses aplikasi
pembelajaran ikatan kimia berbasis web, perangkat keras minimal yang harus
digunakan seperti pada Tabel 3.4. Penggunaan VGA, Processor dan Memory
dengan spesifikasi pada Tabel 3.4 ataupun lebih, akan sangat membantu dalam
menghasilkan tampilan animasi 2D dan 3D.
Analisis Perangkat Lunak
Perangkat lunak merupakan sarana pendukung lainnya bagi pembangunan
aplikasi sistem evaluasi pelatihan ini. Adapun perangkat lunak yang disarankan
untuk menjalankan aplikasi ini dapat dilihat pada Tabel 3.5
Tabel 3.5 Analisis Perangkat Lunak
Perangkat Spesifikasi Kebutuhan Minimum Perangkat
Sistem
Operasi
Microsoft
Windows 7 32
bit
Microsoft Windows, Linux, Mac OS
Browser Mozilla Firefox
4, Chrome 10, IE
9
Mozilla Firefox 3.6, Chrome 10, IE 8
Setelah melakukan analisis perangkat lunak maka disimpulkan bahwa
perangkat lunak yang digunakan dengan spesifikasi pada Tabel 3.5 dapat
menjalankan aplikasi pembelajaran ikatan kimia dengan baik, karena aplikasi
memanfaatkan tekhnologi HTML5 yaitu offline mode dan client side database, dan
juga grafis 3D maka perangkat lunak dengan spesifikasi pada Tabel 3.5 dapat
menghasilkan tampilan maksimal.
47
Analisis Pengguna
Analisis pengguna dimaksudkan untuk mengetahu siapa saja pengguna yang
terlibat dalam penggunaan Aplikasi Pembelajaran Ikatan Kimia berbasis Web.
Aplikasi yang akan dibangun ini digunakan oleh tiga jenis pengguna utama yaitu
guru,guru koordinator dan siswa. Berikut rincian karakteristik pengguna, dapat
dilihat pada
Tabel 3.6 Analisis Pengguna
Pengguna Hak Akses Tanggung Jawab Tingkat keterampilan
Guru Mengelolah data
molekul, siswa, dan
soal
Tambah, edit dan hapus
data molekul, siswa dan
soal
Mengerti komputer dan
internet
Guru
Koordinator
Mengelolah data
guru
Tambah, edit dan hapus
data guru
Mengerti komputer dan
internet
Siswa Membaca materi,
Melakukan
eksperimen
pemahaman materi,
melakukan evaluasi
belajar.
Membaca materi,
Melakukan eksperimen
pemahaman materi,
melakukan evaluasi
belajar.
Mengerti komputer dan
internet
Analisis Data
Dalam memodelkan data dan hubungan-hubungan data yang ada pada
Aplikasi Pembelajaran Ikatan Kimia digunakan sebua alat bantu pemodelan yaitu
Entity Relationship Diagram (ERD) yang terdiri dari 6 entitas. Entity Relation
Diagram terdapat pada Gambar 3.16
48
GuruMengelola
1
MolekulMengelola
1
N AtomMemiliki NN
Siswa
Mengelola Soal Mengerjakan
N
N
1
nis
Username_guru
nama
Id_soalId_soalId_jawaban
Id_atom
Id_molekul
Id_atomId_molekul
Jenis_ikaktan_kimia Memiliki1
N
Id_ikatan
N
N
Jenis Unsur Memiliki1
N
Id_jenis
nis
Memiliki Geometri Molekul1
N
id_gm
Gambar 3.16 Entity Relationship Diagram (ERD)
Tabel 3.7 Kamus Data Entity Relationship Diagram (ERD)
No Nama Entitas
atau Relasi
Atribut
1 Siswa nis, nama, password, email
2 Guru Username_guru, nama, password, hak_akses
3 Atom id_atom, id_ju, nama_atom, simbol_atom, periode,
golongan, elektronegatifitas
4 Molekul id_molekul, gambar, id_jik, username_guru, id_gm,
keterangan
5 Detail_molekul Id_dm, id_molekul, no_atom, jumlah
6 Jenis_ikatan_kimia Id_jik, nama_ikatan, keterangan
7 Geometri_molekul Id_gm, nama_gm
49
8 Soal Id_soal, pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_d,
jawaban, username_guru
9 Detail_Evaluasi Id_de, Id_soal,nis, opsi_a, opsi_b, opsi_c, opsi_d, opsi_d,
jawaban, jawaban_benar
10 Jenis_unsur Id_ju , nama_jenis, warna_jenis
Analisis Kebutuhan Fungsional
Analisis kebutuhan fungsional menggambarkan kebutuhan sistem yang
akan dibangun pada Aplikasi Pembelajaran Ikatan Kimia. Adapun kebutuhan
fungsional pada Aplikasi Pembelajaran yang akan dibangun ini dengan
pemodelan terstruktur. Pemodelan terstruktur merupakan perangkat lunak yang
gunakan pada pembanguan Pembelajaran Interaktif ini dengan tools Microsoft
Office Visio yang terdiri dari Analisis Kebutuhan Data, DK (Conteks Diagram),
DFD (Data Flow Diagram). Terdapat juga Spesifikasi Proses yang menjelaskan
tentang alur aliran data dari DFD (Data Flow Diagram) dan Kamus Data.
Diagram Konteks (Context Diagram)
Diagram Konteks adalah diagram yang menggambarkan input, process dan
output pada sistem perangkat lunak yang akan dibangun. Berikut Diagram konteks
dari Aplikasi Pembelajaran Ikatan Kimia, dapat dilihat pada Gambar 3.17.
Siswa
Aplikasi
Pembelajaran
Ikatan Kimia
Data LoginData Pendaftaran
Data lupa passwordData sub bab Materi
Data AtomData MolekulData Jawaban
Data Nilai
Informasi LoginInformasi Pendaftaran
Informasi lupa passwordInformasi Atom
Informasi MolekulInformasi Jawaban
Informasi Nilai
Guru
Data LoginData lupa password
Data SoalData Siswa
Data Molekul
Informasi LoginInformasi lupa password
Informasi SoalInformasi Siswa
Informasi Molekul
Mail Server
Info lupa password
GuruKoordinator
Informasi LoginInformasi lupa password
Informasi Guru
Data LoginData lupa password
Data Guru
Gambar 3.17 Diagram Konteks (Context Diagram)
50
DFD (Data Flow Diagram)
Data Flow Diagram merupakan suatu media yang digunakan untuk
mengGambarkan aliran data yang mengalir pada suatu sistem informasi. Dalam
Data Flow Diagram (DFD) terdiri atas entitas luar, aliran data, proses dan
penyimpanan data. Berikut adalah DFD dari Aplikasi Pembelajaran Ikatan Kimia:
a. DFD Level 1 Aplikasi Pembelajaran Ikatan Kimia
Gambar DFD Level 1 berikut ini menjelaskan bahwa pengguna Aplikasi
pembelajaran Ikatan Kimia dapat melakukan akses pada aplikasi dengan memilih
menu yang ada ke dalam sistem sebagai admin, guru dan siswa yang di dalamnya
terdapat beberapa pilihan yang berbeda sesuai hak akses pada setiap pengguna.
51
1
Login
Guru
6Pengolahan Data
Siswa
7Pengolahan Data
Guru
5Pengolahan Data
Soal
4Pengolahan Data
Jawaban
Siswa
Data Login
Informasi Login
Data Jawaban
Informasi Jawaban
Data Login
Informasi Login
Data Guru
Informasi Guru
Data S iswa
Info Siswa
Info Soal
Informasi Soal
Guru
Data guru
Data guru
Data guru
Data guru
Siswa
Data siswa
Data siswa
Data siswa
Data siswa
Soal
Data soal
Data soal
Data soal
Data soal
Detail_evaluasi
Data Jawaban
Data Jawaban
Nilai
Data ni lai
Data ni lai
Data Nilai
3Pendaftaran
Informasi Pendaftaran
Data Pendaftaran
Data Pendaftaran
Data Pendaftaran
8Pengolahan Data
Molekul
Atom
Molekul
Detail_molekul
Jenis_ikatan_kimia
Geometri_molekulData molekul
Informasi molekul
Data
jenis_ikatan_kimia
Data
atom
Data
Geometri_molekul
Data molekul
Data molekul
Data detai l_molekul
Data detai l_molekul
2Verivikasi Lupa
Password
Mail server
Informasi Lupa passwordData guru
Informasi guru
Data Emai l
Informasi Lupa Password
Guru
Koordinator
9Tampil Sub bab
Materi
Data Login
Informasi Login
Data guru
Data guru
Data guru
Informasi guru
Data Sub bab Materi
Informasi Sub bab Materi
10Tampil
Sistem Periodik Unsur Interaktif
Data Atom
Informasi Atom
Data Molekul
Data Geometri Molekul
Data Atom
Data Atom
Data Jenis_ikatan_kimia
Data Molekul
Informasi Molekul
Gambar 3.18 DFD level 1
52
a. DFD Level 2 Proses Verifikasi Lupa Password
DFD Level 2 proses verifikasi lupa password, terdapat 3 proses didalamnya,
yaitu: memvalidasi email, mencari email dan mengirim URL ke mailserver.
Pengguna yang terlibat dalam proses ini adalah siswa. Proses-proses tersebut dapat
dilihat pada Gambar 3.19.
siswa
2.1Memvalidasi
informasi Validasi Email
Data Email
2.2Mencari Email
2.3Mengirim URL lupa password
Data email
SiswaData email
Mail ServerData URL
informasi Pencarian Email
informasi URL lupa password
Data email
Gambar 3.19 DFD Level 2 Proses Verifikasi Lupa Password
a. DFD Level 2 Proses Pengolahan Data Jawaban
DFD Level 2 proses pengolahan data Jawaban, terdapat 2 proses
didalamnya, yaitu: pengolahan jawaban, dan lihat nilai. Pengguna yang terlibat
dalam proses ini adalah siswa. Proses-proses tersebut dapat dilihat pada Gambar
3.20
siswa
4.1Pengolahan
Jawaban
4.2Pengolahan
NilaiDetail_evaluasi
informasi soal
Data Jawaban Data Jawaban
Data Jawaban
informasi Nilai
Data Nilai
Data Nilai
Soal
Data Soal
Data Soal
Gambar 3.20 DFD Level 2 Proses Pengolahan Data Jawaban
53
b. DFD Level 2 Proses Pengolahan Data Soal
DFD Level 2 proses pengolahan data Soal, terdapat 4 proses didalamnya,
yaitu: Tambah, edit, cari dan hapus. Pengguna yang terlibat dalam proses ini adalah
guru. Proses-proses tersebut dapat dilihat pada Gambar 3.21
Guru
5.1Tambah Data
soal
5.2Edit Data soal
5.3Hapus Data
soal
soal
informasi soal
Data soal Data soal
Data soal
informasi soal
Data soal
informasi soal
Data soal Data soal
Data soal
Data soal
Data soal
5.4Cari Data soal
informasi soal
Data soal
Data soal
Data soal
Gambar 3.21 DFD Level 2 Proses Pengolahan Data Soal
c. DFD Level 2 Proses Pengolahan Data Siswa
DFD Level 2 proses pengolahan data Siswa, terdapat 2 proses didalamnya,
yaitu: cari dan hapus. Pengguna yang terlibat dalam proses ini adalah guru. Proses-
proses tersebut dapat dilihat pada Gambar 3.22
Guru
6.1Hapus Data
siswa
siswa
informasi siswa
Data siswa Data siswa
Data siswa
6.2Cari Data siswa
informasi siswa
Data siswa
Data siswa
Data siswa
Gambar 3.22 DFD Level 2 Proses Pengolahan Data Siswa
54
e. DFD Level 2 Proses Pengolahan Data Guru
DFD Level 2 proses pengolahan data Guru, terdapat 2 proses didalamnya, yaitu:
Tambah dan hapus. Pengguna yang terlibat dalam proses ini adalah guru. Proses-
proses tersebut dapat dilihat pada Gambar 3.23
GuruKoordinator
7.1Tambah Data
Guru
7.2Hapus Data
Guru
Guru
informasi Guru
Data Guru Data Guru
Data Guru
informasi Guru
Data Guru Data Guru
Data Guru
Gambar 3.23 DFD Level 2 Proses Pengolahan Data Guru
f. DFD Level 2 Proses Pengolahan Data Molekul
DFD Level 2 proses pengolahan data Molekul, terdapat 4 proses
didalamnya, yaitu: Tambah, edit, cari dan hapus. Pengguna yang terlibat dalam
proses ini adalah guru. Proses-proses tersebut dapat dilihat pada Gambar 3.24
Data detail_molekul
Guru
8.1Tambah Data
molekul
8.2Edit Data molekul
8.3Cari Data molekul
molekul
informasi molekul
Data molekul
Data molekul
Data molekul
informasi molekul
Data molekul
Data molekul
Data molekul
Data molekul
Data molekul
8.4Hapus Data
molekul
Data molekul
Data molekul
Atom
Data geometri_molekul
Data jenis_ikatan_kimia
informasi molekul
Data molekul
Detail_molekul
Data atom
Data atom
Geometri_molekul
Jenis_ikatan_kimia
Data jenis_ikatan_kimia
Data jenis_ikatan_kimia
Data geometri_molekul
Data geometri_molekul
Data atom
Data molekul
informasi molekul
Data detail_molekul
Data detail_molekul
Gambar 3.24 DFD Level 2 Proses Pengolahan Data Molekul
55
g. DFD Level 2 Tampil sub bab Materi ikatan kimia
DFD Level 2 materi ikatan kimia terdapat 7 proses didalamnya. Proses-proses
tersebut dapat dilihat pada Gambar 3.25.
siswa
9.1Tampil Sub bab
Kestabilan Unsur
Informasi Materi kestabilan unsur
Data Materi kestabilan unsur
9.2Tampil Sub babStruktur/Rumus
Lewis
9.3Tampil Sub bab
Ikatan Ionik
9.4Tampil Sub babIkatan Kovalen
9.5Tampil Sub babIkatan Logam
9.6Tampil Sub bab Senyawa Ionik Dan Kovalen
9.7Tampil Sub bab
Geometri ElektronDan Kerja Sama
Dalam Ikatan Kimia
Informasi Struktur/Rumus Lewis
Data Struktur/Rumus Lewis
Informasi Ikatan Ionik
Data Ikatan Ionik
Informasi Ikatan Kovalen
Data Ikatan Kovalen
Informasi Ikatan Logam
Data Ikatan Logam
Informasi Senyawa Ionik Dan Kovalen
Data Senyawa Ionik Dan Kovalen
Informasi Materi Geometri E lektron Dan
Ker ja Sama Dalam Ikatan Kimia
Data Materi Geometri Elektron Dan
Ker ja Sama Dalam Ikatan Kimia
Gambar 3.25 DFD Level 2 Tampil sub bab Materi Ikatan Kimia
56
h. DFD Level 2 Sistem periodik unsur interaktif
DFD Level 2 Sistem periodik unsur interaktif terdapat 2 proses didalamnya.
Proses-proses tersebut dapat dilihat pada Gambar 3.26.
Siswa
10.1Menggabungkan
atom
Informasi molekul
Data molekul
Atom
Data atom
10.2Tampil
Informasirmasi atom
Data atom
Informasi atom
Data atom
Detail_molekul
Data atom
MolekulJenis_ikatan_kimia
Geometri_molekul
Data Molekul
Data detail_molekul
Data Jenis_ikatan_kimia
Data Geometri_molekul
Gambar 3.26 DFD Level 2 Sistem Periodik Unsur Interaktif
Spesifikasi Proses
Spesifikasi proses merupakan deskripsi dari setiap elemen proses yang
terdapat dalam program, yang meliputi nama proses, input, output dan keterangan
dari proses. Berikut ini spesifikasi proses dari Aplikasi pembelajaran ikatan kimia
berbasis web dapat dilihat pada Tabel 3.8.
Tabel 3.8 Spesifikasi Proses
No Proses Keterangan
1 No. Proses 1
Nama Login
Source
(Sumber)
Siswa, Guru
Deskripsi Proses untuk bisa mengakses aplikasi pembeajaran ikatan kimia
berbasis web
Input Data login guru, data login Siswa
Output Info login guru, info login Siswa.
Logika
Proses
1. guru/guru koordinator/ siswa memasukan data login
2. Sistem akan memverifikasi data login ke data store Jika
verifikasi sukses maka guru/ siswa masuk ke sistem
3. Jika verifikasi gagal maka akan menampilkan info gagal login
2 No. Proses 2
Nama Lupa password
Source
(Sumber)
Siswa, Guru, Guru koordinator
Deskripsi Proses merubah password, karena guru/guru koordinator/siswa
lupa password
57
Input Email
Output Info email valid
Logika
Proses
1. Guru/ Guru koordinator /Siswa memasukkan email pada lupa
password
2. Apabila email yang diinputkan benar, sistem mengirim link
halaman untuk merubah password ke email guru/siswa
3. Apabila email yang diinputkan tidak valid, sistem
menampilkan pesan email tidak valid
4. Apabila email tidak terdaftar di datastore , sistem
menampilkan pesan email tidak terdaftar.
3 No.Proses 3
Nama Pendaftaran
Source
(Sumber)
Siswa
Deskripsi Proses untuk melakukan pendaftaran
Input Data Siswa
Output Info Siswa
Logika
Proses
1. Sistem menampilakan form untuk melakukan pendaftaran
2. Jika data yang diinputkan valid, sistem akan menyimpan data
siswa
3. Jika data tersebut tidak valid, sistem akan mengeluarkan
pesan gagal.
4 No.Proses 4
Nama Pengolahan jawaban
Source
(Sumber)
Siswa
Deskripsi Pengisisan jawaban pada evaluasi
Input Data jawaban siswa,
Output Info jawaban
Logika
Proses
1. Siswa memilih jawaban pada soal evaluasi
2. Sistem akan menyimpan jawaban siswa, dan
mengakumulasikan nya menjadi nilai
5 No.Proses 5
Nama Pengolahan data soal
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan pengolahan data soal
Input Data soal
Output Info soal
Logika
Proses
1. Guru memilih menu soal
2. Guru melakukan pengolahan data soal
3. Sistem akan menampilkan info soal, serta tombol untuk
melakukan pengolahan data soal
6 No.Proses 5.1
Nama Tambah data soal
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan penambahan data soal
Input Data soal
58
Output Info soal
Logika
Proses
1. Guru menekan tombol tambah soal
2. Sistem menampilkan form tambah soal.
3. Guru melakukan penambahan data soal.
4. Jika inputan lengkap dan benar, maka Sistem menyimpannya
ke storage soal
5. Jika inputan tidak lengkap, maka sistem menampilkan pesan
kesalahan dan lengkapi formulir penambahan data soal
7 No.Proses 5.2
Nama Edit data soal
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan pengeditan data soal
Input Data soal
Output Info soal
Logika
Proses
1. Guru menekan tombol edit soal
2. Sistem akan menampilkan form edit data soal.
3. Jika inputan lengkap dan benar, maka Sistem menyimpannya
ke storage soal
4. Jika inputan tidak lengkap, maka sistem menampilkan pesan
lengkapi formulir penambahan data soal
8 No.Proses 5.3
Nama Hapus data soal
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan penghapusan data soal
Input Data soal
Output Info soal
Logika
Proses
1. Guru menekan tombol hapus soal
2. Sistem akan menampilkan form dan informasi data soal yang
akan dihapus.
3. Jika Guru ingin menghapus data soal tersebut, maka tekan
tombol hapus, maka Sistem akan menghapus data soal dari
storage soal, dan sistem akan menampilkan pesan data
berhasil dihapus
4. Jika guru ingin membatalkan proses hapus data soal, tekan
tombol tutup
9 No.Proses 5.4
Nama Cari data soal
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan pencarian data soal
Input Data soal
Output Info soal
Logika
Proses
1. Guru memasukkan data soal yang ingin dicari pada form.
2. Sistem akan melakukan pencarian data soal
3. Jika data yang dicari ditemukan, maka Sistem menampilkan
data soal yang cocok
59
4. Jika data yang dicari tidak ada, maka sistem akan
menampilakan pesan tidak ada data soal yang cocok
10 No.Proses 6
Nama Pengolahan data siswa
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan pengolahan data siswa
Input Data Siswa
Output Info Siswa
Logika
Proses
1. Guru melakukan pilihan menu pada pengolahan data siswa.
2. Sistem akan menampilakn form dan informasi data siswa
serta tombol-tombol untuk melakukan penglahan data siswa.
11 No.Proses 6.1
Nama penghapusan data siswa
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan penghapusan data siswa
Input Data Siswa
Output Info Siswa
Logika
Proses
1. Guru memilih data siswa yang akan dihapus.
2. Sistem akan menampilkan pesan konfirmasi data siswa yang
akan dihapus.
3. Jika Guru ingin menghapus data siswa tersebut, maka tekan
tombol hapus, maka Sistem akan menghapus data siswa dari
storage siswa, dan sistem akan menampilkan pesan data
berhasil dihapus.
4. Jika guru ingin membatalkan proses hapus data siswa, tekan
tombol tutup
12 No.Proses 6.2
Nama pencarian data siswa
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan pencarian data siswa
Input Data Siswa
Output Info Siswa
Logika
Proses
1. Guru memasukkan nama atau nis siswa yang ingin dicari.
2. Jika data yang dicari ditemukan, maka Sistem menampilkan
data siswa yang cocok
3. Jika data yang dicari tidak ada, maka sistem akan
menampilakan tabel kosong
13 No.Proses 7
Nama Pengolahan data Guru
Source
(Sumber)
Guru koordinator
Deskripsi Proses untuk melakukan pengolahan data guru
Input Data guru
Output Info guru
Logika
Proses
1. Guru koordinator, akan melakukan penambahan data guru
60
2. Guru dapat melakukan penambahan dan penghapusan data
guru
3. Jika inputan valid, data akan disimpan ke storege guru
4. Jika inputan tidak valid, sistem akan menampilkan info
kesalahan data yang diinputkan
14 No.Proses 7.1
Nama Tambah data Guru
Source
(Sumber)
Guru koordinator
Deskripsi Proses untuk melakukan penambahan data guru
Input Data guru
Output Info guru
Logika
Proses
1. Guru koordinator menekan tombol tambah
2. Sistem akan menmpilkan form tambah guru.
3. Guru koordinator melakukan penambahan data guru.
4. Jika inputan valid maka sistem menyimpannya ke storage
guru
5. Jika inputan tidak valid, sistem akan menampilkan info
kesalahan inputan
15 No.Proses 7.2
Nama Hapus data Guru
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan panghapusan data guru
Input Data guru
Output Info guru
Logika
Proses
1. Guru koordinator memilih guru yang ingin dihapus, dengan
menekan tombol hapus pada setiap data guru.
2. Sistem akan menampilkan pesan konfirmasi data guru yang
akan dihapus.
3. Jika Guru koordinator ingin menghapus data guru tersebut,
maka tekan tombol hapus, maka Sistem akan menghapus data
guru dari storage guru, dan sistem akan menampilkan pesan
data berhasil dihapus.
4. Jika guru koordinator ingin membatalkan proses hapus data
guru, tekan tombol tutup.
16 No.Proses 8
Nama Pengolahan data Molekul
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan pengolahan data molekul
Input Data molekul
Output Info molekul
Logika
Proses
1. Guru melakukan pengolahan data molekul
2. Sistem akan menmpilkan info molekul, serta tombol untuk
melakukan pengolahan data molekul
17 No.Proses 8.1
Nama Tambah data molekul
61
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan penambahan data molekul
Input Data molekul
Output Info molekul
Logika
Proses
1. Sistem akan menmpilkan form tambah molekul.
2. Guru melakukan penambahan data molekul.
3. Jika inputan lengkap dan benar, maka Sistem menyimpannya
ke storage molekul dan detail_molekul
4. Jika inputan tidak lengkap, maka sistem menampilkan info
lengkapi formulir penambahan data molekul
18 No.Proses 8.2
Nama Edit data molekul
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan pengeditan data molekul
Input Data molekul
Output Info molekul
Logika
Proses
1. Guru memilih molekul yang ingin diedit, dengan menekan
tombol edit pada setiap data molekul.
2. Sistem akan menmpilkan form edit data molekul.
3. Jika inputan lengkap dan benar, maka Sistem mengubah
record data molekul di storage molekul dan detail_molekul
4. Jika inputan tidak lengkap, maka sistem menampilkan info
lengkapi formulir edit data molekul
19 No.Proses 8.3
Nama Hapus data molekul
Source
(Sumber)
Guru
Deskripsi Proses untuk melakukan penghapusan data molekul
Input Data molekul
Output Info molekul
Logika
Proses
1. Guru memilih data molekul yang ingin dihapus, dengan
menekan tombol hapus pada setiap data molekul.
2. Sistem akan menampilakan pesan konfirmasi data molekul
yang akan dihapus.
3. Jika Guru ingin menghapus data molekul tersebut, maka tekan
tombol hapus, maka Sistem akan menghapus data molekul
dari storage molekul, dan sistem akan menampilkan pesan
data berhasil dihapus.
4. Jika guru ingin membatalkan proses hapus data molekul,
tekan tombol tutup.
20 No.Proses 9
Nama Tampil Materi
Source
(Sumber)
Siswa
Deskripsi Menampilkan 7 Sub bab materi ikatan kimia
Input Data Materi Sub bab Ikatan Kimia
Output Info Materi Sub bab Ikatan Kimia
62
Logika
Proses
1. Sistem menampilkan 7 subbab materi ikatan kimia
2. Siswa memilih salah satu subbab ikatan kimia
3. Sistem menampilkan materi pada subbab yang dipilih oleh
siswa.
21 No.Proses 9.1
Nama Tampil Subbab Kestabilan Unsur
Source
(Sumber)
Siswa
Deskripsi Menampilkan materi ikatan kimia Sub bab kestabilan unsur
Input Data Materi Sub bab Ikatan Kimia Sub bab kestabilan unsur
Output Info Materi Sub bab Ikatan Kimia Sub bab kestabilan unsur
Logika
Proses
1. Siswa memilih menu subbab kestabilan unsur
2. Sistem Menampilkan materi ikatan kimia Sub bab kestabilan
unsur
3. Siswa menekan tombol selanjutnya dan sebelumnya, untuk
pindah dari halaman satu kehalaman lainnya.
4. Siswa melakukan interaksi terhadap ilustrasi yang disajikan
dengan bantuan mouse
5. Siswa menakan tombol tutup untuk kembali ke halaman awal
materi
22 No.Proses 9.2
Nama Struktur/Rumus Lewis
Source
(Sumber)
Siswa
Deskripsi Menampilkan materi ikatan kimia Sub bab Struktur/Rumus Lewis
Input Data Materi Sub bab Ikatan Kimia Sub bab Struktur/Rumus Lewis
Output Info Materi Sub bab Ikatan Kimia Sub bab Struktur/Rumus Lewis
Logika
Proses
1. Siswa memilih menu subbab struktur/rumus lewis
2. Sistem Menampilkan materi ikatan kimia Sub bab
Struktur/Rumus Lewis
3. Siswa menekan tombol selanjutnya dan sebelumnya, untuk
pindah dari halaman satu kehalaman lainnya.
4. Siswa melakukan interaksi terhadap ilustrasi yang disajikan
dengan bantuan mouse
5. Siswa menakan tombol tutup untuk kembali ke halaman awal
materi
23 No.Proses 9.3
Nama Tampil Subbab Ikatan Ionik
Source
(Sumber)
Siswa
Deskripsi Menampilkan materi ikatan kimia Sub bab Ikatan Ionik
Input Data Materi Sub bab Ikatan Kimia Sub bab Ikatan Ionik
Output Info Materi Sub bab Ikatan Kimia Sub bab Ikatan Ionik
Logika
Proses
1. Siswa memilih menu subbab ikatan ionik
2. Sistem Menampilkan materi ikatan kimia Sub bab ikatan ionik
3. Siswa menekan tombol selanjutnya dan sebelumnya, untuk
pindah dari halaman satu kehalaman lainnya.
4. Siswa melakukan interaksi terhadap ilustrasi yang disajikan
dengan bantuan mouse
63
5. Siswa menakan tombol tutup untuk kembali ke halaman awal
materi
23 No.Proses 9.4
Nama Tampil Subbab Ikatan kovalen
Source
(Sumber)
Siswa
Deskripsi Menampilkan materi ikatan kimia Sub bab Ikatan kovalen
Input Data Materi Sub bab Ikatan Kimia Sub bab Ikatan kovalen
Output Info Materi Sub bab Ikatan Kimia Sub bab Ikatan kovalen
Logika
Proses
1. Siswa memilih menu subbab ikatan kovalen
2. Sistem Menampilkan materi ikatan kimia Sub bab ikatan
kovalen
3. Siswa menekan tombol selanjutnya dan sebelumnya, untuk
pindah dari halaman satu kehalaman lainnya.
4. Siswa melakukan interaksi terhadap ilustrasi yang disajikan
dengan bantuan mouse
5. Siswa menakan tombol tutup untuk kembali ke halaman awal
materi
24 No.Proses 9.5
Nama Tampil Subbab Ikatan Logam
Source
(Sumber)
Siswa
Deskripsi Menampilkan materi ikatan kimia Sub bab Ikatan Logam
Input Data Materi Sub bab Ikatan Kimia Sub bab Ikatan Logam
Output Info Materi Sub bab Ikatan Kimia Sub bab Ikatan Logam
Logika
Proses
1. Siswa memilih menu subbab ikatan logam
2. Sistem Menampilkan materi ikatan kimia Sub bab ikatan
logam
3. Siswa menekan tombol selanjutnya dan sebelumnya, untuk
pindah dari halaman satu kehalaman lainnya.
4. Siswa melakukan interaksi terhadap ilustrasi yang disajikan
dengan bantuan mouse
5. Siswa menakan tombol tutup untuk kembali ke halaman awal
materi
25 No.Proses 9.6
Nama Tampil Subbab Senyawa Ionik dan Kovalen
Source
(Sumber)
Siswa
Deskripsi Menampilkan materi ikatan kimia Sub bab Senyawa Ionik dan
Kovalen
Input Data Materi Sub bab Ikatan Kimia Sub bab Senyawa Ionik dan
Kovalen
Output Info Materi Sub bab Ikatan Kimia Sub bab Senyawa Ionik dan
Kovalen
Logika
Proses
1. Siswa memilih menu subbab Senyawa Ionik dan Kovalen
2. Sistem Menampilkan materi ikatan kimia Sub bab Senyawa
Ionik dan Kovalen
3. Siswa menekan tombol selanjutnya dan sebelumnya, untuk
pindah dari halaman satu kehalaman lainnya.
64
4. Siswa melakukan interaksi terhadap ilustrasi yang disajikan
dengan bantuan mouse
5. Siswa menakan tombol tutup untuk kembali ke halaman awal
materi
26 No.Proses 9.7
Nama Tampil Subbab Geometri Elektron dan Kerja Sama dalam Ikatan
Kimia
Source
(Sumber)
Siswa
Deskripsi Menampilkan materi ikatan kimia Sub bab Geometri Elektron dan
Kerja Sama dalam Ikatan Kimia
Input Data Materi Sub bab Ikatan Kimia Sub bab Geometri Elektron dan
Kerja Sama dalam Ikatan Kimia
Output Info Materi Sub bab Ikatan Kimia Sub bab Geometri Elektron dan
Kerja Sama dalam Ikatan Kimia
Logika
Proses
1. Siswa memilih menu subbab Geometri Elektron dan Kerja
Sama dalam Ikatan Kimia
2. Sistem Menampilkan materi ikatan kimia Sub bab Geometri
Elektron dan Kerja Sama dalam Ikatan Kimia
3. Siswa menekan tombol selanjutnya dan sebelumnya, untuk
pindah dari halaman satu kehalaman lainnya.
4. Siswa melakukan interaksi terhadap ilustrasi yang disajikan
dengan bantuan mouse
5. Siswa menakan tombol tutup untuk kembali ke halaman awal
materi
27 No.Proses 10
Nama Tampil sistem periodik unsur interaktif
Source
(Sumber)
Siswa
Deskripsi Menampilkan sistem periodik unsur interkatif
Input Data sistem periodik unsur interaktif
Output Info sistem periodik unsur interaktif
Logika
Proses
1. Siswa memilih menu sistem periodik unsur interkatif
2. Sistem menampilkan sistem periodik unsur yang interaktif,
yang berisi tabel periodik unsur
28 No.Proses 10.1
Nama Menggabungkan atom
Source
(Sumber)
Siswa
Deskripsi Menggabungkan atom untuk membentuk molekul
Input Data atom
Output Info atom
Logika
Proses
1. Siswa memilih atom-atom untuk digabungkan dengan cara
men-drag dan men-drop nya ke stage yang disediakan
2. Atom-atom yang digabungkan diperiksa pada storage
detail_molekul untuk dilihat apakah bisa membentuk molekul
atau tidak
3. Jika atom-atom tersebut bisa membentuk molekul, maka
sistem akan menampilkan informasi molekul dari storage
65
molekul, dan jenis ikatan kimia dari storage
jenis_ikatan_kimia
4. Jika molekul terebut memiliki geometri molekul, maka sistem
akan menampilkan ilustrasi ikatan geometri molekul
28 No.Proses 10.2
Nama Tampil informasi atom
Source
(Sumber)
Siswa
Deskripsi Menampilkan informasi atom
Input Data atom
Output Info atom
Logika
Proses
5. Siswa memilih atom untuk melihat informasi-informasi
tentang atom, dengan cara men-drag dan men-drop atom
terebut ke stage yang disediakan, lalu men-double click atom
tersebut
6. Sistem akan menampilkan informasi-informasi atom tersebut
Kamus Data
Kamus data dapat membantu mendefinisikan dengan lengkap data yang
mengalir diantara proses, penyimpanan data, dan entitas luar. Data yang mengalir
tersebut dapat berupa masukan untuk sistem atau hasil dari proses sistem. Kamus
data dibuat berdasarkan arus data yang mengalir pada konteks diagram dan DFD.
Untuk lebih jelasnya dapat dilihat pada Tabel 3.9
Tabel 3.9 Kamus Data
No Kamus Keterangan
1 Nama Aliran data Data Login
Digunakan pada Guru – proses 1 tabel data guru
Siswa – proses 1 tabel data siswa
deskripsi Berisis aliran login
Struktur data Username+Email+password
Nis+Email+password
Username_guru
Nis
Password
[A-Z|a-z|0-9]
[0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
2 Nama Aliran data Data lupa password
Digunakan pada Guru – proses 2 tabel data guru
Siswa – proses 2 tabel data siswa
deskripsi Berisis aliran lupa password
Struktur data Email
Email [A-Z|a-z|0-9]
3 Nama Aliran data Data pendaftaran
Digunakan pada Siswa – proses 3 tabel data Siswa
deskripsi Berisis data nis, nama dan password
Struktur data Nis + Nama + email + Password + konfirmasi password
66
Nis
Nama
Emai
Password
Konfirmasi
password
[0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
4 Nama Aliran data Data jawaban
Digunakan pada Siswa proses 4 tabel soal
Deskripsi
Berisi Soal dan jawaban
Struktur Data
No_soal + Jawaban
No_Soal
Jawaban
[0-9]
[A-E|a-e]
5 Nama Aliran data Pengolahan data soal
Digunakan pada Guru – proses 5 tabel soal
Deskripsi Berisis aliran data soal
Struktur data Id_soa, pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_e
dan jawaban
Pertanyaan
opsi_a
opsi_b
opsi_c
opsi_d
opsi_e
jawaban
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[a-z]
6 Nama Aliran data Penambahan data soal
Digunakan pada Guru – proses 5.1 tabel soal
Deskripsi Berisikan aliran data penambahan data soal
Struktur data Id_soal, pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_e
dan jawaban
Pertanyaan
opsi_a
opsi_b
opsi_c
opsi_d
opsi_e
jawaban
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[a-z]
7 Nama Aliran data pengeditan data soal
Digunakan pada Guru – proses 5.2 tabel soal
deskripsi Berisikan aliran data pengubahan data soal
Struktur data Id_soal pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_e
dan jawaban
Soal
opsi_a
opsi_b
opsi_c
opsi_d
opsi_e
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
67
jawaban [a-z]
8 Nama Aliran data Penghapusan data soal
Digunakan pada Guru – proses 5.3 tabel soal
deskripsi Berisikan aliran data penghapusan data soal
Struktur data Id_soal
Id_soal [0-9]
9 Nama Aliran data Pencarian data soal
Digunakan pada Guru – proses 5.4 tabel soal
deskripsi Berisikan aliran data pencarian data soal
Struktur data Id_soal, soal
Id_soal
soal
[0-9]
[A-Z|a-z|0-9]
14 Nama Aliran data Data siswa
Digunakan pada Guru proses 6 tabel siswa
deskripsi Berisi aliran data siswa
Struktur data Nis+nama+email
Nis
Nama
Emaill
[0-9]
[A-Z|a-z]
[A-Z|a-z|0-9]
15 Nama Aliran data Pencarian data siswa
Digunakan pada Guru proses 6.1 tabel siswa
deskripsi Berisi aliran data siswa
Struktur data Nis+nama+password
Nis
Nama
password
[0-9]
[A-Z|a-z]
[A-Z|a-z|0-9]
16 Nama Aliran data Penghapusan data siswa
Digunakan pada Guru proses 6.2 tabel siswa
deskripsi Berisi aliran data siswa
Struktur data Nis+nama+password
Nis
Nama
password
[0-9]
[A-Z|a-z]
[A-Z|a-z|0-9]
17 Nama Aliran data Data Guru
Digunakan pada Guru – proses 7 tabel data Guru
deskripsi Berisis aliran data guru
Struktur data Nip+nama
Username
Nama
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
18 Nama Aliran data Penambahan data guru
Digunakan pada Guru – proses 7.1
deskripsi Berisis aliran penambahan data guru
Struktur data Nip+nama
Nip
Nama
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
19 Nama Aliran data Penghapusan data guru
Digunakan pada Guru – proses 7.2
68
deskripsi Berisis aliran penghapusan data guru
Struktur data Nip+nama
Username [A-Z|a-z|0-9]
20 Nama Aliran data Data Molekul
Digunakan pada Guru – proses 8 tabel data molekul
Deskripsi Berisis aliran data molekul
Struktur data Id_molekul, Nama_molekul, id_gm, id_jik, no_atom,
keterangan, gambar
Id_molekul
Nama_molekul
Id_gm
Id_jik
Keterangan
Gambar
No_atom
[0-9]
[A-Z|a-z|0-9]
[0-9]
[0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[0-9]
21 Nama Aliran data Penambahan data molekul
Digunakan pada Guru – proses 8.1
Deskripsi Berisis aliran penambahan data molekul
Struktur data Nama_molekul, id_gm, id_jik, no_atom, keterangan,
gambar
Nama_molekul
Id_gm
Id_jik
Keterangan
Gambar
No_atom
[A-Z|a-z|0-9]
[0-9]
[0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[0-9]
22 Nama Aliran data Edit data molekul
Digunakan pada Guru – proses 8.2
deskripsi Berisis aliran penambahan data molekul
Struktur data Nama_molekul, id_gm, id_jik, no_atom, keterangan,
gambar
Nama_molekul
Id_gm
Id_jik
Keterangan
Gambar
No_atom
[A-Z|a-z|0-9]
[0-9]
[0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[0-9]
22 Nama Aliran data Cari data molekul
Digunakan pada Guru – proses 8.3
deskripsi Berisis aliran penambahan data molekul
Struktur data Nama_molekul, id_gm, id_jik, no_atom, keterangan,
gambar
Nama_molekul
Id_gm
Id_jik
Keterangan
Gambar
No_atom
[A-Z|a-z|0-9]
[0-9]
[0-9]
[A-Z|a-z|0-9]
[A-Z|a-z|0-9]
[0-9]
22 Nama Aliran data Penghapusan data molekul
69
Digunakan pada Guru – proses 8.4
deskripsi Berisis aliran penghapusan data molekul
Struktur data Id_molekul
Id_molekul [0-9]
3.2 Perancangan Sistem
Perancangan adalah suatu bagian dari metodologi pengembangan
pembangunan suatu perangkat lunak yang dilakukan setelah tahapan untuk
memberikan Gambaran secara terperinci. setelah melalui tahapan analisis. Untuk
dapat melakukan perancangan sistem maka dilakukan beberapa langkah yaitu
sebagai berikut :
1. Perancangan Struktur Menu
2. Perancangan Antarmuka
3. Perancangan Pesan
4. Perancangan Prosedural
5. Jaringan Semantik
Diagram Relasi
Diagram relasi merupakan rangkaian hubungan antara dua tabel atau lebih
pada sistem database. Gambar berikut ini merupakan penjelasan rangkaian database
pada aplikasi Pembelajaran ikatan kimia dapat dilihat pada Gambar 3.27.
70
Gambar 3.27 Skema Relasi
Struktur Tabel
Perancangan struktur tabel adalah perancangan tabel-tabel yang akan
digunakan pada database. Tabel-tabel yang terdapat dalam database yang
digunakan dalam aplikasi pembelajaran ikatan kimia berbasis web:
1. Tabel Siswa
Tabel siswa berfungsi untuk menyimpan data siswa, struktur tabel dapat
dilihat pada Tabel 3.10
Tabel 3.10 Struktur Tabel Siswa
Nama field Tipe Panjang extra kunci Atribut
Nis Integer 11 Primary key Not null
Nama Varchar 30 Not null
password Varchar 50 Not null
Email Varchar 30 Not null
2. Tabel guru
Tabel guru berfungsi untuk menyimpan data guru, struktur tabel dapat
dilihat pada Tabel 3.11
Tabel 3.11 Struktur Tabel Guru
Nama field Tipe Panjang extra kunci atribut
Username_guru Varchar 20 Primary
key
Not null
Nama Varchar 30 Not null
71
Password Varchar 50 Not null
Email Varchar 30 Not null
Hak_akses Int 11
Username_guru_koordinator Varchar 20 Foreign
key
Null
3. Tabel soal
Tabel soal berfungsi untuk menyimpan soal, yang digunakan siswa untuk
evaluasi. Struktur tabel dapat dilihat pada Tabel 3.12
Tabel 3.12 Struktur Tabel Soal
Nama field Tipe Panjang Extra kunci Atribut
Id_soal integer 11 Primary key Not null
pertanyaan text Not null
Opsi_a text Not null
Opsi_b text Not null
Opsi_c text Not null
Opsi_d text Not_null
Opsi_e text Not null
Jawaban text Not null
Username_guru varcahr 20 Foreign key Not null
4. Tabel detail evaluasi
Tabel detail evaluasi berfungsi untuk menyimpan soal yang dikerjakan oleh
siswa. Struktur tabel dapat dilihat pada Tabel 3.13
Tabel 3.13 Struktur Tabel Detail Evaluasi
Nama field Tipe Panjang extra kunci Atribut
Id_de Integer 11 Auto
increment
Primary
key
Not null
Id_soal Integer 11 Foreign key Not null
Nis Integer 11 Foreign key Not null
Opsi_a text Not null
Opsi_b text Not null
Opsi_c text Not null
Opsi_d text Not_null
Opsi_e text Not null
Jawaban_benar text Not null
jawaban varchar 1 Not null
5. Tabel detail jenis ikatan kimia
Tabel jenis ikatan kimia berfungsi untuk menyimpan jenis ikatan kimia
yang digunakan pada sistem periodik unsur interaktif oleh siswa. Struktur tabel
dapat dilihat pada Tabel 3.14
Tabel 3.14 Sturktur Tabel Jenis Ikatan Kimia
Nama field tipe Panjang extra kunci Atribut
Id_JIK integer 11 auto increment Primary key Not null
72
Nama_JIK Varchar 30 Not null
keterangan text Not null
6. Tabel molekul
Tabel molekul berfungsi untuk menyimpan data molekul yang digunakan
pada sistem periodik unsur interaktif oleh siswa. Struktur tabel dapat dilihat pada
Tabel 3.15
Tabel 3.15 Struktur Tabel Molekul
Nama field tipe Panjang extra kunci Atribut
Id_molekul integer 11 auto
increment
Primary key Not null
Nama_utama Varchar 30 Not null
Nama_lain text Not null
Id_JIK integer 11 Foreign key Not null
Keterangan text Not null
Gambar_molekul Varchar 10
Username_guru varchar 20 Foreign key Not
Null
7. Tabel jenis unsur
Tabel jenis unsur berfungsi untuk mengklasifikasi kan atom berdasarkan
jenis unsuru nya, digunakan pada sistem periodik unsur interaktif oleh siswa.
Struktur tabel dapat dilihat pada Tabel 3.16
Tabel 3.16 Struktur Tabel Jenis Unsur
Nama field tipe Panjang extra kunci Atribut
Id_JU integer 11 auto
increment
Primary key Not null
Nama_JU Varchar 20 Not null
warna varchar 7 Not null
8. Tabel atom
Tabel atom berfungsi untuk menyimpan data atom, digunakan pada sistem
periodik unsur interaktif oleh siswa. Struktur tabel dapat dilihat pada Tabel 3.17
Tabel 3.17 Struktur Tabel Atom
Nama field tipe Panjang extra kunci Atribut
No_atom integer 11 Primary key Not null
Id_JU integer 11 Foreign key Not null
Nama_atom varchar 15 Not null
Simbol_atom varchar 3 Not null
Golongan varchar 7 Not null
Periode integer 11 Not null
elektronegatifitas double null
73
9. Tabel detail molekul
Tabel detail molekul berfungsi untuk menyimpan data atom pembentuk
molekul, digunakan pada sistem periodik unsur interaktif oleh siswa. Struktur tabel
dapat dilihat pada Tabel 3.18
Tabel 3.18 Struktur Tabel Detail Molekul
Nama field tipe Panjang extra kunci Atribut
Id_dm integer 11 Primary key Not null
Id_molekul integer 11 Foreign key Not null
no_atom integer 11 Foreign key Not null
Jumlah integer 11 Not null
Perancangan Struktur Menu
Struktur adalah bentuk umum dari suatu rancangan program untuk
memudahkan pemakai dalam menjalankan program komputer. Berikut ini
perancangan struktur Aplikasi Pembelajaran Ikatan kimia berbasis web.
1. Struktur Menu Guru Koordinator
Struktur menu guru koorinator terdiri dari beranda dan guru. Struktur menu
guru dapat dilihat pada Gambar 3.28.
Login
Beranda Guiru
Lupa Password
Gambar 3.28 Struktur Menu Guru Koordinator
2. Struktur Menu Guru
Struktur menu guru terdiri dari beranda, hasil evaluasi, guru, siswa dan soal.
Struktur menu guru dapat dilihat pada Gambar 3.29.
Login
Beranda Siswa Soal Keluar
Lupa Password
Gambar 3.29 Struktur Menu Guru
2. Struktur Menu Siswa
Struktur menu siswa terdiri dari beranda, materi, sistem periodik unsur
interaktif dan evaluasi. struktur menu dapat dilihat pada Gambar 3.30
74
Login
MateriSitem periodik
unsur interaktifEvaluasi Keluar
DaftarLupa Password
Gambar 3.30 Struktur Menu Siswa
Perancangan Antarmuka
Tahapan perancangan antarmuka dalam pembuatan suatu aplikasi
merupakan suatu tahapan yang sangat penting, karena tahapan ini akan menetukan
apakah suatu aplikasi akan memiliki konstruksi yang baik, proses pengolahan data
yang tepat dan akurat, serta memiliki dasar-dasar untuk pengembangan dimasa
yang akan datang. Desain program yang dibuat harus mudah untuk digunakan,
dapat dipahami dan dimengerti oleh pemakai (user), serta informasi yang dihasilkan
dari program tersebut dapat dimengerti oleh pemakai.
a. Perancangan Antarmuka Halaman Login Guru Koordinator
Perancangan antar muka login guru aplikasi pembelajaran ikatan kimia
berbasis web dapat dilihat pada Gambar 3.31.
A01
Navigasi
Isi Field Username/Email
dan
password sesuai data
yang telah ditentukan
Klik tombol login, maka
akan menuju A02
Klik tombol lupa password,
maka
akan menuju A08
APLIKASI PEMBELAJARAN IKATAN KIMIASMAN 7 BANDUNG
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: A01 (Halaman Login Guru Koordinator)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Lupa Password
login
Username/Email
Password
Halaman Login Guru Koordinator
Gambar 3.31 Perancangan Antar Muka Login Guru Koordinator
75
b. Perancangan Antarmuka Halaman Utama Guru Koordinator
Perancangan antar muka halaman utama guru koordinator aplikasi
pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.32
A02
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: A02 (Halaman utama guru koordinator)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Guru
Keluar Selamat datang di halaman guru koordinator Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Pilih menu molekul, maka
Akan menuju A07
Navigasi
Pilih menu Beranda maka
akan menuju A02
Pilih menu guru, akan
menuju A03
Pilih menu keluar, maka
Akan menuju A01
LOGO SMAN7 BANDUNG
APLIKASI PEMBELAJARAN IKATAN KIMIA
Gambar 3.32 Perancangan Antarmuka Halaman Utama Guru Koordinator
c. Perancangan Antarmuka Halaman Data Guru
Perancangan antar muka halaman data guru aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.33.
A03
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: A04 (Halaman Data guru)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
No Nama
Data Guru
Tambah
Aksi
Hapus
Hapus
Hapus
Pilih menu tambah,
maka akan menuju
AF01
Pilih menu hapus,
maka akan menuju
AF02
Navigasi
Pilih menu Beranda maka
akan menuju A01
Pilih menu guru, akan
menuju A03
Pilih menu keluar, maka
Akan menuju A01
Pilih menu tambah, maka
Akan menuju AF01
Pilih menu hapus, maka
Akan menuju AF02
Username
Beranda
Guru
Keluar
Gambar 3.33 Perancangan Antarmuka Halaman Data Guru
76
d. Perancangan Antarmuka Halaman Tambah Data Guru
Perancangan antar muka halaman tambah data guru aplikasi pembelajaran
ikatan kimia berbasis web dapat dilihat pada Gambar 3.34.
AF01
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: AF01 (Halaman Tambah Data guru)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Guru
Keluar
Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Username
Nama
Tambah data Guru
Simpan
Pilih menu simpan,
maka akan menuju
A04
Pilih menu keluar,
maka akan menuju
A04
tutup
Navigasi
Pilih menu Beranda maka
akan menuju A01
Pilih menu guru, akan
menuju A03
Pilih menu keluar, maka
Akan menuju A01
Pilih menu simpan, akan
menuju A03
Pilih menu tutup, akan
menuju A03
Gambar 3.34 Perancangan Antarmuka Halaman Tambah Data Guru
e. Perancangan Antarmuka Halaman Hapus Data Guru
Perancangan antar muka halaman hapus data guru aplikasi pembelajaran
ikatan kimia berbasis web dapat dilihat pada Gambar 3.35.
AF02
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: AF02 (Halaman Hapus Data guru)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Guru
Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Anda yakin ingin menghapus data ini?
Hapus
Pilih menu simpan,
maka akan menuju
A04
Pilih menu keluar,
maka akan menuju
A04
tutup
Navigasi
Pilih menu Beranda maka
akan menuju A01
Pilih menu guru, akan
menuju A03
Pilih menu keluar, maka
Akan menuju A01
Pilih menu hapus, akan
menuju A03
Pilih menu tutup, akan
menuju A03
Keluar
Gambar 3.35 Perancangan Antarmuka Halaman Hapus Data Guru
77
f. Perancangan Antarmuka Halaman Login Guru
Perancangan antar muka halaman login guru aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.36.
A04
Navigasi
Isi Field Username/Email
dan password sesuai data
yang telah ditentukan
Klik tombol login, maka
akan menuju A05
Klik tombol lupa password,
maka
akan menuju A08APLIKASI PEMBELAJARAN IKATAN KIMIA
SMAN 7 BANDUNG
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: A04 (Halaman Login Guru )
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Lupa Password
login
Username/Email
Password
Halaman Login Guru
Gambar 3.36 Perancangan antar muka halaman login guru
g. Perancangan Antarmuka Halaman Utama Guru
Perancangan antar muka halaman utama guru aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.37.
A05
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: A05 (Halaman utama guru)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Siswa
Molekul Selamat datang di halaman guru Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Pilih menu molekul, maka
Akan menuju A07
Navigasi
Pilih menu Beranda maka
akan menuju A05
Pilih menu siswa, akan
menuju A06
Pilih menu molekul, akan
menuju A08
Pilih menu soal, akan
menuju A07
Pilih menu keluar, maka
Akan menuju A04
LOGO SMAN7 BANDUNG
APLIKASI PEMBELAJARAN IKATAN KIMIA
Soal
Keluar
Gambar 3.37 Perancangan Antarmuka Halaman Utama Guru
78
h. Perancangan Antarmuka Halaman Data Siswa
Perancangan antar muka halaman data siswa aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.38.
A06
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: A06 (Halaman Data Siswa)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Siswa
Soal Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Nis Nama
Data Siswa Cari
Aksi
Hapus
Hapus
Hapus
Pilih menu hapus
maka akan menuju
AF03
Navigasi
Pilih menu Beranda maka
akan menuju A05
Pilih menu siswa
Maka akan menuju A06
Pilih menu Soal maka
akan menuju A07
Pilih menu keluar, maka
Akan menuju A03
Pilih menu molekul, maka
Akan menuju A08
Pilih menu hapus, maka
Akan menuju AF03
Pilih menu nilai, maka
Akan menuju AF04
Keluar
Molekul
Nilai
Nilai
Nilai
Gambar 3.38 Perancangan Antarmuka Halaman Data Siswa
i. Perancangan Antarmuka Halaman Data Soal
Perancangan antar muka halaman data soal aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.39.
A07
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: A07 (Halaman Data Soal)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Siswa
Soal Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
No Pertanyaan
Data Soal
Tambah
Pilih menu tambah, maka
Akan menuju AF04
Pilih menu no, maka
Akan menuju AF05
Navigasi
Pilih menu Beranda maka
akan menuju A05
Pilih menu siswa
Maka akan menuju A06
Pilih menu Soal maka
akan menuju A07
Pilih menu keluar, maka
Akan menuju A03
Pilih menu molekul, maka
Akan menuju A08
Pilih menu tambah, maka
Akan menuju AF05
Pilih menu edit, maka
Akan menuju AF06
Pilih menu hapus, maka
Akan menuju AF07
Pilih menu cari, maka
Akan menuju AF08
Keluar
Molekul
Aksi
Cari
Edit Hapus
Edit Hapus
Edit Hapus
Gambar 3.39 Perancangan Antarmuka Halaman Data Soal
79
j. Perancangan Antarmuka Halaman Data Molekul
Perancangan antar muka halaman data molekul aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.40.
A08
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: A08 (Halaman Data Molekul)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Siswa
Soal Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Pilih menu tambah, maka
Akan menuju AF04
Pilih menu no, maka
Akan menuju AF05
Navigasi
Pilih menu Beranda maka
akan menuju A05
Pilih menu siswa
Maka akan menuju A06
Pilih menu Soal maka
akan menuju A07
Pilih menu keluar, maka
Akan menuju A03
Pilih menu molekul, maka
Akan menuju A08
Pilih menu tambah akan
menuju AF09
Pilih menu hapus akan
menuju AF10
Keluar
Molekul
No Nama
Data Molekul Cari
Rumus Molekul
Hapus
Hapus
Hapus
Aksi
Tambah
Edit
Edit
Edit
Gambar 3.40 Perancangan Antarmuka Halaman Data Molekul
k. Perancangan Antarmuka Halaman Hapus Data Siswa
Perancangan antar muka halaman hapus data siswa aplikasi pembelajaran
ikatan kimia berbasis web dapat dilihat pada Gambar 3.41.
AF03
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: AF03 (Halaman Hapus Data siswa)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Siswa
Soal Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Anda yakin ingin menghapus data ini?
Hapus
Pilih menu simpan,
maka akan menuju
A05
Pilih menu keluar,
maka akan menuju
A05
tutup
Navigasi
Pilih menu Beranda maka
akan menuju A05
Pilih menu siswa, akan
menuju A06
Pilih menu molekul, akan
menuju A07
Pilih menu soal, akan
menuju A08
Pilih menu keluar, maka
Akan menuju A04
Pilih menu hapus akan
menuju ke A06
Pilih menu tutup akan
menuju ke A06
Keluar
Molekul
Gambar 3.41 Perancangan Antarmuka Halaman Hapus Data Siswa
80
l. Perancangan Antarmuka Halaman Tambah Data Soal
Perancangan antar muka halaman tambah data soal aplikasi pembelajaran
ikatan kimia berbasis web dapat dilihat pada Gambar 3.42.
AF05
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: AF05 (Halaman Tambah Data Soal)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Tambah data Soal
Simpan
Pilih menu simpan,
maka akan menuju
A06
Pilih menu keluar,
maka akan menuju
A06
Navigasi
Pilih menu Beranda maka
akan menuju A05
Pilih menu siswa, akan
menuju A06
Pilih menu molekul, akan
menuju A07
Pilih menu soal, akan
menuju A08
Pilih menu keluar, maka
Akan menuju A04
Pilih menu kembali akan
menuju A08
Pilih menu simpan akan
menuju A08
Kembali
Pertanyaan B U I Xy
X y
Opsi A B U I Xy
X y
Opsi B B U I Xy
X y
Opsi C B U I Xy
X y
Opsi D B U I Xy
X y
Opsi E B U I Xy
X y
Jawaban Benar A B C D E
Beranda
Siswa
Soal
Keluar
Molekul
Gambar 3.42 Perancangan Antarmuka Halaman Tambah Data Soal
m. Perancangan Antarmuka Halaman Edit Data Soal
Perancangan antar muka halaman edit data soal aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.43.
AF06
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: AF06 (Edit Data Soal)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Hasil Evaluasi
Guru
Siswa
Soal
Molekul
Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Edit data Soal
Simpan
Pilih menu simpan,
maka akan menuju
A06
Pilih menu keluar,
maka akan menuju
A06
Navigasi
Pilih menu Beranda maka
akan menuju A01
Pilih menu hasil evaluasi
maka akan menuju A03
Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Pilih menu molekul, maka
Akan menuju A07
Pilih menu simpan, akan
menuju A06
Pilih menu tutup, akan
menuju A06
Keluar
Kembali
Pertanyaan B U I Xy
X y
Opsi A B U I Xy
X y
Opsi B B U I Xy
X y
Opsi C B U I Xy
X y
Opsi D B U I Xy
X y
Opsi E B U I Xy
X y
Jawaban Benar A B C D E
Gambar 3.43 Perancangan Antarmuka Halaman Edit Data Soal
81
n. Perancangan Antarmuka Halaman Hapus Data Soal
Perancangan antar muka halaman hapus data soal aplikasi pembelajaran
ikatan kimia berbasis web dapat dilihat pada Gambar 3.44.
AF07
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: AF07(Halaman Hapus Data Soal)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Anda yakin ingin menghapus data ini?
Hapus
Pilih menu simpan,
maka akan menuju
A05
Pilih menu keluar,
maka akan menuju
A05
tutup
Navigasi
Pilih menu Beranda maka
akan menuju A01
Pilih menu guru, akan
menuju A03
Pilih menu keluar, maka
Akan menuju A01
Pilih menu hapus, akan
menuju A07
Pilih menu tutup, akan
menuju A07
Beranda
Guru
Keluar
Gambar 3.44 Perancangan Antarmuka Halaman Hapus Data Soal
o. Perancangan Antarmuka Halaman Edit Data Molekul
Perancangan antar muka halaman edit data molekul aplikasi pembelajaran
ikatan kimia berbasis web dapat dilihat pada Gambar 3.45.
AF08
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: AF08 (Halaman Edit Data Molekul)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Hasil Evaluasi
Guru
Siswa
Soal
Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Tambah data Molekul
Simpan
Pilih menu simpan,
maka akan menuju
A04
Pilih menu keluar,
maka akan menuju
A04
tutup
Navigasi
Pilih menu Beranda maka
akan menuju A01
Pilih menu guru, akan
menuju A03
Pilih menu keluar, maka
Akan menuju A01
Pilih menu simpan, akan
menuju A08
Pilih menu tutup, akan
menuju A08
Keluar
MolekulPilih fileGambar
Atom ke 1 Jumlah
Atom ke 2 Jumlah
Keterangan
Nama Utama
Nama Lain
Geometri Molekul
Jenis Ikatan Kimia
Atom ke N Jumlah
Gambar 3.45 Perancangan Antarmuka Halaman Edit Data Molekul
82
83
p. Perancangan Antarmuka Halaman Tambah Data Molekul
Perancangan antar muka halaman tambah data molekul aplikasi
pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.46.
AF09
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: AF09 (Halaman Tambah Data Molekul)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Beranda
Hasil Evaluasi
Guru
Siswa
Soal
Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Tambah data Molekul
Simpan
Pilih menu simpan,
maka akan menuju
A04
Pilih menu keluar,
maka akan menuju
A04
tutup
Navigasi
Pilih menu Beranda maka
akan menuju A01
Pilih menu guru, akan
menuju A03
Pilih menu keluar, maka
Akan menuju A01
Pilih menu simpan, akan
menuju A08
Pilih menu tutup, akan
menuju A08
Keluar
MolekulPilih fileGambar
Atom ke 1 Jumlah
Atom ke 2 Jumlah
Keterangan
Nama Utama
Nama Lain
Geometri Molekul
Jenis Ikatan Kimia
Atom ke N Jumlah
Gambar 3.46 Perancangan Antarmuka Halaman Tambah Data Molekul
q. Perancangan Antarmuka Halaman Hapus Data Molekul
Perancangan antar muka halaman hapus data molekul aplikasi pembelajaran
ikatan kimia berbasis web dapat dilihat pada Gambar 3.47.
AF010
Navigasi
Pilih menu Beranda maka
akan menuju A01
Sman 7 bandung
Pilih menu hasil evaluasi
maka akan menuju A03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: AF10(Halaman Hapus Data Molekul)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Pilih menu guru, akan
menuju A04
Pilih menu siswa
Maka akan menuju A05
Pilih menu Soal maka
akan menuju A06
Pilih menu keluar, maka
Akan menuju A01
Anda yakin ingin menghapus data ini?
Hapus
Pilih menu simpan,
maka akan menuju
A05
Pilih menu keluar,
maka akan menuju
A05
tutup
Navigasi
Pilih menu Beranda maka
akan menuju A01
Pilih menu guru, akan
menuju A03
Pilih menu keluar, maka
Akan menuju A01
Pilih menu hapus, akan
menuju A08
Pilih menu tutup, akan
menuju A08
Beranda
Siswa
Soal
Keluar
Molekul
Gambar 3.47 Perancangan Antarmuka Halaman Hapus Data Molekul
84
r. Perancangan Antarmuka Halaman Lupa Password
Perancangan antar muka halaman login siswa aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.48.
A08
Navigasi
Isi Field email sesuai data
yang telah ditentukan
Klik tombol submit, akan
menuju A01
SMAN 7 BANDUNG
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: A08 (Halaman Lupa Password)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Lupa Password
Tulis kan email anda
Submit
Gambar 3.48 Perancangan Antarmuka Lupa Password
s. Perancangan antar muka halaman login siswa
Perancangan antar muka halaman login siswa aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.49
T01
Navigasi
Isi Field Nis dan
password sesuai data
yang telah ditentukan
Klik tombol login, maka
akan menuju T02
Klik tombol daftar, maka
akan menuju T03
Klik tombol lupa password,
maka
akan menuju T04
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: T01 (Halaman Login Siswa)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Daftar Lupa Password
login
NIS
Password
APLIKASI PEMBELAJARAN IKATAN KIMIASMAN 7 BANDUNG
HALAMAN LOGIN SISWA
Gambar 3.49 Perancangan Antar Muka Halaman Login Siswa
85
t. Perancangan antar muka halaman daftar siswa
Perancangan antar muka halaman daftar siswa aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.50
T02
Navigasi
isi Field NiS, Passord dan
Konfirmasi passowrd
sesuai data
yang telah ditentukan
Klik tombol login, maka
akan menuju T03
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: T02 (Halaman Daftar Siswa)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
SMAN 7 BANDUNG
Kirim
Password
NIP
Konfirmasi Password
Gambar 3.50 Perancangan Antar Muka Halaman Daftar Siswa
u. Perancangan antar muka halaman Utama Siswa
Perancangan antar muka halaman materi aplikasi pembelajaran ikatan kimia
berbasis web dapat dilihat pada Gambar 3.51
T03
Navigasi
Klik tombol materi
Akan menuju T04
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: T03 (Beranda Siswa)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Logo SMAN 7 Bandung
Materi
Sistem Periodi unsur
interaktif
Evaluasi
Keluar
Klik tombol sistem periodik
unsur Interaktif maka
akan menuju T05
Klik tombol evaluasi
maka akan menuju
T06
Klik tombol keluar
maka akan menuju
T07
Gambar 3.51 Perancangan Antar Muka Halaman Materi
86
v. Perancangan antar muka halaman materi
Perancangan antar muka halaman sistem periodik unsur interaktif aplikasi
pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.52
T05
Navigasi
Klik tombol selanjutnya,
maka akan menuju T04
Klik tombol sebelumnya,
maka akan menuju T04
Klik tombol halaman depan
maka akan menuju T02
Klik tombol keluar maka
akan menuju T01
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: T05 (Materi)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Halaman Depan Keluar
SelanjutnyaSebelumnya
Isi materi
Gambar 3.52 Perancangan Antar Muka Halaman Materi
w. Perancangan antar muka halaman sistem periodik unsur interaktif
Perancangan antar muka halaman evaluasi aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.53
T06
Navigasi
Klik tombol halaman
depan maka akan menuju
T02
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: T06 (sistem periodik unsur interaktif)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Sistem periodik unsur interaktif
Stage eksperimen
Halaman Depan
Gambar 3.53 Perancangan Antar Muka Halaman Evaluasi
87
x. Perancangan antar muka halaman evaluasi
Perancangan antar muka halaman evaluasi aplikasi pembelajaran ikatan
kimia berbasis web dapat dilihat pada Gambar 3.54
T07
Navigasi
Keterangan:
Nama Form
Ukuran Form
Font
Warna Form
: T07 (Evaluasi)
:1024x768
:Times New Roman. Size 11 pt, 14 pt, White and black
:Putih
Halaman Depan
Klik tombol halaman
depan maka akan menuju
T02
Klik tombol keluar
maka akan menuju
T01
Keluar
Selanjutnyasebelumnya
Klik tombol selanjutnya,
maka akan menuju T06
Klik tombol sebelumnya,
maka akan menuju T06
1. Soal Evaluasi
A. opsi a
B. opsi b
C. opsi c
D. opsi d
E. opsi e
Gambar 3.54 Perancangan Antar Muka Halaman Evaluasi
Perancangan Pesan
Pada tabel dibawah ini merupakan perancangan pesan yang terdapat pada
aplikasi pembelajaran ikatan kimia berbasis web. Adapun tampilan pesan yang ada
dapat dilihat pada Tabel 3.19
Tabel 3.19 Perancangan Pesan
Kode Pesan
P01 Username/Email harus diisi
P02 Password harus diisi
P03 Username/email password salah
P04 Email harus diisi
P05 Email tidak valid
P06 Permintaan lupa password telah kami
proses,
Silahkan cek email anda
P07 Maaf, email yang anda masukkan, tidak
ditemukan, mohon cek kembali
P08 Username harus diisi
P09 Nama harus diisi
P10 Username guru minimal 5 karakter
P11 Username guru maximal 20 karakter
P12 Guru berhasil ditambah
P13 Guru dengan username tersebut sudah ada
88
P14 Guru berhasil dihapus
P15 Siswa berhasil dihapus
P16 Geometri molekul harus diisi
P17 Jenis ikatan harus dipilih
P18 Molekul berhasil ditambah
P19 Molekul berhasil diubah
P20 Molekul berhasil dihapus
P21 Pertanyaan harus diisi
P22 Opsi A harus diisi
P23 Opsi B harus diisi
P24 Opsi C harus diisi
P25 Opsi D harus diisi
P26 Opsi E harus diisi
P27 Jawaban benar harus dipilih
P30 Soal berhasil ditambah
P31 Soal berhasil diubah
P32 Soal berhasil dihapus
P33 Nis / Email harus diisi
P34 Password harus diisi
P35 Email harus diisi
P36 Email tidak Valid
P37 Maaf, email yang anda masukkan, tidak
ditemukan, mohon cek kembali
P38 Nis harus diisi
P39 Password harus diisi
P40 Email harus
P41 Email tidak valid
P42 Nama Harus diisi
P43 Konfirmasi password harus
P44 Password min 7 karakter
P45 Password dan konfirmasi password tidak
sama
P46 Maaf, email yang anda masukkan, tidak
ditemukan, mohon cek kembali
P47 Maaf, Siswa dengan Nis tersebut sudah
ada, mohon konfirmasi dengan guru
P48 Maaf, Siswa dengan Email tersebut sudah
ada, mohon konfirmasi dengan guru
Jaringan semantik
Jaringan semantik menggambarkan keterhubungan navigasi menu dari satu
form ke form lainnya. Gambar dan gambar merupakan gambar jaringan semantik
guru dan siswa.
89
Jaringan semantik guru
Jaringan semantik Guru dapat dilihat pada Gambar 3.55
A01
P01,
P02,
P03
A02A03 A04
A05
A06
AF01
P04
AF02
P06
AF03
P06
AF04
AF05
P07
A08
P08
P09
P19
AF06
P05
P20
P21
P22
P23
P24
P25
P26
AF03
P20
P21
P22
P23
P24
P25
P26
P06
P04
P06
A07
AF07
AF08
AF09
P05P27
P28
P29
P27
P28
P29
P04
P06
Gambar 3.55 Jaringan Semantik Guru
Jaringan semantik siswa
Jaringan semantik siswa dapat dilihat pada Gambar 3.56
T01 T03
T07
T06
T02
T05
P07
P10
P01,
P02,
P03
T04
P08
P09
Gambar 3.56 Jaringan Semantik Siswa
90
Perancangan Prosedural
Perancangan prosedural merupakan elemen-elemen struktural dari
arsitektur program ke dalam suatu deskripsi prosedural dari komponen-komponen
perangkat lunak. Perancangan prosedural meliputi prosedural login, procedural
pendaftaran, prosedural evaluasi, prosedural tambah data, prosedural ubah data dan
prosedural hapus data.
Prosedural Pendaftaran
Prosedur pendaftaran merupakan langkah-langkah siswa saat melakukan
pendaftaran. Prosedural Pendaftaran dapat dilihat Gambar 3.57.
91
Mulai
Masukkan
nis, nama,
password
dan
konfirmasi
password
Pengecekan
kosong/tidak field
Kosong?
Tampil pesan
“field harus
diisi”
tidak
ya
tidak
ya
Pengecekan valid/
tidak field
Valid?
Pengecekan
sesuai/tidak field
password dan
Konfirmasi
password
sesuai
Pengecekan nis
terdaftar/belum di
database
terdaftar
Data disimpan di
database
selesai
ya
tidak
Tampil pesan
“field tidak
valid”
tidak
Tampil pesan
“password dan
konfirmasi
password t idak
sesuai”
ya
Tampil pesan “, Siswa
dengan Nis tersebut
sudah ada, mohon
konfirmasi dengan gurur”
Pengecekan email
terdaftar/belum di
database
terdaftar
Tampil pesan “, Siswa
dengan Email tersebut
sudah ada, mohon
konfirmasi dengan gurur”
ya
Tidak
Gambar 3.57 Prosedural Pendaftaran
92
Prosedural lupa password
Prosedur login merupakan langkah-langkah guru dan siswa saat melakukan
login. Prosedural login dapat dilihat pada Gambar 3.58.
Mulai
Masukkan
Pengecekan
kosong/tidak field
Kosong?
Tampil pesan
“email harus
diisi”
ya
Pengecekan valid/
tidak email yang
dimasukkan
tidak
Valid?
Tampil pesan
“Email tidak
Valid”
tidak
Pengecekan ada/
tidak email
didatabase
ya
Ada/tidak?
Tampil pesan
“Maaf, email yang
anda masukkan,
tidak ditemukan,
mohon cek kembali.
tidak
Selesai
Tampil pesan
“Permintaan lupa password
telah kami proses,
Silahkan cek email anda.
Terimakasih”.
ada
Gambar 3.58 Prosedural Lupa Password
93
Prosedural Login
Prosedur Login merupakan langkah-langkah siswa saat melakukan proses
login. Prosedural login dapat dilihat pada Gambar 3.59
Mulai
Masukkan
Username
dan
passowrd
Pengecekan
kosong/tidak field
Username
Kosong?
Tampil pesan
“username
harus diisi”
ya
Pengecekan
kosong/tidak field
password
tidak
Kosong?
Tampil pesan
“password
harus diisi”
ya
Pengecekan
validasi login
tidak
valid
Tampil pesan “Maaf.
Username/Email atau
Password yang
dimasukan salah”
tidak
Login berhasil
Tampilan
halaman utama
Selesai
ya
.
Gambar 3.59 Prosedural Login
94
Prosedural Tampil Sub bab Materi
Prosedural tampil subbab materi merupakan langkah-langkah siswa saat
ingin melihat materi. Prosedural tampil subbab materi dapat dilihat pada Gambar
3.60
Mulai
Pilih menu
subbab
Tampil Subbab
Materi
Selesai
Gambar 3.60 Prosedural Tampil Sub bab Materi
Prosedural Menggabungkan Atom
Prosedural evaluasi merupakan langkah-langkah siswa saat melakukan evaluasi.
Prosedural login dapat dilihat Gambar 3.61
Mulai
Pilih atom
Selesai
Pengecekan atom-
atom membentuk
Molekul
Terbentuk?
Tampil
informasi
Molekul
Ya
Tidak
Menggabungkan
Atom-atom
Gambar 3.61 Prosedural Menggabungkan Atom
95
Prosedural Tampil Informasi Atom
Prosedural tampil informasi atom merupakan langkah-langkah siswa untuk melihat
informasi tentang atom. Prosedural informasi atom dapat dilihat Gambar 3.62
Mulai
Pilih atom
Tampil
informasi atom
Selesai
Gambar 3.62 Prosedural Tampil Informasi Atom
96
Prosedural Pengolahan data Jawaban
Prosedural evaluasi merupakan langkah-langkah siswa saat melakukan
evaluasi. Prosedural login dapat dilihat pada Gambar 3.63
Apakah
jawaban benar
Memeriksa
jawaban
Pilihan
evaluasi
Tampilan
jawaban benar
Input
jawaban
Nilai = 0
i = 0
j=jumlh_soal
n=100/j
Mulai
Nilai = Nilai + n
i++
I >= j
Tampilan
jawaban salah
Tampilan total
nilai
Selesai
tidak
ya
ya
tidak
Gambar 3.63 Prosedural Pengolahan Data Jawaban
97
Prosedural tambah data
Prosedur tambah data merupakan langkah-langkah guru saat melakukan
tambah data. Prosedural login dapat dilihat pada Gambar 3.64
Field yang ditambah lengkap
Pemeriksaan data yang akan ditambah
Tampilan pesan “data
berhasil disimpan”
Masukkan data yang
akan ditambah
Mulai
Tampilan pesan “field harus diisi”
Selesai
ya
Tidak
Field yang ditambah valid
Tampilan pesan “field tidak valid”
ya
Tidak
.
Gambar 3.64 Prosedural Tambah Data
98
Prosedural Cari data
Prosedur cari data merupakan langkah-langkah guru saat melakukan
pencarian data. Prosedural cari data dapat dilihat pada Gambar 3.66
ada
Pencarian data
Tampilkan data yang dicari
Mulai
Selesai
Tidak
ya
Masukkan data yang ingin dicari
Tampilan pesan “Data yang dicari tidak ditemukan
.
Gambar 3.65 Prosedural Cari Data
99
Prosedural ubah data
Prosedur ubah data merupakan langkah-langkah guru saat melakukan ubah
data. Prosedural ubah data dapat dilihat pada Gambar 3.66
Periksa field yang diubah lengkap
Pemeriksaan data yang akan diubah
Tampilan pesan “data
berhasil diubah”
Mulai
Tampilan pesan “field
harus dilengkapi”
Selesai
Ya
Ya
Tidak
Pilih data yang akan diuabah
Periksa field yang diubah valid
Tampilan pesan “field tidak valid”
Tidak
.
Gambar 3.66 Prosedural Ubah Data
100
Prosedural hapus data
Prosedur hapus data merupakan langkah-langkah guru saat melakukan
hapus data. Prosedural hapus data dapat dilihat pada Gambar 3.67
Hapus?
Pemeriksaan data yang akan dihapus
Tampilan pesan “data
berhasil dihapus”
Mulai
Selesai
Tidak
ya
Pilih data yang akan dihapus
Gambar 3.67 Prosedural Hapus Data