BAB III ANALISIS DAN PERANCANGAN

5 BAB III ANALISIS DAN PERANCANGAN 3. Analisis Sistem ahapan 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. ombol-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 ampilan Program Pada bagian ini akan dijelaskan secara rinci perancangan aplikasi pembelajaran kimia dan tabel periodik, meliputi diagram Class dan diagram flowchart. 3.2. 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.. Class Diagram Aplikasi Pembelajaran Kimia dan abel 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. ahap 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 ampilan Pembuka Form ampilan Form abel Periodik Unsur ampilan Info Keluar Menu Koligatif ampilan Form Kolgatif 2 3 Menu Skiometri ampilan Form Skiometri 4 5 Gambar 3.2. Flowchart abel Periodik A

55 Menu Struktur Atom ampilan Form Struktur 6 7 Help ampilan /Form Help 8 9 Keluar Selesai Gambar 3.3. Flowchart abel Periodik B

56 0 2 ampilan Kemolalan Kemolalan 2 Kemolaran ampilan Kemolaran 3 3 Gambar 3.4. Flowchart Koligatif

57 4 2 Molal Input g, p, Mr Hitung 5 4 g Input m, p, Mr Hitung 6 4 mr Input g, m, p Hitung 7 4 p Input g, m, Mr Hitung 8 Gambar 3.5. Flowchart Kemolalan A

58 Hitung ampilan Form Kesalahan 0 4 Menu 2 Keluar 0 Gambar 3.6.Flowchart Kemolalan B 5 HIUNG m = (g / mr)x(000 / p) ampilkan m 6 HIUNG g = (m x mr)x( p / 000) ampilkan g 7 HIUNG mr = (g / m)x(000 / p) ampilkan mr 8 HIUNG p = (g / mr) x (000 / m) ampilkan p Gambar 3.7. Flowchart Perhitungan Kemolalan

59 9 3 Molal Input g, p, Mr Hitung 20 9 g Input m, p, Mr Hitung 2 9 mr Input g, m, p Hitung 22 9 p Input g, m, Mr Hitung 23 Gambar 3.8. Flowchart Kemolaran A

60 Hitung ampilan Form Kesalahan 9 Menu 2 Keluar Gambar 3.9. Flowchart Kemolaran B 20 HIUNG M = (g / mr) x (000 / v) ampilkan M 2 HIUNG g = (M x mr) x (000 /v) ampilkan g 22 HIUNG mr = (g / M) x (000 / v) ampilkan mr 23 HIUNG v = (g / mr) x (000 / M) ampilkan v Gambar 3.0. Flowchart Perhitungan Kemolaran

6 24 R 4 Konsep ampilan Mol Konsep Mol 26 25 R Konsentrasi Molar ampilan Kemolaran KonsenMolar 27 5 Gambar 3.. Flowchart Stokiometri

62 28 26 Molal Input g, Ar/Mr Hitung 29 28 g Input m, Ar/Mr Hitung 30 28 mr Input g, Hitung m 3 Gambar 3.2. Flowchart Konsep Mol A

63 Hitung ampilan Form Kesalahan 24 28 Menu 2 Keluar 24 Gambar 3.3. Flowchart Konsep Mol B 29 HIUNG mol = massa / Ar ampilkan mol 30 HIUNG massa = mol x Ar ampilkan massa 3 HIUNG Ar = massa / mol ampilkan Ar/Mr Gambar 3.4. Flowchart Perhitungan Konsep Mol

64 32 27 Molar Input v, mol Hitung 33 32 mol Input v, molar Hitung 34 32 v Input mol, molar Hitung 35 Gambar 3.5. Flowchart Konsentrasi Molar A

65 Hitung ampilan Form Kesalahan 25 32 Menu 2 Keluar 25 Gambar 3.6. Flowchart Konsentrasi Molar B 33 HIUNG Molaritas = mol / v ampilkan Molar 34 HIUNG Mol = Molaritas x v ampilkan mol 35 HIUNG V = mol / Molaritas ampilkan v Gambar 3.7. Alur Program Perhitungan Konsentrasi Molar

66 6 Input Nomor Atom Cari 7 Clear 6 Keluar 7 Gambar 3.8. Flowchart Struktur Atom

