51
BAB III ANALISIS DAN PERANCANGAN
3.1
Analisis Sistem Tahapan analisis adalah tahapan paling awal dalam membuat perangkat
lunak, dalam program ini user dapat melakukan pencarian perhitungan konsentrasi suatu larutan, konfigurasi elektron dari suatu unsur. User juga dapat mengetahui informasi tentang unsur-unsur diantaranya lambang & nama unsur, nomor & massa atom, bilangan oksidasi, titik didih, titik lebur dan massa jenis suatu unsur. Susunan tabel periodik dari unsur-unsur ditampilkan berupa rangkaian tombol polos yang diisi dengan huruf-huruf berwarna merah, kuning, biru, dan hijau sebagai lambang dan bentuk suatu unsur. Tombol-tombol itu akan memunculkan nama dari suatu unsur apabila kursor nya di arahkan pada salah satu tombol. Kemudian terdapat juga sebuah menu utama di sebelah kiri atas dari tabel periodik. Menu tersebut berisi tentang perhitungan Koligatif suatu larutan, Stikiometri dan Konfikugari elektron dari suatu unsur. Di sebelah menu utama juga terdapat menu help dimana menu ini berisi tentang keterangan atau cara-cara dan informasi tentang apa saja yang dapat dilakukan user pada tabel periodik ini. Di dalam isi menu bar Koligatif user dapat melakukan dua pilihan yaitu mencari Kemolalan suatu zat atau mencari Kemolaran suatu zat. Didalam menu Kemolalan dan Kemolaran user dapat mencari nalai dari kemolalan & kemolaran
52
suatu zat, massa molekul relatif zat, massa zat terlarut, massa zat pelarut, dan volum larutan dengan cara memasukan inputan diantara ketiga data dan mendapatkan satu jawaban nilai. Pada menu Stokiometri user dapat melakukan dua pilihan yaitu mencari Konsep Mol dan Konsentrasi Molar suatu zat. Didalam menu Konsep Mol dan Konsentrasi Molar user dapat mencari nalai dari mol dan molar suatu zat, massa unsur / senyawa suatu molekul, massa unsur / senyawa, dan volume larutan dengan cara memasukan inputan diantara kedua data dan mendapatkan satu jawaban nilai. Dan pada menu Struktur Atom disini user dapat melakukan pencarian Konfigurasi Elektron suatu unsur dengan cara memasukan nomor dari unsurnya.
3.2
Rancangan Tampilan Program Pada bagian ini akan dijelaskan secara rinci perancangan aplikasi
pembelajaran kimia dan tabel periodik, meliputi diagram Class dan diagram flowchart.
3.2.1
Class Diagram Class dapat merupakan implementasi dari sebuah interface, yaitu class
abstrak yang hanya memiliki metoda. Interface tidak dapat langsung diinstansiasikan, tetapi harus diimplementasikan dahulu menjadi sebuah class.
53
Gambar 3.1. Class Diagram Aplikasi Pembelajaran Kimia dan Tabel Periodik 3.2.2
Flowchart Diagram flowchart di terapkan untuk menggambarkan suatu tahapan
penyelesaian masalah secara sederhana, terurai, rapi dan jelas dengan menggunakan simbol-simbol yang standar. Tahap penyelesaian masalah yang disajikan harus jelas, sederhana, efektif dan tepat. Dibawah ini adalah tampilan flowchart untuk masing-masing menu yang akan dibuat dalam program ini.
54
Mulai
Tampilan Pembuka
Form
1 Tampilan Form Tabel Periodik
Y
Button Unsur
Button Keluar
Tampilan Info
Y T
T
Y
Menu Koligatif
T
2
Tampilan Form Skiometri
4
3
Y
Menu Skiometri
T
Tampilan Form Kolgatif
5
Gambar 3.2. Flowchart Tabel Periodik A
55
Y
Menu Struktur Atom
Tampilan Form Struktur
6
7
T
Y
Help
Tampilan /Form Help
T
Keluar
9
T
1
Y
Selesai
Gambar 3.3. Flowchart Tabel Periodik B
8
56
10
2
Y
Radio Button Kemolalan
Tampilan Kemolalan
12
T
11 Y
Radio Button Kemolaran
Tampilan Kemolaran
T
3 Gambar 3.4. Flowchart Koligatif
13
57
14 T
12
Y
Radio Button Molal
Input g, p, Mr
Button Hitung
Y
15
14
T T Y
Input m, p, Mr
Radio Button g
Button Hitung
T
Y
16
14 T Y
Radio Button mr
Input m, p
g,
Button Hitung
T
Y
17
14 T Y
Radio Button
Input g, m, Mr
Button Hitung
p
T
Gambar 3.5. Flowchart Kemolalan A
Y
18
58
Button Hitung
Tampilan Form Kesalahan
10
T
14
Button Menu
2
T
Button Keluar
1
10
Gambar 3.6.Flowchart Kemolalan B
15
HITUNG m = (g / mr)x(1000 / p)
Tampilkan m
1
16
HITUNG g = (m x mr)x( p / 1000)
Tampilkan g
1
17
HITUNG mr = (g / m)x(1000 / p)
Tampilkan mr
1
18
HITUNG p = (g / mr) x (1000 / m)
Tampilkan p
1
Gambar 3.7. Flowchart Perhitungan Kemolalan
59
19 T
13
Y
Radio Button Molal
Input g, p, Mr
Button Hitung
T
Y
20
19 T Y
Input m, p, Mr
Radio Button g
Button Hitung
Y
21
19
T T Y
Radio Button mr
Input m, p
g,
Button Hitung
Y
22
T
19 T Y
Radio Button
Input g, m, Mr
p
Button Hitung
T
Gambar 3.8. Flowchart Kemolaran A
Y
23
60
Button Hitung
Tampilan Form Kesalahan
11
19
Button Menu
2
Button Keluar
1
11
Gambar 3.9. Flowchart Kemolaran B
20
HITUNG M = (g / mr) x (1000 / v)
Tampilkan M
1
21
HITUNG g = (M x mr) x (1000 /v)
Tampilkan g
1
22
HITUNG mr = (g / M) x (1000 / v)
Tampilkan mr
1
23
HITUNG v = (g / mr) x (1000 / M)
Tampilkan v
1
Gambar 3.10. Flowchart Perhitungan Kemolaran
61
24
4
Y
RButton Konsep Mol
Tampilan Konsep Mol
26
T
25 RButton Konsentrasi Molar
Y
Tampilan Kemolaran KonsenMolar
T
5 Gambar 3.11. Flowchart Stokiometri
27
62
28 T
26
Y
Radio Button Molal
Input g, Ar/Mr
Button Hitung
T
Y
29
28 T Y
Input m, Ar/Mr
Radio Button g
Button Hitung
Y
30
28
T T
Radio Button mr
Y
Input m
g,
Button Hitung
T
Gambar 3.12. Flowchart Konsep Mol A
Y
31
63
Button Hitung
Tampilan Form Kesalahan
24
28
Button Menu
2
Button Keluar
1
24
Gambar 3.13. Flowchart Konsep Mol B
29
HITUNG mol = massa / Ar
Tampilkan mol
1
30
HITUNG massa = mol x Ar
Tampilkan massa
1
31
HITUNG Ar = massa / mol
Tampilkan Ar/Mr
1
Gambar 3.14. Flowchart Perhitungan Konsep Mol
64
32 T
27
Y
Radio Button Molar
Input mol
v,
Button Hitung
Y
33
32
T T Y
Input v, molar
Radio Button mol
Button Hitung
Y
34
32
T T Y
Radio Button v
Input mol , molar
Button Hitung
T
Gambar 3.15. Flowchart Konsentrasi Molar A
Y
35
65
Button Hitung
Tampilan Form Kesalahan
25
32
Button Menu
2
Button Keluar
1
25
Gambar 3.16. Flowchart Konsentrasi Molar B
33
HITUNG Molaritas = mol / v
Tampilkan Molar
1
34
HITUNG Mol = Molaritas x v
Tampilkan mol
1
35
HITUNG V = mol / Molaritas
Tampilkan v
1
Gambar 3.17. Alur Program Perhitungan Konsentrasi Molar
66
6
Input Nomor Atom
Y
Button Cari
7
T
Y
Button Clear
6
T
Y
Button Keluar
1
T
7
Gambar 3.18. Flowchart Struktur Atom
67
7
Nomor Atom >= 1 & Nomor Atom <= 109
Y
Hitung Konfigurasi Elektron
Tampilkan Konfigurasi Elektron
T
1 36
Gambar 3.19. Flowchart Konfigurasi Elektron
Tampilan Kesalahan
36
6
Gambar 3.20. Alur Program Tampilan Kesalahan
Tampilan Help
8
Gambar 3.21. Flowchart Tampilan Help
Keterangan Nomor pada Flowchart : 1.
Tampilan Menu Utama
2.
Form Koligatif
9
68
3.
Menu Koligatif
4.
Form Stoikiometri
5.
Menu Stoikiometri
6.
Form Struktur Atom
7.
Menu Struktur Atom
8.
Form Help
9.
Menu Help
10.
Pemilihan Kemolalan
11.
Pemilihan Kemolaran
12.
Form Kemolalan
13.
Form Kemolaran
14.
Form Perhitungan Kemolalan
15.
Hasil Perhitungan Molalitas
16.
Hasil Perhitungan Massa (g)
17.
Hasil Perhitungan Massa (v)
18.
Hasil Perhitungan Mrp
19.
Form Perhitungan Kemolaran
20.
Hasil Perhitungan Molaritas
21.
Hasil Perhitungan Massa (g)
22.
Hasil Perhitungan Volume (v)
23.
Hasil Perhitungan Mr
69
3.3
24.
Pemilihan Konsep Mol
25.
Pemilihan Konsentrasi Molar
26.
Form Konsep Mol
27.
Form Konsentrasi Molar
28.
Form Perhitungan Konsep Mol
29.
Hasil Perhitungan Mol (n)
30.
Hasil Perhitungan Massa (m)
31.
Hasil Perhitungan Ar / Mr
32.
Form Perhitungan Konsentarsi Molar
33.
Hasil Perhitungan Mol (n)
34.
Hasil Perhitungan Volume (v)
35.
Hasil Perhitungan Molaritas (M)
36.
Form Kesalahan
Perancangan Object Oriented Sebuah sistem OOP, terdiri dari interaksi antar objek, ini mempunyai arti
bahwa setiap data dan method (fungsi) yang memproses data disimpan ke dalam kelas-kelas yang dapat dipanggil secara terpisah dan mandiri serta dapat berkomunikasi antar sesamanya.
70
3.4
Perancangan Antarmuka Dalam bab ini akan dibahas tentang tata cara merancang dan membangun
sebuah aplikasi tabel periodik, koligatif zat, struktur atom dan stokiometri yang dimulai dengan pembuatan skema rancangan menunya, yaitu: SplashScreen Help
Help
TabelPeriodik
Menu
Koligatif
Kemolalan
StrukturAtom
Kemolaran
Konfigurasi Elektron
Stoikiometri
Konsep Mol
Konsentrasi Molar
Gambar 3.22. Skema Rancangan Aplikasi
Splash Screen merupakan halaman pembuka yang disediakan oleh Pemrograman Java sebagai Menu tampilan selamat datang atau tampilan judul program, Tampilan disini yaitu dapat berupa gambar yang di ambil dari file gambar dalam format file dapat berupa file JPEG, Bitmap (BMP) dan PNG. Tampilan ini berukuran 800 x 600 pixel dan berdurasi sekitar 3 detik sebelum masuk ke halaman tabel periodik.
71
Splash Screen Gambar 800 x 600
Gambar 3.23. Skema Rancangan Form Pembuka Terdapat satu buah form utama pada Aplikasi Tabel Periodik Kimia. Form ini berupa table yang berisi lambang-lambang dan informasi dari suatu unsur. Form ini juga memiliki menu bar yang menghubungkan ke halaman-halaman yang terdapat pada aplikasi ini : 2 4
1
3
1
Gambar 3.24. Skema Rancangan Tampilan Form Utama / Tabel Periodik
72
Keterangan Form Utama : 1. Panel yang berisi deretan tombol-tombol Lambang Unsur, yang berjumlah 109 Lambang Unsur. 2. Menu Bar. 3. Label yang menampilkan keterangan warna dari Lambang Unsur. 4. Titile Bar Form Utama / Tabel Periodik. 1
6
2
7
3 4 5 Gambar 3.25. Skema Rancangan Menu Bar
Keterangan Form Menu Bar: 1. Menu Utama. 2. Menu Koligatif 3. Menu Stokiometri 4. Menu Struktur Atom 5. Keluar 6. Menu Utama 7. Menu Help
73
Pada saat kursor diarahkan ke tombol-tombol Lambang Unsur pada tabel periodik maka akan tampil informasi nama dari suatu Unsur dan pada saat di klik akan muncul form baru yaitu form yang memberikan informasi dari suatu unsur. Pada form ini menggunakan beberapa label, teks field dan tombol untuk keluar dari halaman info.
1
2
1
2
1
2
1
2
3 Gambar 3.26. Skema Rancangan Form Info Keterangan Form Info: 1. Label memberikan nama keterangan dari suatu unsur. 2. TextField tempat / isi keterangan dari suatu unsur. 3. Button / tombol keluar dari Form Info. Pada Menu Utama terdapat menu bar yaitu Koligatif, pada saat menu ini di pilih maka akan muncul form baru yaitu Form Perhitungan Koligatif Zat. Di dalam form ini terdapat 2 buah Option yaitu perhitungan untuk Kemolalan dan Kemolaran.
74
1 2 3 4
Gambar 3.27. Skema Rancangan Form Koligatif Keterangan Form Koligatif: 1. Label Judul Utama. 2. Label Pilihan 3. RadioButton Kemolalan 4. RadioButton Kemolaran
1 2 3
3
4
5
4
5
4
5
3
6 7
7
7
Gambar 3.28. Skema Rancangan Halaman Kemolalan & Kemolaran Keterangan Form halaman:
75
1. Label Judul Kemolalan / Kemolaran. 2. Label Pilihan. 3. RadioButton kemolalan, massa zat terlarut, massa zat pelarut, massa molekul relatif, dan volume larutan. 4. Label nama kemolalan, massa zat terlarut, massa zat pelarut, massa molekul relatif dan volume larutan. 5. TextField nama kemolalan, massa zat terlarut, massa zat pelarut, massa molekul relatif dan volum larutan. 6. TextArea perhitungan 7. Button hitung, button ke form Koligatif, dan button ke form Utama / Tabel Periodik. Pada Menu Utama terdapat menu bar yaitu Koligatif, pada saat menu ini di pilih maka akan muncul form baru yaitu Form Perhitungan Koligatif Zat. Di dalam form ini terdapat 2 buah Option yaitu perhitungan untuk Konsep Mol dan Konsentrasi Molar. 1 2
3
4
Gambar 3.29. Skema Rancangan Form Stokiometri
76
Keterangan Form Stokiometri: 1. Label Judul Utama. 2. Label Pilihan 3. RadioButton Konsep Mol 4. RadioButton Konsentrasi Molar 1 2 3
3
3
4
5
4
5
4
5
6
7
7
7
Gambar 3.30. Sketsa Halaman Konsep Mol & Konsentrasi Molar Keterangan Form Menu Bar: 1. Label Judul Konsep Mol / Konsentrasi Molar 2. Label Pilihan. 3. RadioButton konsep mol, konsentrasi molar, masa unsur / senyawa relatif, massa zat, dan volume larutan. 4. Label nama konsep mol, konsentrasi molar, masa unsur / senyawa relatif, massa zat, dan volume larutan.
77
5. TextField nama konsep mol, konsentrasi molar, masa unsur / senyawa relatif, massa zat, dan volume larutan. 6. TextArea perhitungan. 7. Button hitung, button ke form Stokiometri, button ke form Utama / Tabel Periodik. Selain menu bar Koligatif Zat dan Stokiometri pada menu utama terdapat pula menu bar Struktur Atom. Struktur atom yang berisi tentang konfigurasi elektron. Pada halaman ini terdiri dari label, teks field, teks area dan tombol.
1 2
3
4
5
5
5
Gambar 3.31. Skema Rancangan Form Struktur Atom
Keterangan Form Struktur Atom: 1. Label Judul Konfigurasi Elektron. 2. Label informasi / keterangan 3. TextField untuk memasukan nomor unsur untuk mencari konfigurasi elektronnya
78
4. TextArea pencarian Konfigurasi Elektron 5. Button Cari, Button Clear, dan Button kembali ke form utama. Pada menu utama yang kedua terdapat menu bar Help. Jika menu bar ini dipilih maka akan muncul form baru yaitu form help yang berfungsi untuk memberikan informasi tentang iformasi dari aplikasi ini.
TextArea Berisi tentang Informasi
Gambar 3.32. Skema Rancangan Form Help
