BukuSatu
PanduanLengkapMembuatAplikasiGUIdenganNetbeans KhususuntukPemuladanOrangAwam
Judulbuku: OtodidakBehindTheSceneSeriI:PanduanLengkapMembuatAplikasiGUIdengan NetbeansKhususuntukPemuladanOrangAwam Tujuanbuku: mengajarisemuaorangIndonesiaterutamayangberusiamudauntukmembuat softwareaplikasiLinux Platform: Linux,Windows,danMacOSX Bahasapemrograman: Java Banyakseri: tidakdiketahui Hargabuku: gratis Lisensibuku: halaldisebarluaskanasaltidakuntukkomersial Persenjataanlayoutbuku: LibreofficediatasmesinUbuntu12.04 Softwaredesainkover: Inkscape Penerbit: http://malsasa.wordpress.com
IsiBukuIni
Semangat! Pembukaan BagaimanaCaramembuatSoftware? ApaYangHarusDimilikiUntukMembuatSoftware? PenjelasanMengenaiPersenjataanKita MulaiMengenalNetbeans MembuatProyekBaru MembuatFrame PenjelasanDariPerkenalanDenganNetbeans MembongkarTampilanUtamaOtodidak MembuatAplikasiPertamaAnda PraDeploy Deploy! MengenalNetbeans(Lagi) Masalah1 TrikNetbeans1 Rangkuman1 Latihan1 PenutupBukuSatu
JanganMinder!
BukuinihanyalahcatatansetiapsayaberhasilataugagalmembuatkodeJava
Pembukaan
DenganmengharaprahmatAllah,sayamembukabukuseripertamaOtodidakBehindThe Sceneini.Bukuinisayasusunsebagaipanduanlengkapmembuat softwareaplikasisendiri untukpemuladanorangawam,berdasarkanprosespembuatanaplikasiOtodidakversi1. Ringkasnya,bukuinimembocorkanbagaimanadevelopermembuataplikasinyasendiri. TujuanbukuiniadalahmengajakpemudaIndonesiadantemantemansayadiSMK/SMP untukmembuatsoftwaresendiri,dengancarayangpalingmudah.Bukuinihanyalahproofof conceptbahwamembuatsoftwareaplikasiGUIitusangatmudah.Bukuiniakanditerbitkan berseridanpadaakhirseribuku,diharapkansemuapembacadapatmembuat software aplikasinyamasingmasing.Semogabukuinimengawalilahirnyabukubukulainataupaling tidakaplikasiaplikasilainbuatantemantemansekaliandiseluruhIndonesia. Sebagaiperingatanpalingmendasar,sayainginmengatakan: YangditekankandalamOtodidakBehindTheSceneadalahmembuatsoftwaresecara draganddrop,bukanmenuliskodekode. Mengapasayamemilihjalanini?Karenainilahjalantermudahbagisayasendiriuntuk membuatOtodidakdanbagiAndajugauntukmembuatnya.
BagaimanaCaraMembuatSebuahSoftware?
Ya,bagaimanacaranya?Banyaksekalipenggunaawamyangtidaktahu.Sayaakanbocorkan rahasianya. 1) 2) 3) 4) Desain Melakukanpemrograman Mengetessoftware Memaketkansoftware
1) 2) 3) 4) 5) 6)
ApaYangHarusDimilikiUntukMembuatSoftware?
Pertanyaansederhanayangbikinpenasaranpenggunapemula.Apasajayangsayasiapkan untukmembuatOtodidak? Sistemoperasi:Ubuntu12.04 Mesin:laptopASUSX44C Hardwareinti:mousedankeyboard Aplikasipembuatsoftware:Netbeansversi7.1.2 Aplikasibantu:GIMP ,Inkscape,Gedit,ChromiumBrowser,
Itulahpersenjataansaya.Sampaisini,pastiadapembacayangbingung.Mungkinkarena belumkenalNetbeans,Inkscape,dantemantemannya.Tidakmengapa.Perlahanakansaya jelaskan.Sebelumnya,Andaharusmengenalini:aplikasipembuatsoftware.Andabisa menyebutnya:softwarepembuatsoftware.Apaini?InilahintidarisegalaprosesAndananti dalammembuatsoftware.Andaakan: memrogram mengetikkodekodepemrograman membuatantarmukaGUIdengandraganddrop memasukkangambarkedalamsoftwareAnda(sepertidalamOtodidak) menjalankansoftwareAnda mengetessoftware
didalamaplikasipembuatsoftwareini.JikaAndasenangmembaca,makaAndaakan menyadariyangsayamaksuddenganiniadalahIntegratedDevelopmentEnvironmentatau yangbiasadisebutIDE.Ya,kitamembutuhkansoftwareuntukmembuatsoftwarelain.Software macaminilahyangdisebutIDE,kitamemasukkankodekodepemrogramandisana.Mengapa sayajelaskaninidulu?Karenasemenjakawalsayatahuadanyapembuatan software,saya tidaktahukodekodenyaharusdiketikdimana.Ketidaktahuaniniberlangsungselama beberapatahunsementaratidakadayangmengajarisaya.Cukupburuk,bukan?Oleh karenanya,demimemangkaswaktubelajarAnda,ketahuilahapaituIDE. BagaimanatampilansebuahIDE?ApakahIDEhanyasatu?Atauadabanyak?TampilanIDE sepertigambarsetelahparagrafini.IDEadabanyak.DanbiasanyaIDEituadaberdasarkan bahasapemrogramanyangdigunakan.Misalnya,pemrogramandalamBahasaJava,makaIDE yangdipakaiyanguntukJava.PemrogramandalamBahasaPascal,makaIDEyangdipakai yanguntukPascal.TidakbisaIDEkhususJavadipakaiuntukmembuatsoftwaredalamBahasa Pascal.Nah,IDEitumengikutibahasapemrograman.DansayatunjukkannamanamaIDE yangpalingterkenaldidunia:NetbeansuntukBahasaJava,DevC++untukBahasaCatauC+ +,MicrosoftVisualBasicStudiountukBahasaVisualBasic,danFreePascaluntukBahasa Pascal.SebenarnyaadaratusanlagiIDElainyangbaguspadasetiapbahasapemrograman tetapitidakmungkinsayasebutsemuadisini.
PenjelasanMengenaiPersenjataanKita
1) Apakahsayawajibmemilikisemuanya? 2) Dimanasayabisamemperolehnya? 3) Apayangharusdilakukandenganitusemua? Tentusajatidak.YangharusdimilikihanyaNetbeans.Ingat,dalammembuatOtodidaksaya memakaiversi7.1.2.AndatidakharusmenggunakanUbuntu.Windowspunbisa.Namun, untukmembuatOtodidak,palingnyamanmenggunakanUbuntu.Mengapa?Karenatumpuan Otodidakhanyalahgambardanikonikon.SemuaitusayadapatkandariUbuntu.Terutama untukikon,sayatidaklahmembuatnyadarinol.Sayacukupmengambilikonyangdisediakan Ubuntudidirektori/usr/share/icons/.ProyekOtodidakinijugabertujuanmendayagunakan ikonikondisitubiarbermanfaatuntukoranglain. Netbeanshttp://netbeans.org Inkscapehttp://inkscape.org GIMPhttp://gimp.org Pintahttp://pintaproject.com/ GeditsudahadadiUbuntudanbisadigantikandenganNotepaddiWindows ChromiumBrowserhttp://www.chromium.org/bisadigantidenganFirefox/Chrome Silakankunjungiwebtersebutuntukmemperolehprogramnya.JikaAndamenggunakan Linux,sebaiknyaunduhNetbeans7.1.2yanguntukLinux.UnduhversiyangsamauntukAnda yangmemakaiWindows.SayainstalNetbeansbukandarireporesmiUbuntutetapidari berkas.shyangsayaunduhdariwebresmiNetbeans.Ingat,ukurannyasekitar70MB.
YangAndalihatdiatasadalahNetbeans,IDEuntukJava.IDEinilahyangsayapilihuntukmembuatOtodidak. YangdibawahininamanyaQtCreator,IDEuntukBahasaC++.
MulaiMengenalNetbeans
Bukusatuinidikhususkanhanyauntukdasarpsikis,sehinggadominanperkenalan.Anda harusmengenalaplikasiNetbeansdahuluuntuktahudimanaAndaharusbekerjadalam Netbeans.Mengapa?KarenafiturNetbeanssangatbanyak,sedangkanuntukmembuat softwaremacamOtodidakhanyadibutuhkan1/100nyamungkin.JanganlahAndameraba rabasendirikarenaitumenghabiskanwaktu.BiarkansayabocorkaninformasinyauntukAnda.
SayatidakakanmenjelaskansatupersatuantarmukaNetbeanskarenaitutidakefektif.Saya hanyajelaskanglobalnyadanmerincipadaapayangdilakukanuntukmembuataplikasiGUI.
MembuatProyekBaru
RingkaswaktuAndadenganmengikutiini.
HasilpembuatanproyekbaruNetbeans
MembuatFrame
Tujuaninisemuahanyalahskrinsotterakhirini.Apaini?Akansayajelaskan.
PenjelasanDariPerkenalanDenganNetbeans
Andaharusmengenalbeberapakatapentingini: 1. Project 2. Class 3. Package 4. JFrame 5. Matisse Apaitu?Mengapapenting?Iniadalah5halyangakansayapakaiterussecaraintensdalam bukuini.Danmemanghanyadengan5halinilahAndaakanmembuataplikasi.Sayaharus melakukaneksplorasidahulusaatpertamamembuatproyekOtodidak.Sekarangkarenasaya sudahtahuhanyainiyangdibutuhkan,makaAndacukupfokuspada5halinidengan mengabaikansebegitubanyaknyatomboldanmenudiNetbeans.Inilebihhematwaktu. Project:satufolderyangmenampungseluruhkodeprogramAnda.Iniditampilkan sebagaifoldertertinggidalampanelkanandiNetbeans. Class:namasuatukelompokfungsidalambahasapemrogramanJava.NantijikaAnda sudahmencoba,akanpahamsendiri.Semuaberkasyangbernama*.javaadalahkode programAnda,dannamaberkaspastisamapersisdengannamaclass.MisalnyaAnda membuatclassbaru,makanamaclassiniakanmenjadinamaberkas.javajuga.Ini sudahaturandalambahasapemrogramanJava.Bisadibuatdenganklikkanandi Package>New>JavaClass. Package:folderyangmenampungberkas.javadanberkaspendukungproyekAnda. KalaudiOtodidak,sayamemiliki3package.Satuuntukberkas.java,satuuntuk gambargambar,dansatuuntukpustakaJavayangharusdisertakan.Bisadibuat denganklikkanandiSourcePackages>New>JavaPackage.
Sebagaiinformasi,Otodidakberisisekitar306kelasJava JFrame.Andatidakusahsebanyakitu.Cukuptahudasarnya saja.Namunbukusatuinihanyaberisiperkenalan.Anda hanyaakanmembuatsatuaplikasipalingdasardenganbuku satuini. Untukmemantapkan,sayatunjukkanada3buahPackage dalamOtodidak: 1. org.netbeans.lib.awtextra 2. otodidak 3. otodidak.gambar
MembongkarTampilanUtamaOtodidak
Untukmemudahkanbelajar,sayaakanmembericontohyangtermudah.Cukupdariaplikasi yangsudahadakemudiandijelaskanperbagiannya.Andaharustahuinidahulusebelum melangkahkebagianpembuatanaplikasi.Perhatikangambarberikut.
MembuatAplikasiPertamaAnda
Saatnyamasukkekelas.SiapuntukmembuataplikasipertamaAnda?Sayaberusaha menuliskancaranyahanyadalam1halamanini.BukaNetbeans,buka ProjectAnda.Kalau saya,namaProjectadalahProyekku.Samakansajadengansaya.Marimemulai. 1. 2. 3. 4. 5. 6. BuatsebuahJFramebernamaJFrameSatu. LetakkansatuJButtondisitu.BiarkannamanyajButton1. BuatsebuahJFramelagididalamPackageyangsama,berinama JFrameDua. LetakkansatuJButtonjugadisitu.Ubahnamanya(tekanF2)menjadijButton2. KembalikeJFramepertama. KlikkananJButton>Events>Action>ActionPerformed.Iniakanmembukaeditor kodeNetbeanssecaraotomatis,langsungpadakodefungsieventpadaJButton. 7. Salinkodeberikutpadaisi{}: this.dispose(); JframeDua.setVisible(true); 8. Sehinggasamadenganskrinsotini:
9. Sudah?Tidakadakodesalah?Sekarangkliktombol DesigndibawahTabJFrameSatu. 10. AndaakankembalimelihatJFrameSatuAnda.SekarangRunaplikasi(JFrameAnda) denganmenuRun>RunFile.Ingatmenuini,karenaakanAndapakaiterus. 11. CobakliktomboljButton1.ApakahiaotomatismembukaJframeDua?JframeDuaitu yangadajButton2nya,bukan?Jikaya,selamat.Andatelahberhasilmembuataplikasi pertamaAnda. Otodidaksebenarnyacumakumpulantombolyangberisi2bariskodeini,untukmemanggil JFrameJFramelain.Cumaitu.BerikutiniskrinsotdariJFrameyangkitadesain:
PraDeploy
Mungkininisedikitmengganggu.NamunsekaliAndalakukanini,nantinya deployakan menjadisangatlancar.Ikutisaja. 1) Lihat,dengannamaproyekProyekku,makadidalamPackageproyekkupastiada sebuahkelasbernamaProyekku.java.Benar,bukan? 2) Hapuskelastersebut. 3) BukamenuRun>SetProjectConfiguration>Customize. 4) GantiMainClassdariproyekku.Proyekkumenjadiproyekku.JFrameSatu. 5) OK.
PenjelasanPraDeploy
Sebenarnya,apayangsedangkitalakukanini?JikaAndacerdik,akanterbacabahwakita sedangmengaturagarkelasutamakelasyangpertamakalidijalankannantisaatprogram dibukaadalahJFrameSatu.JikamasihadakelasProyekku,makanantiyangpertamakali dijalankanadalahkelasProyekkusedangkankelasinitidakadaapaapanya.ProgramAnda akanberjalantidaksemestinya.YangkitainginkanjustruJFrameSatuyangberjalanpertama kali.MakadariitukitahapuskelasProyekkudankitaaturagarkelasutamaadalah JFrameSatu.JikaAndabingung,janganpedulikan.Lanjutsaja.
Deploy!
Dalamkamussaya,deployitumaknanyamenyebarkan.DidalampemrogramanJava,bersama Netbeans,maknanyaadalahmembuatberkaseksekutabeltunggaldariaplikasikita.Jadi,kita akanmembuatsemacamEXEsetelahkitamemrogram.Nantikitabisakopiberkassemacam EXEinikekomputerlaindanituakanberjalandisana.Formataslihasil deployJavaadalah .jar.JikaAndadekatdenganlingkunganpemrogramanataumobilesmartphone,pastikenal formatuniversalini.FormatinisanggupberjalandisegalaOS.Kitaakanmembuatnyadengan sekaliklik. 1) PastikanAndasedangmembukaproyekAnda. 2) Kliktombol CleanandBuildProject. 3) Sudah. Lalu,dimanakahletakberkasbuatankitaitu?Kalaudikomputersaya,iaadadi /home/master/Publik/Java/Netbeans/NetbeansProject/Proyekku/dist.Alamatinibisa berbedadikomputerAndatergantungdimanaAndamengaturpertamakaliproyekAnda disimpan.Pokoknya,.jarsenantiasadideploykedalamfolderdist.Inilaheksekutabelkita. Aplikasikitasendiri!Sekarangmaridijalankan. 1) 2) 3) 4) Klikkanan>Properties>TABPermission>centangExecutable. OK. Klik2kalipada.jarAnda. Selamat,AndatelahmenyelesaikanaplikasipertamaAnda!
MengenalNetbeans(Lagi)
AndaharusmengenalNetbeans.Mengapa?Untukmenghematwaktu.JikaAndabisabekerja secaracepat,aplikasiAndacepatselesai.Bagaimanabisa?Denganpemahamanterhadap senjataAndaini.Perhatikan,padadasarnya,Netbeansmemilikitampilankanan,tengahdan kiri.JikaAndamemangbelumfamiliardenganyangnamanyaIDE,makasayakenalkandulu. PANEL KIRI PANEL kanan tab properties PANEL kanan tab pallete
PanelkiriNetbeansadalahProject Explorer.Entahlahnamanyaapa intinyadigunakanuntukmelihatisi proyek.ApayangakanAnda lakukandenganini? MenambahPackage MenambahClass(Javaatau JFrameForm) MengurusLibraries(nantipada akhirseribuku) Selainitu,panelkananiniberisi TABSubversion,Services,Output, danlainlain.ApaAnda memerlukannya?Tidakuntuksaat ini.
Panelkananiniistimewa.Ada2TAB utamayakniPalletedanProperties. PadaTABPropertiesini,Andaakan melakukanhalhalyangsangatpenting: MemberigambarpadaJlabel MemberinamaJFrame MemberijudulJFrame MengaturcloseoperationpadaJFrame MengaturukurandanposisiJFrame Mengatursegalagalanyapadasetiap komponenGUIMatisse Mengapainiada?Karenasetiap komponenmemilikiratusanproperti. Apaituproperti?Ituadalahsifatyang bisadiubahpadasetiapkomponen. Pengubahansifatinilahyangakan seringAndalakukandalammembuat aplikasi. SemuakomponentermasukButton, Label,TextArea,Panel,danlainlainada propertinyadandiaturdisini.
PanelkananpadaTABPalleteini adalahkuncisegalapembuatanGUI kita.Yangdimaksuddraganddrop ituadalahpenggunaanPalleteini. Matissemenyediakansekian komponenGUIdidalamPalleteini. Kitacukupdragsalahsatunyalalu dropdikanvastengah.Jadilah sebuahGUI. MatissedenganPalleteini sesungguhnyamenyederhanakan pemrograman.Andabisamembuat GUItanpaMatisse.NamunAnda harusmembuatkodeprogramnya satupersatuyangituuntuksatu Buttonsajabisa20bariskode. DenganMatissesemuaitumenjadi simpel. JikasebeluminiAndapernah menggunakanMicrosoftVisual Basic,makasesungguhnyaMatisse sangatmiripdengannya.
Masalah1
InsyaAllah,dalamsetiapseribukuini,sayaakankupasmasalahyangterjadidansayaberitrik Netbeans.Mengapa?UntukmenghematwaktuAndajuga.Karenaadasekianmasalahyang sayahadapisaatmembuataplikasiyangituharussayaselesaikandenganmencaridiinternet selamaberharihari.Sayaakanpersingkatdenganbukuinisaja.Sekarangwaktunyamasalah pertama.
Masalah:JFrameselalutampildipojokkananatas. Harapan:JFrameselalutampilditengah. Solusi:masukkankodeini setLocationRelativeTo(null); padabagiankode public JFrameSatu() { initComponents(); } didalamJFrameSatu.JikaAnda inginJframeDuajugaadadi tengah(dansenantiasadi tengah),lakukanhalyangsama. Kodeyangbenarsepertidi samping.
TrikNetbeans1
TekanESCuntukmembatalkansegalaaksiyangsedangdilakukan.
Rangkuman1
Andatelahmendapatkode2baris: this.dispose(); new JframeDua().setVisible(true); BarispertamauntukmenutupJFrame.Baris keduauntukmemanggilJFrameDuadalam kondisitampak.InilahintiaplikasiOtodidak. Andatelahmendapatkodetambahan: setLocationRelativeTo(null); Iniuntukmemastikanletakjendelakitaagar selaluditengahlayar.
Latihan1
Memangketikasayadikelas,PRitutidakmenyenangkan.Namunkinisetelahmencicip manisnyapemrograman,adanyatugasserasakembalikemasaTK.Andabisamelakukanini untukmengisiwaktubelajarAnda: 1) 2) 3) 4) 5) BuatlahJFramebarudenganTextField.Cobacobasaja. TambahkanTextArea. TambahkanPanel. Gabungkanlangkah1,2,3kedalam1JFramebaru. Buatlah1JFramebaruyangpunyabutton,hubungkanbuttonkeJFrameyangbaru jadi. 6) Beri1tomboldiJFramesatunya,hubungkankeJFramesebelumnya. 7) TesprogramAnda.Diaharusbisasalingmembukaantarframe. Percayalah,tugassebanyakiniakankurang.
InginMengunduhOtodidak?
Andabisamemperolehnyadarihttp://malsasa.wordpress.com/2013/02/24/otodidakversi1 dirilis/.Jikatidakmungkinmengunjunginya,Andabisamemanfaatkanmirrorberikut: http://otodidak.linux.or.id http://sourceforge.net/projects/otodidak/?source=directory
PenutupBukuSatu
Alhamdulillah,Andadansayatelahmenyelesaikanbukusatuini.Denganberbekalinisaja, Andayangkreatifbisamembuataplikasisederhanasendiri.SementaraAndabelummendapat carapemaketanDebian,pemaketankeEXE,bagaimanamemasukkangambar,membuat link, danlainlain.Sabar,belajarituperlahanlahan.Sampaijumpadibukudua.Ingat,bukuini tidaklepasdaricacat.Silakankomentardiblogsayauntukmengungkapkritikdansaran. Semogainibermanfaat.