67 7 Nomor Atom >= & Nomor Atom <= 09 Hitung Konfigurasi Elektron ampilkan Konfigurasi Elektron 36 Gambar 3.9. Flowchart Konfigurasi Elektron 36 ampilan Kesalahan 6 Gambar 3.20. Alur Program ampilan Kesalahan 8 ampilan Help 9 Gambar 3.2. Flowchart ampilan Help Keterangan Nomor pada Flowchart :. ampilan Menu Utama 2. Form Koligatif

68 3. Menu Koligatif 4. Form Stoikiometri 5. Menu Stoikiometri 6. Form Struktur Atom 7. Menu Struktur Atom 8. Form Help 9. Menu Help 0. Pemilihan Kemolalan. Pemilihan Kemolaran 2. Form Kemolalan 3. Form Kemolaran 4. Form Perhitungan Kemolalan 5. Hasil Perhitungan Molalitas 6. Hasil Perhitungan Massa (g) 7. Hasil Perhitungan Massa (v) 8. Hasil Perhitungan Mrp 9. Form Perhitungan Kemolaran 20. Hasil Perhitungan Molaritas 2. Hasil Perhitungan Massa (g) 22. Hasil Perhitungan Volume (v) 23. Hasil Perhitungan Mr

69 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) 3. 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.

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 abelperiodik Menu Koligatif StrukturAtom Stoikiometri Kemolalan Kemolaran Konfigurasi Elektron 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, ampilan disini yaitu dapat berupa gambar yang di ambil dari file gambar dalam format file dapat berupa file JPEG, Bitmap (BMP) dan PNG. ampilan ini berukuran 800 x 600 pixel dan berdurasi sekitar 3 detik sebelum masuk ke halaman tabel periodik.

7 Splash Screen Gambar 800 x 600 Gambar 3.23. Skema Rancangan Form Pembuka erdapat satu buah form utama pada Aplikasi abel 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 3 Gambar 3.24. Skema Rancangan ampilan Form Utama / abel Periodik

72 Keterangan Form Utama :. Panel yang berisi deretan tombol-tombol Lambang Unsur, yang berjumlah 09 Lambang Unsur. 2. Menu Bar. 3. Label yang menampilkan keterangan warna dari Lambang Unsur. 4. itile Bar Form Utama / abel Periodik. 6 2 7 3 4 5 Gambar 3.25. Skema Rancangan Menu Bar Keterangan Form Menu Bar:. 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. 2 2 2 2 3 Gambar 3.26. Skema Rancangan Form Info Keterangan Form Info:. Label memberikan nama keterangan dari suatu unsur. 2. extfield tempat / isi keterangan dari suatu unsur. 3. / 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 2 3 4 Gambar 3.27. Skema Rancangan Form Koligatif Keterangan Form Koligatif:. Label Judul Utama. 2. Label Pilihan 3. Kemolalan 4. Kemolaran 2 3 3 3 4 4 4 5 5 5 6 7 7 7 Gambar 3.28. Skema Rancangan Halaman Kemolalan & Kemolaran Keterangan Form halaman:

75. Label Judul Kemolalan / Kemolaran. 2. Label Pilihan. 3. 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. extfield nama kemolalan, massa zat terlarut, massa zat pelarut, massa molekul relatif dan volum larutan. 6. extarea perhitungan 7. hitung, button ke form Koligatif, dan button ke form Utama / abel 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. 2 3 4 Gambar 3.29. Skema Rancangan Form Stokiometri

76 Keterangan Form Stokiometri:. Label Judul Utama. 2. Label Pilihan 3. Konsep Mol 4. Konsentrasi Molar 2 3 3 3 4 4 4 5 5 5 6 7 7 7 Gambar 3.30. Sketsa Halaman Konsep Mol & Konsentrasi Molar Keterangan Form Menu Bar:. Label Judul Konsep Mol / Konsentrasi Molar 2. Label Pilihan. 3. 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. extfield nama konsep mol, konsentrasi molar, masa unsur / senyawa relatif, massa zat, dan volume larutan. 6. extarea perhitungan. 7. hitung, button ke form Stokiometri, button ke form Utama / abel 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. 2 3 4 5 5 5 Gambar 3.3. Skema Rancangan Form Struktur Atom Keterangan Form Struktur Atom:. Label Judul Konfigurasi Elektron. 2. Label informasi / keterangan 3. extfield untuk memasukan nomor unsur untuk mencari konfigurasi elektronnya

78 4. extarea pencarian Konfigurasi Elektron 5. Cari, Clear, dan 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. extarea Berisi tentang Informasi Gambar 3.32. Skema Rancangan Form Help