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
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.
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.
Gambar 3.2. Flowchart Tabel Periodik A Mulai Button Unsur Tampilan Info Button Keluar Menu Koligatif Menu Skiometri 1 Y Y T T Tampilan Form Kolgatif 2 3 Y T Tampilan Form Skiometri 4 5 T Y Tampilan Form Tabel Periodik Tampilan Form Pembuka
Gambar 3.3. Flowchart Tabel Periodik B Menu Struktur Atom Tampilan Form Struktur 6 7 Help Y T Tampilan /Form Help 8 9 Keluar Y Y T T Selesai 1
Gambar 3.4. Flowchart Koligatif Radio Button Kemolalan 2 Tampilan Kemolalan 10 Radio Button Kemolaran Tampilan Kemolaran Tampilan Kemolaran 11 3 Y Y T T 12 13
Gambar 3.5. Flowchart Kemolalan A Radio Button Molal Input g, p, Mr Button Hitung 15 14 Button Hitung Radio Button g Input m, p, Mr 16 Button Hitung Radio Button mr Input g, m, p 17 14 Radio Button p Input g, m, Mr Button Hitung 18 14 T Y Y Y Y Y Y Y Y T T T T T T T 12
Gambar 3.6.Flowchart Kemolalan B
Gambar 3.7. Flowchart Perhitungan Kemolalan
Button Hitung Tampilan Form Kesalahan 10 14 Button Menu Button Keluar 2 1 10 T T 15 Tampilkan m 1 HITUNG m = (g / mr)x(1000 / p) 16 Tampilkan g 1 HITUNG g = (m x mr)x( p / 1000) 17 HITUNG mr = (g / m)x(1000 / p) Tampilkan mr 1 18 Tampilkan p 1 HITUNG p = (g / mr) x (1000 / m)
Gambar 3.8. Flowchart Kemolaran A Radio Button Molal Input g, p, Mr Button Hitung 20 19 Button Hitung Radio Button g Input m, p, Mr 21 Button Hitung Radio Button mr Input g, m, p 22 19 Radio Button p Input g, m, Mr Button Hitung 23 19 T T T T T T T T Y Y Y Y Y Y Y Y 13
Gambar 3.9. Flowchart Kemolaran B
Gambar 3.10. Flowchart Perhitungan Kemolaran
Button Hitung Tampilan Form Kesalahan 11 19 Button Menu Button Keluar 2 1 11 20 Tampilkan M 1 HITUNG M = (g / mr) x (1000 / v) 21 Tampilkan g 1 HITUNG g = (M x mr) x (1000 /v) 22 Tampilkan mr 1 HITUNG mr = (g / M) x (1000 / v) 23 HITUNG v = (g / mr) x (1000 / M) Tampilkan v 1
Gambar 3.11. Flowchart Stokiometri RButton Konsep Mol 4 Tampilan Konsep Mol RButton Konsentrasi Molar Tampilan Kemolaran Tampilan KonsenMolar 25 5 Y Y T T 26 27
Gambar 3.12. Flowchart Konsep Mol A Radio Button Molal Input g, Ar/Mr Button Hitung 28 29 28 Button Hitung Radio Button g Input m, Ar/Mr 30 Button Hitung Radio Button mr Input g, m 31 28 Y Y Y Y Y Y T T T T T T 26
Gambar 3.13. Flowchart Konsep Mol B
Gambar 3.14. Flowchart Perhitungan Konsep Mol
Button Hitung Tampilan Form Kesalahan 24 28 Button Menu Button Keluar 2 1 24 29 Tampilkan mol 1 HITUNG mol = massa / Ar 30 Tampilkan massa 1 HITUNG massa = mol x Ar 31 Tampilkan Ar/Mr 1 HITUNG Ar = massa / mol
Gambar 3.15. Flowchart Konsentrasi Molar A Radio Button Molar Input v, mol Button Hitung 32 33 32 Button Hitung Radio Button mol Input v, molar 34 Button Hitung Radio Button v Input mol , molar 35 32 T T T T T T Y Y Y Y Y Y 27
Gambar 3.16. Flowchart Konsentrasi Molar B
Gambar 3.17. Alur Program Perhitungan Konsentrasi Molar
Button Hitung Tampilan Form Kesalahan 25 32 Button Menu Button Keluar 2 1 25 33 Tampilkan Molar 1 HITUNG Molaritas = mol / v
34 HITUNG Mol = Molaritas x v Tampilkan mol 1
35
Tampilkan
v 1
HITUNG
Gambar 3.18. Flowchart Struktur Atom
6 Input Nomor Atom
Button Cari 7 Button Clear Button Keluar 6 1 7 Y Y Y T T T
Gambar 3.19. Flowchart Konfigurasi Elektron
Gambar 3.20. Alur Program Tampilan Kesalahan
Gambar 3.21. Flowchart Tampilan Help
Keterangan Nomor pada Flowchart : 1. Tampilan Menu Utama 8 Tampilan Help 9 Hitung Konfigurasi Elektron Tampilkan Konfigurasi Elektron Nomor Atom >= 1 & Nomor Atom <= 109 36 1 Y T 36 Kesalahan Tampilan 6
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
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
3.3 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.
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:
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.
SplashScreen
TabelPeriodik
Menu Help
Koligatif StrukturAtom Stoikiometri
Kemolalan Kemolaran Konfigurasi
Elektron Konsep Mol Konsentrasi Molar Help
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 :
Gambar 3.24. Skema Rancangan Tampilan Form Utama / Tabel Periodik 3 4 1 2 1 Splash Screen Gambar 800 x 600
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.
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 2 3 4 5 7 1 6
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.
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. 1 2 1 2 1 2 1 2 3
Gambar 3.27. Skema Rancangan Form Koligatif Keterangan Form Koligatif:
1. Label Judul Utama. 2. Label Pilihan
3. RadioButton Kemolalan 4. RadioButton Kemolaran
Gambar 3.28. Skema Rancangan Halaman Kemolalan & Kemolaran Keterangan Form halaman:
1 2 3 3 3 4 4 4 5 5 5 6 7 7 1 2 3 4 7
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.
Gambar 3.29. Skema Rancangan Form Stokiometri
1 2
3
Keterangan Form Stokiometri: 1. Label Judul Utama. 2. Label Pilihan
3. RadioButton Konsep Mol 4. RadioButton Konsentrasi Molar
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.
1 2 3 3 3 4 4 4 5 5 5 6 7 7 7
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.
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
1
2 3
4
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.
Gambar 3.32. Skema Rancangan Form Help TextArea
