Tutoria ini membahas langkah-langkah pembuatan aplikasi CRUD untuk pendataan zakat yang meliputi pembuatan database, form login, form utama, dan komponen-komponen yang digunakan. Aplikasi ini dapat memproses data zakat fitrah, zakat profesi, dan zakat fidyah dengan menggunakan rumus-rumus tertentu.

1. Tutorial Pembuatan Aplikasi (CRUD)
“Aplikasi Data Zakat”
Kelompok 1 : Ahmad Syauqi
MunawirAdam
NurfitrianiNingsih
Muh. Siddiq Agussalim
Aco Herman Nas
Proyek 1
Mk Sistem Terdistribusi
Kelas E
Angkatan 2016

2. Bentuk Sistem gambar AplikasiPendataan Zakat :
Form 1 Form 2
Form Utama Aplikasi

3. Langkah – langkah Pembuatannya:
1. Pertama buatkan duluDatabasenya: Data/Elemen
aplikasinya yangakan di masukkan nanti dalam Aplikasi
form Javanya(JavaFX).
a. MenggunakanXampp mysql (SQLite) +
PhpMyadmin.
Buka AplikasiXamppnya, laluaktifkan Apache dan Mysql, untuk
terhubung ke PhpMyadmin.
Seperti pada gambardibawahini .

4. 2. SelanjutnyaBukaBrowsur,dan Masuk/ketik Url :http://localhost/phpmyadmin/
3. KliknewatauBaru, untukmembuatdatabasenya
4. Isi Nama databasenya,danganti jadi penyortiran

5. Lalu klikBuat.
5. SelanjutnyatulisnamaTabel,dantentukanjumlahkolomnya,misalnya15 kolom, seperti
aplikasi yangsayatelahbuatdi atas,laluklikKirim
6. Selanjutnya,isisemuakolomsesuai aplikasi yangandabuat

6. Seperti KolomAplikasiyangsudahsayabuat sebelumnya:
7. Langkah BerikutnyaSetelahDatabasenyasudahkitabuat, yaitulangsungsajabukaAplikasi
Netbeans8.0.2 nya,ok men...

7. 8. Pada tampilanAwal Kitabuatdulufile projectnyayaituformLoginnya,dengancaraklikmenu
File + NewProject,laluakantampil sepertipadagambardi bawah ini. Dantentukankategori
bahasa pemrogramannya,dankami disinimenggunakanbahasaJava, klikjava dan pilihproject
Java Aplication,laluklik Next.
9. Selanjutnyaakantampil NewJavaApplication,da nisi nama projectanda,laluklik Finish

8. 10. gambar projectyang andatelahbuat sudahada.
11. Dan lakukanlangkahsesuai gambardi bawahini.UntukmembuatFormLogin
12.
TulisnamaClassnya
Dan klikFinish..

9. 13. SelanjutnyabuatlahFormLoginSepertibentuktampilannyadi bawahini,danmodifikasi sesuai
dengankeinginananda.
Cara menghilangkantempat tombol navigatornyayaituklikJFrame/Formnyalalulihatdi
properties,seperti berikut: Aktifkanundecorated
Properti yangkami gunakan: Label,Button,Panel,danTextField.
Untuk gambar backgroundnyakami menggunakanlabel untukmenginputgambarnyadari
Computer.
Variabel TextField1: nama, TextField2: password.
Langkah memasukkanVariabelnya,klikkananTextFieldnyadanklik

10. Source Code
ButtonCancel :
ButtonLogin:
Tombol kali danminimixenyamasukkancodingdengancara,seperti berikut.
Events+ Action+ add
CodingTombol Kali :

11. Tombol Minimise :
14. Selanjutnya buatFormSelamatDatangnya
Properti yangsaya gunakan: Panel,Label, danButton.

12. Codingnya:
ButtonKembali :
ButtonKeluar:
ButtonHome(rumah);
15. Saatnyamasuk ke pembuatanForm Utama Yaitu Aplikasi “PembayaranZakat”

13. Berikut adalah Komponen Pendukung dari Aplikasi ini
 Button
 JOption Button
 Label
 Text field
 Tabel
 Panel
Berikut adalah Formula yang digunakan dalam Aplikasi ini :
 Zakat Fitrah
(Harga beras * 3.5) * (Jumlah jiwa)
 Zakat Profesi
Nishab = (520) * (Harga Beras)
Zakat = (Jumlah Penghasilan) * (2.5) / 100
 Fidyah
(1) * (Jumlah jiwa) * (Harga 1 porsi makan) * (Hari tidak puasa)
Langkah – Langkah Pembuatannya:
1. Open NetBeans pilih Services  Databases  Klik kanan pada
Databases  New Connection

14. 2. Akan muncul New Connection Wizard  Pada Driver pilih My Sql (Connector/ j
drive)  Next
3. Pada kolom Database tuliskan dengan nama Database yang kamu buat di
PhpMyadmin  klik Button Test Connection  lihat hasil Test
Conection  Finish

15. 4. Next
5. KlikFinish

16. 6. Klik kanan pada Package form_Aplikasizakat  New  Other
7. Akan muncul New File  pada categories pilih Swing GUI Forms  pada File
Types pilih Master/Detail Simple Form  Next

17. 8. Akan muncul New Master/Detail Form  pada Class Name ubah sesuai dengan
keinginan kamu misal, (formzakat1  Next
9. Akan muncul New Master/Detail Form  pada Database Connection pilih sesuai
dengan nama Database yang kamu buat  Finish

18. 10. Dan Finish.
11. JadilahAplikasiPembayaranZakat,Kalaumaudi modifikasi silahkansesuai keinginan
anda.
Codingnya :
- ButtonInfoZakat Profesi :

19. - ButtonInfoZakat Fitrah:
- ButtonInfoZakat Fidyah:
- Code ProsesZakatFitrah:

20. - Code ProsesZakatFidyah:
- Code ProsesZakatProfesi :
- Code Button About:

21. - Code ButtonSave :
- Code Button Refresh:
- Code ButtonDelete :
-

22. 16. InilahProjectAplikasi Zakatyangkami buat,sekiandari kami,TerimaKasih…Wassalamu
Alaikumwarahmatullahi wabarakatuh…
Muda Mudahan Tutorial Ini Bermanfaat Wassalamualaikum warahmatullahi
wabarakatuh…