JavaSC Developer

Cara Menampilkan Titik Terdekat Dari Lokasi Pengguna Pada Google Maps

2018-06-30T23:47:00.002+07:00

Pembuka

Tutorial ini akan membahas mengenai bagaimana menampilkan titik/ lokasi terdekat dari lokasi pengguna saat ini yang diambil secara langsung, bisa lihat tutorial mengenai Cara Menampilkan Lokasi Pengguna Menggunakan Google Maps Geolocation. Cara kerjanya adalah dengan menghitung jarak setiap lokasi pada titik pengguna yang berada pada lingkaran (Circles). Setelah dihitung maka lokasi yang terdekat dan berada pada lingkaran akan ditampilkan ke dalam peta.

Gambar 1

Pembahasan

Silahkan gunakan file pada tutorial sebelumnya mengenai geolocation, karena kita tidak akan merubah banyak kode program. Pertama tambahkan beberapa variabel sebelum fungsi initMap(), tepat setelah variabel output.

var radius_circle;
var markerLokasiLain = [];
var lokasi = [
    {name: "Waroeng Six", lat: 0.4698576, lng: 101.3689378},
    {name: "Pondok Pesantren", lat: 0.4734302, lng: 101.3983134},
    {name: "Kolam Renang", lat: 0.4677678, lng: 101.3692093},
    {name: "Bakso Bintang Merpati", lat:0.4718068, lng: 101.3703589},
    {name: "Dalas Fried Chicken", lat:0.4700459, lng: 101.3667134},
    {name: "Garuda Jaya Motor", lat: 0.4680818, lng: 101.3674838},
    {name: "Giant", lat: 0.4648009, lng: 101.3804451},
];

Pada variabel lokasi, saya menggunakan beberapa contoh data lokasi dalam bentuk array. Selanjutnya tambahkan fungsi getRadius() setelah fungsi initMap(), berikut kode program yang ada pada fungsi getRadius().

function getRadius(data){
    var i;
    var radius_km = Number(data.value);
    var lat = Number($("#latitude").text());
    var lng = Number($("#longitude").text());
    var pos = {
        lat: lat,
        lng: lng,
    };
    if (radius_circle) {
        radius_circle.setMap(null);
        radius_circle = null;
    }
    for (i = 0; i < markerLokasiLain.length; i++) {
        if (markerLokasiLain[i]) {
            markerLokasiLain[i].setMap(null);
            markerLokasiLain[i] = null;
        }
    }
    geocoder.geocode({'latLng': pos}, function(results, status) {
        var address_lat_lng = results[0].geometry.location;
        radius_circle = new google.maps.Circle({
            center: { lat: lat, lng:lng },
            strokeColor: '#2980b9',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#34495e',
            fillOpacity: 0.35,
            radius: radius_km * 1000,
            clickable: false,
            map: map,
        });

        if (radius_circle) map.fitBounds(radius_circle.getBounds());

        for (var j = 0; j < lokasi.length; j++) {
            (function (location) {
            var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
            var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng);
            var formatJarak;
            if (distance_from_location <= radius_km * 1000) {
                if (distance_from_location <= 1000) {
                    formatJarak = distance_from_location.toFixed(2)+" Meter";
                }else {
                    formatJarak = (distance_from_location / 1000).toFixed(2)+" Kilometer";
                }
                var new_marker = new google.maps.Marker({
                    position: marker_lat_lng,
                    map: map,
                    title: location.name
                });       
                
                google.maps.event.addListener(new_marker, 'click', function () {
                    if(infowindow){
                        infowindow.setMap(null);
                        infowindow = null;
                    }
                    infowindow = new google.maps.InfoWindow({ 
                        content: ''+location.name +'' + " Dengan Jarak " + formatJarak + " Dari Lokasi Utama",
                        size: new google.maps.Size(150,50),
                        pixelOffset: new google.maps.Size(0, -30), 
                        position: marker_lat_lng, map: map
                    });
                });
            markerLokasiLain.push(new_marker);
            }
            })(lokasi[j]);
        }
    });
}

Fungsi getRadius ini akan aktif ketika ada perintah click pada elemen radio, sehingga value dari radio akan di proses dan menampilkan Circles berdasarkan value dari radio. Pada fungsi ini pertama kali adalah mendefinisikan dan mendeklarasikan setiap variabel yang akan digunakan. Selanjutnya mengecek lokasi awal berdasaran data latitude dan longitude posisi pengguna. Setelah data pengguna terdeteksi, Circles pada google maps akan di buat berdasarkan value pada radio. Dalam hal ini jarak yang digunakan adalah meter. Setelah Circles di bentuk, selanjutnya menghitung posisi marker lain dengan posisi pengguna menggunakan library geometry yaitu spherical.computeDistanceBetween. Dari hasil perhitungan inilah marker dapat ditentukan apakah dekat dengan pengguna atau tidak, atau marker berada di dalam lingkaran atau tidak.

Berikutnya pada bagian html, silahkan tambahkan kode html berikut sebelum tag output atau setelah tag map.


    
        
        1 Kilometer
    
    
        
        2 Kilometer
    
    
        
        4 Kilometer
    
    
        
        7 Kilometer

Seperti yang saya jelaskan sebelumnya kita menggunakan library geometry pada google maps, maka kita akan tambahkan pada source Google Map Api nya sehingga menjadi seperti kode dibawah.

<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=API_KEY_KAMU&callback=initMap&libraries=geometry"></script>

Silahkan kamu coba kode di atas, jika berhasil maka akan seperti gambar di bawah ini.

Gambar 2

Penutup

Sekian tutorial Cara Menampilkan Titik Terdekat Dari Lokasi Pengguna Pada Google Maps semoga dapat bermanfaat. Seperti biasa silahkan kamu kembangkan lagi, bisa menggunakan database atau menampilkan posisi terdekat secara realtime.

Cara Menampilkan Lokasi Pengguna Menggunakan Google Maps Geolocation

2018-06-30T14:47:00.000+07:00

Pembuka

Faktanya lokasi pengguna dapat diambil berdasarkan kekuatan sinyal yang dipakai, jarak device dengan tower provider, ip address atau GPS. Salah jika lokasi di tentukan dan terbaca karena pemindaian dari satelit yang ada diluar angkasa (hehe). Geolokasi sendiri ada pada perangkat yang mendukung HTML5, jika tidak support HTML5 ya sungguh disayangkan (tetap ada alternatif). Pada tutorial Cara Menampilkan Lokasi Pengguna Menggunakan Google Maps Geolocation ini, saya akan coba implementasikan penggunaan geolokasi di dalam Google Maps Api.

Gambar 1

Pembahasan

Kita akan membuat tutorial ini menyesuaikan pada tutorial sebelunya mengenai rute, namun pada file yang berbeda dengan assets yang sama. Buatlah file baru dengan nama goelocation.html, kemudian gunakan assets css dan javascript yang sama di file ini. Tepat setelah </body> kamu bisa tambahkan kode javascript berikut.

var map, infoWindow,geocoder,marker,accuracyStatus;
var output = document.getElementById("output");
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {lat: 0.3439242, lng:102.3072246}
    });
    
    infowindow = new google.maps.InfoWindow();

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
        if(position.coords.accuracy<100){
           accuracyStatus = "<strong style="color:green;"><span class="glyphicon glyphicon-ok"></span>Akurasi : "+position.coords.accuracy.toFixed(2)+" m (Bagus)</strong>";
        }
        else{
           accuracyStatus = "<strong style="color:red;"><span class="glyphicon glyphicon-warning-sign"></span>Akurasi : "+position.coords.accuracy.toFixed(2)+" m (Lemah)</strong>";
        }
        var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
        };
        geocoder = new google.maps.Geocoder();
        geocoder.geocode({'latLng': pos}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setZoom(15);
                map.setCenter(pos);
                marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    animation: google.maps.Animation.BOUNCE,
                });

                var infowindowText = "<div class='text-center'><strong>Posisi Saat Ini</strong><br />"+results[3].formatted_address+ " <br/> Lat : " + pos.lat.toFixed(5)+ " |  Long : " + pos.lng.toFixed(5)+ "<br/>" + accuracyStatus+"<br/>"+ '</strong></div>';
                infowindow.setContent(infowindowText);
                infowindow.open(map, marker);
                marker.addListener('click',function() {
                   infowindow.open(map,marker);
                });
                output.innerHTML = results[0].formatted_address+"<br>Latitude : <span id='latitude'>"+pos.lat+"</span><br>Longitude : <span id='longitude'>"+pos.lng+"</span>";
            }
        });
        }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
        });
    } else {
      handleLocationError(false, infoWindow, map.getCenter());
    }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                          '<span class="alert alert-danger">Error: The Geolocation service failed.</span>' :
                          '<span class="alert alert-danger">Error: Your browser doesn't support geolocation.</span>');
    infoWindow.open(map);
}

Kode navigator.geolocation ini yang untuk mendeteksi geolokasi pada browser, sedangkan getCurrentPosition digunakan untuk mengambil posisi pengguna. Sedangkan untuk mendapatkan detail dari lokasi kita bisa menggunakan Geocoder pada Google Maps API.

Selanjutnya di dalam <body>disini</body> silahkan tambahkan tag html berikut.

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card bg-dark">
              <div class="card-header text-white text-center"><h4>Mengambil Posisi User Menggunakan Google Maps Api Geolocation</h4></div>
              <div class="card-body">
                <div id="map"></div>
                <br>
                <p class="card-text text-white" id="output"></p>
              </div>
            </div>
            
        </div>
    </div>
</div>

Untuk css tambahan saja , silahkan tambakan sebelum </head>

<style>
    html { position: relative; height: 100%; }
    body { margin-top: 10px; } #map { margin-top: 0px; width: 100%; height: 400px;border-radius: 10px}
</style>

Jika berhasil maka akan ditunjukan seperti gambar di bawah, pastikan juga browser anda mengizinkan untuk mengakses lokasi.

Gambar 2

Penutup

Sekian tutorial Cara Menampilkan Lokasi Pengguna Menggunakan Google Maps Geolocation, semoga tutorial ini dapat bermanfaat. Saya sangat menyarankan untuk mengembangkan kode program di atas, karena kode program di atas hanya konsep dasar dari penggunaan fungsi geolocation. Apabila masih ada kendala silahkan berdiskusi melalui kolom komentar.

Cara Memasukan Data Gambar Ke Dalam Database Pada JavaFx

2018-06-26T17:35:00.002+07:00

Pembuka

Tutorial kali ini membahas bagaimana Cara Memasukan Data Gambar Ke Dalam Database Pada JavaFx. Memasukan data dalam hal ini bukan menyimpan data gambar kedalam database, tetapau menyimpan gambar hanya nama dari file gambarnya saja. Jika kita menyimpan file gambar dalam tipe data Blob maka ini sangat tidak efisien untuk size database. Andaikan saja yang di upload adalah gambar dengan size 1 MB, untuk 10 data saja sudah 10 MB. Ditutorial ini saya akan menggunakan beberapa komponen seperti ImageView dan FileChooser.

Pembahasan

Sebelum masuk ke inti pembahasan, saya ingatkan kembali tutorial ini melanjutkan tutorial sebelumnya, jika tidak mengerti maka kamu harus memulai dari awal dan memahami setiap perintah kode program yang diberikan.

Gambar 1

Pada tutorial sebelumnya kita sudah membuat interface, ada tiga komponen yang belum kita jelaskan. Namun tutorial ini hanya akan menggunakan dua komponen saja yaitu ImageView dan Button, sedangkan TableView akan dijelaskan pada tutorial selanjutnya. Komponen ImageView dapat kamu dapatkan di bagian control, perhatikan gambar dibawah jika sudah di masukan kedalam container.

Gambar 2

Tidak akan terlihat seperti komponen lainnya, untuk ukurannya kamu dapat menyesuaikan saja dengan ukuran interface yang kamu buat. Pada tab Code kamu beri id ImageView-nya dengan nama lihatGambar. Kemudian pada Button kamu beri id juga dengan nama pilihGambar dan actionnya adalah On Mouse Clicked dengan nama pilihGambarClicked.

Simpan dan kemudian generate kode menggunakan Make Controller, pada controller deklarasikan beberapa kelas berikut tepat sebelum method initialize().

private FileChooser fileChooser;
private File file;
private String gambar;
private Path copy,files;

Jika ada yang error, tinggal gunakan Fix Import saja (CTRL+SHIFT+I). Selanjutnya beralih ke pegawaiModel dan tambahkan atribut foto, jika belum paham kamu dapat membuka tutorial Cara Memasukan Data TextArea Ke Dalam Database pada JavaFx.

Kembali ke package Controller yaitu pada class pegawaiController, di dalam method initialize() tambahkan kode untuk menjalankan fungsi FileChooser. Sehingga kode method initialize seperti berikut.

public void initialize(URL url, ResourceBundle rb) {
    divisi.setItems(divisiList);
    agama.setItems(agamaList);
    implement = new pegawaiDao();
    fileChooser = new FileChooser();
    fileChooser.getExtensionFilters().addAll(
        new FileChooser.ExtensionFilter("Image Files", "*.png","*.jpg","*jpeg","*.bmp")
    );
}

Kode diatas adalah untuk melakukan filter tipe file yang bisa di pilih, sebagai contoh adalah tipe file untuk gambar. Cari action pilihGambarClicked(), kemudian ubah dan tambah kode berikut di dalamnya.

@FXML
private void pilihGambarClicked(MouseEvent event) {
    file =  fileChooser.showOpenDialog(null);
    if(file != null){
        try {
            BufferedImage bufferedImage = ImageIO.read(file);
            Image image = SwingFXUtils.toFXImage(bufferedImage, null);
            lihatGambar.setFitWidth(180);
            lihatGambar.setFitHeight(110);
            lihatGambar.setPreserveRatio(true);
            lihatGambar.setImage(image);
            gambar = file.getName();
            files = Paths.get(file.toURI());
        } catch (IOException ex) {
            Logger.getLogger(panePegawaiController.class.getName()).log(Level.SEVERE, null, ex);
        }
    }
}

Pada kode inilah untuk menjalankan fungsi FileChooser, dan kemudian seluruh data gamabr yang ditemukan akan disimpan pada variabel yang telah kita deklarasikan sebelumnya yaitu gambar dan files. Saat proses meyimpan dijalankan data dapat tersimpan, edit action btnSimpanClicked() dengan kode berikut.

@FXML
private void btnSimpanClicked(MouseEvent event) {
    pegawaiModel pegawai = new pegawaiModel();
    pegawai.setNamaLengkap(namaLengkap.getText());
    pegawai.setDivisi(divisi.getValue());
    pegawai.setJenisKelamin(jk);
    pegawai.setAgama(agama.getValue());
    pegawai.setTempatLahir(tempatLahir.getText());
    pegawai.setTanggalLahir(tanggalLahir.getValue().toString());
    pegawai.setAlamat(alamat.getText());
    pegawai.setFoto(gambar);
    implement.createPegawai(pegawai);

    if (gambar != null) {
        try {
            File dir = new File(System.getProperty("user.dir"));
            copy = Paths.get(dir+"/src/images/"+gambar);
            CopyOption[] options = new CopyOption[]{
                    StandardCopyOption.REPLACE_EXISTING,
                    StandardCopyOption.COPY_ATTRIBUTES
            };
            Files.copy(files, copy,options);
        } catch (IOException ex) {
            Logger.getLogger(panePegawaiController.class.getName()).log(Level.SEVERE, null, ex);
        }
    }
}

Tambahkan folder atau package baru ke dalam project kita dengan nama images, caranya dengan klik kanan Source Package, pilih New dan pilih Folder. Di dalam folder ini lah data gambar akan ter-copy sehingga dapat di panggil (digunakan kembali) nantinya dengan mudah.

Terakhir yang kita lakukan adalah menambah kolom foto ke dalam database dan mengedit query insert pada class pegawaiDao. Berikut adalah query SQL untuk menambah kolom (field) pada tabel tbl_pegawai di dalam database.

ALTER TABLE `tbl_pegawai` ADD `foto` VARCHAR(255) NOT NULL AFTER `alamat`

Pada class pegawaiDao, ubah query menjadi seperti berikut,

String query = "INSERT INTO `tbl_pegawai`(`nama_lengkap`, `divisi`, `jenis_kelamin`, `agama`, `tempat_lahir`, `tanggal_lahir`,`alamat`,`foto`) VALUES (?,?,?,?,?,?,?,?)";

dan set data yang akan disimpan ke dalam database.

pst.setString(8, pegawai.getFoto());

Coba untuk mejalankan program, jika berhasil maka akan seperti gambar di bawah ini.

Gambar 3

Penutup

Sekian tutorial bagaimana Cara Memasukan Data Gambar Ke Dalam Database Pada JavaFx, untuk lebih baiknya lagi kamu dapat mengkostum kode diatas. Jika ada kendala silahkan memulai diskusi melalui kolom komentar.

Cara Menampilkan Rute Alternatif Di Google Maps

2018-06-25T13:20:00.001+07:00

Pembuka

Pada tutorial Cara Menampilkan Rute Alternatif Di Google Maps Api adalah untuk memberikan rute alternatif yang di pilih ketika kita menentukan posisi awal dengan posisi tujuan. Seperti pada tutorial sebelumnya, kita tetap menggunakan kode program pada tutorial Cara Menampilkan Deskripsi Arah Pada Rute dengan Google Maps.

Gambar 1

Pembahasan

Bukalah file pada tutorial sebelumnya, kemudian didalam fungsi initMap() kita akan menambah beberapa fungsi diantaranya adalah fungsi untuk menampilkan item pada panel berdasarkan rute yang di pilih atau pun sebaliknya, dan fungsi untuk menghapus rute sebelumnya. Dibagian awal tambahkan variabel baru dengan nama polyOptions, variabel ini akan menyimpan data polyline. Bisa diletakan sebelum variabel directionsService.

var polyOptions = [];

Kemudian tambahkan 3 fungsi berikut setelah fungsi calculateAndDisplayRoute(), kamu bisa liat dimana bagian akhir fungsi tersebut melalui tanda kurung kurawal.

function removeLine(options,directionsDisplay) {
  for(var i = 0; i < options.length; i++){
    options[i].setMap(null);
    options[i].setVisible(false);
  }
  directionsDisplay.setMap(null);
}

function clickPanel(polyline,directionsDisplay){
  console.log(directionsDisplay.getRouteIndex());
  google.maps.event.addListener(directionsDisplay,'routeindex_changed',function(){
    for (var i = 0; i < polyline.length; i++) {
      polyline[i].setOptions({
        strokeOpacity: 1.0,
        strokeColor: "#16a085",
        zIndex: 0
      });
    }
    if (this.getRouteIndex() < polyline.length) {
      polyline[this.getRouteIndex()].setOptions({
        strokeOpacity: 1.0,
        strokeColor: "#c0392b",
        zIndex: 1
      });
    }
      
  });        
}

function clickLine(polyline,directionsDisplay,index){
 google.maps.event.addListener(polyline[polyline.length - 1], 'click', function(evt) {
   for (var i = 0; i < polyline.length; i++) {
        polyline[i].setOptions({
          strokeOpacity: 1.0,
          strokeColor: "#16a085",
          zIndex: 0
        });
      }
      this.setOptions({
        strokeOpacity: 1.0,
        strokeColor: "#c0392b",
        zIndex: 1
      });
  directionsDisplay.setRouteIndex(index);  
  });
}

Selanjutnya panggil fungsi removeLine di dalam onChangeHandler dan tambahkan parameter polyOptions di fungsi calculateAndDisplayRoute, sehingga kode onChangeHandler akan berubah seperti kode berikut.

var onChangeHandler = function() {
    removeLine(polyOptions,directionsDisplay);
    polyOptions = [];
    calculateAndDisplayRoute(directionsDisplay, directionsService,map,polyOptions);
};

Di fungsi calculateAndDisplayRoute() juga ditambahakan parameternya, agar data dapat digunakan di dalam fungsi, yang mana sebelum fiubah adalah seperti kode berikut.

function calculateAndDisplayRoute(directionsService, directionsDisplay)

dan setelah di tambahkan polyOptions akan menjadi seperti berikut.

function calculateAndDisplayRoute(directionsDisplay, directionsService,map,polyOptions) {
......
}

Berikut adalah kode javascript yang ada didalam fungsi calculateAndDisplayRoute() yang akan menampilkan rute.

function calculateAndDisplayRoute(directionsDisplay, directionsService, map,polyOptions) {
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('finish').value,
    travelMode: 'DRIVING',
    optimizeWaypoints: false,
    provideRouteAlternatives: true,
  }, function(response, status) {
    if (status === 'OK') {
        var pathPoints ;
        var routeLeg;
        for (var i = 0, len = response.routes.length; i < len; i++) {
          routeLeg = response.routes[i].legs[0];
          pathPoints = response.routes[i].overview_path;
          var polyPath = new google.maps.Polyline({
            path: pathPoints,
            strokeColor: "#16a085",
            strokeOpacity: 1.0,
            strokeWeight: 5,
            map: map,
            clickable:true,
          });
          polyOptions.push(polyPath);
          if (i == 0) polyOptions[0].setOptions({
            strokeColor: '#c0392b',
            strokeOpacity: 1.0,
            zIndex: 1
          });
          polyOptions[polyOptions.length - 1].setPath(pathPoints);
          directionsDisplay.setRouteIndex(i);
          directionsDisplay.setDirections(response);
          directionsDisplay.setOptions({ 
            polylineOptions: polyOptions,
            suppressPolylines : true,
          });
          directionsDisplay.setPanel(document.getElementById('panel'));
          directionsDisplay.setMap(map);
          clickLine(polyOptions,directionsDisplay,i);
      }
      clickPanel(polyOptions,directionsDisplay); 
      $("#error").empty();
      $("#error").removeClass();
    } else {
      directionsDisplay.setMap(null);
      directionsDisplay.setPanel(null);
      $("#error").addClass("badge badge-danger");
      $("#error").text("Tidak dapat menemukan nama lokasi, status error: "+status);
    }
  });
}

Dapat diperhatikan kode diatas mengambil seluruh data yang diberikan (response) ketika rute di load dari Google Maps Api. Kemudian seluruh data tersebut kita set kembali di dalam fungsi setOption, dan di simpan didalam directionDisplay untuk kemudian diload dan ditampilkan kedalam peta. Jika sudah berhasil maka seharusnya akan menampilkan rute seperti gambar berikut.

Gambar 2

Penutup

Sekian tutorila mengenai Cara Menampilkan Rute Alternatif Di Google Maps Api, masih banyak kekurangan tentunya dalam pembuatan tutorial tersebut. Adapun tutorial ini tidak begitu sempurna sehingga kamu dapat mengedit dan mengkostum fitur yang akan di gunakan. Untuk kesalahan ataupun koreksi silahkan menggunakan kolom komentar.

Cara Memasukan Data TextArea Ke Dalam Database pada JavaFx

2018-06-20T13:29:00.003+07:00

Pembuka

Textarea adalah komponen yang efisien dalam menampung inputan text yang cukup banyak, di javafx textarea dengan textfield tidaklah jauh berbeda. Berikut Cara Memasukan Data TextArea Ke Dalam Database pada JavaFx.

Pembahasan

Pada tutorial sebelumnya mengenai Cara Memasukan Data DatePicker Ke Dalam Database Pada JavaFx kita sudah ada tampilan TextArea, namun jika belum ada maka silahkan tambahkan komponen TextArea kedalam kontainer, sekiranya seperti gambar berikut.

Gambar 1

Selanjutnya beri id pada komponen textarea dengan nama id adalah alamat, lakukan preview terlebih dahulu dan inputkan contoh text yang panjang kedalam textarea. Secara default text area akan menangkap seluruh text dalam satu baris, maka itu tidak lah efisien jika inputan memamng harus bayak. Pada menu properties, centanglah bagian Wrap Text agar secara otomatis text yang panjang dilanjutkan pada baris ke dua atau seterusnya. Lihat gambar dibawah.

Gambar 2

Jika memang untuk text yang cukup panjang, secara otomatis akan menampilkan vertical scroll. Selanjutya generate lah controller dengan menggunakan Make Controller pada file panePegawai.fxml.

Pada pegawai model buatlah variabel string dengan nama alamat, kemudian buatlah method setter dan getter. Agar mempermudah pengerjaan kamu bisa menggunakan shortcut ALT+INSERT, dan memilih Getter and Setter pada menu popup. Kemudian centang pada bagian veriabel yang akan dibuat method getter dan setter nya, klik Generate untuk menggenarate method.

Gambar 3

Maka pada kode program akan secara otomatis tergenerate, silahkan cek biasanya akan tampil pada baris paling atas.

Pada method pegawaiModel berparameter, tambahkan variabel alamat seperti kode program dibawah.

public pegawaiModel(String namaLengkap, String divisi, String jenisKelamin, String agama, String tempatLahir, String tanggalLahir,String alamat) {
    this.namaLengkap = namaLengkap;
    this.divisi = divisi;
    this.jenisKelamin = jenisKelamin;
    this.agama = agama;
    this.tempatLahir = tempatLahir;
    this.tanggalLahir = tanggalLahir;
    this.alamat = alamat;
}

Selanjutnya buka package dao dan update kode pegawaiDao.java. Ubah query sql menjadi seperti berikut.

String query = "INSERT INTO `tbl_pegawai`(`nama_lengkap`, `divisi`, `jenis_kelamin`, `agama`, `tempat_lahir`, `tanggal_lahir`,`alamat`) VALUES (?,?,?,?,?,?,?)";

Set data alamat yang akan disimpan setelah nomor index ke 6 seperti kode berikut.
```
pst.setString(7, pegawai.getAlamat());
```

Pada panePegawaiController, tepatnya method btnSimpanClicked tambahkan kode untuk mengeset data pada model sehingga seperti kode berikut.

@FXML
private void btnSimpanClicked(MouseEvent event) {
    pegawaiModel pegawai = new pegawaiModel();
    pegawai.setNamaLengkap(namaLengkap.getText());
    pegawai.setDivisi(divisi.getValue());
    pegawai.setJenisKelamin(jk);
    pegawai.setAgama(agama.getValue());
    pegawai.setTempatLahir(tempatLahir.getText());
    pegawai.setTanggalLahir(tanggalLahir.getValue().toString());
    pegawai.setAlamat(alamat.getText());
    implement.createPegawai(pegawai);
}

Terakhir, tambahkan kolom alamat pada tbl_pegawai di database, kamu bisa menggunakan kode berikut.
```
ALTER TABLE `tbl_pegawai` ADD `alamat` VARCHAR(100) NOT NULL AFTER `tanggal_lahir`;
```

Coba jalankan program, dan lakukan insert data. Jika berhasil maka akan tampil seperti gambar dibawah ini.

Gambar 4

Penutup

Sekian tutorial Cara Memasukan Data TextArea Ke Dalam Database pada JavaFx, jika ada permasalahan pada kode program silahkan berdiskusi pada kolom komentar.

Cara Memasukan Data DatePicker Ke Dalam Database Pada JavaFx

2018-06-18T11:35:00.001+07:00

Pembuka

Tutorial Cara Memasukan Data DatePicker Ke Dalam Database Pada JavaFx kali ini akan di buat pada menu Pegawai. Saya meyakini secara mendasar kamu sudah mengusai beberapa komponen yang telah dijelaskan pada tutorial sebelumnya. Tutorial ini akan menggunakan konsep yang sedikit berbeda dari konsep tutorial sebelumnya.

Pembahasan

Pada file panePegawai.fxml, tambahkan komponen Label, TextField, RadioButton, ComboBox, dan Datepicker, dan TextArea. Perhatikan gambar dibawah., untuk komponen lain saya akan jelaskan pada tutorial berikutnya.

Gambar 2

Selanjutnya masing-masing komponen beri id, untuk komponen Label sendiri id hanya sebagai opsi saja, anda tidak harus memberi ID. Sebagai contoh id yang saya berikan seperti berikut:

Komponen	Text	fx:id	Action
TextField	-	namaLengkap	-
ComboBox	-	divisi	-
RadioButton	Laki-laki dan Perempuan	radioLk dan radioPr	radioLkAction dan radioPrAction
ComboBox	-	agama	-
TextField	-	tempatLahir	-
DatePicker	-	tanggalLahir	-
Button	Simpan	btnSimpan	btnSimpanClicked
Button	Reset	btnReset	btnResetClicked

Jika ada yang bertanya text yang terlihat seperti placeholder di html, kamu dapat tambahkan pada bagian propertis komponen yaitu "Prompt Text". Selanjutnya pada file panePegawai.fxml,buka dalam format koding, tambahkan atribute fx:controller didalam komponen ScrollPane. Sehingga seperti kode program dibawah ini.

<scrollpane fx:controller="controller.panePegawaiController" prefheight="547.0" prefwidth="638.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.171"></scrollpane>

Setelah selesai silahkan generate controller dengan cara menggunakan Make Controller. Coba untuk menjalankan aplikasi, dan pastikan tidak ada error ketika aplikasi dijalankan. Setelah sukses, tentu pada komponen ComboBox masih belum terisi dengan daftar berdasarkan fungsinya, kita akan buat berdasarkan masing-masing fungsi. Tambahkan kode berikut tepat dibawah masing-masing pendeklarasian variabel komponen seperti kode berikut.

private ComboBox<String> divisi;
ObservableList<String> divisiList = FXCollections.observableArrayList("Divisi 1","Divisi 2","Divisi 3","Divisi 4");
@FXML
private ComboBox<String> agama;
ObservableList<String> agamaList = FXCollections.observableArrayList("Islam","Kristen","Protestan","Hindu","Budha","Lainnya");

Masing-masing list di inisialisasi berdasarkan data yang akan ditampilkan, jangan lupa untuk mengubah tanda tanya menjadi String. Agar terbaca saat pertama kali dijalankan, maka tambahkan kode berikut di dalam method initialize.

public void initialize(URL url, ResourceBundle rb) {
    divisi.setItems(divisiList);
    agama.setItems(agamaList);
}

Kita akan menambah tabel pada database, tabel diberi nama dengan tbl_pegawai dengan kolom id, nama_lengkap, divisi, jenis_kelamin, agama, tempat_lahir dan tanggal_lahir. Silahkan gunakan query SQL berikut untuk membantu pembuatan tabel.

CREATE TABLE `tbl_pegawai` (
  `id` int(11) NOT NULL,
  `nama_lengkap` varchar(100) NOT NULL,
  `divisi` varchar(12) NOT NULL,
  `jenis_kelamin` varchar(12) NOT NULL,
  `agama` varchar(10) NOT NULL,
  `tempat_lahir` varchar(50) NOT NULL,
  `tanggal_lahir` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `tbl_pegawai`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `tbl_pegawai`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

Pada tahap ini lah akan ada sedikit perbedaan dalam model pengkodingan, kita akan coba menerapkan konsep MVC pada JavaFx (red). Buatlah package baru, beri nama dao dan models silahkan lihat gambar dibawah.

Gambar 2

Package dao nantinya berisikan class untuk melakukan proses query sql seperti CRUD, sedangkan models berisi class enkapsulasi yang ditujukan untuk kolom tiap data di database. Selain itu models dapat kita gunakan untuk menyimpan validasi input yang nantinya akan ada juga didalam tutorial selanjutnya.
Pertama buatlah class pegawaiModel di dalam package models, kemudian isi dengan kode program berikut.

package models;
/**
 * www.java-sc.com
 * @author javasc
 */
public class pegawaiModel {
    private String namaLengkap;
    private String divisi;
    private String jenisKelamin;
    private String agama;
    private String tempatLahir;
    private String tanggalLahir;

    public pegawaiModel(String namaLengkap, String divisi, String jenisKelamin, String agama, String tempatLahir, String tanggalLahir) {
        this.namaLengkap = namaLengkap;
        this.divisi = divisi;
        this.jenisKelamin = jenisKelamin;
        this.agama = agama;
        this.tempatLahir = tempatLahir;
        this.tanggalLahir = tanggalLahir;
    }   

    public pegawaiModel() {
        
    }

    public void setNamaLengkap(String namaLengkap) {
        this.namaLengkap = namaLengkap;
    }

    public void setDivisi(String divisi) {
        this.divisi = divisi;
    }

    public void setJenisKelamin(String jenisKelamin) {
        this.jenisKelamin = jenisKelamin;
    }

    public void setAgama(String agama) {
        this.agama = agama;
    }

    public void setTempatLahir(String tempatLahir) {
        this.tempatLahir = tempatLahir;
    }

    public void setTanggalLahir(String tanggalLahir) {
        this.tanggalLahir = tanggalLahir;
    }

    public String getNamaLengkap() {
        return namaLengkap;
    }

    public String getDivisi() {
        return divisi;
    }

    public String getJenisKelamin() {
        return jenisKelamin;
    }

    public String getAgama() {
        return agama;
    }

    public String getTanggalLahir() {
        return tanggalLahir;
    }

    public String getTempatLahir() {
        return tempatLahir;
    }
}

Kemudian tambahkan class interface pada package dao dengan nama implementsDao, caranya dengan klik kanan pada package dao, pilih new, pilih Java Interface. Isi dengan kode program berikut di dalam interface.

public interface implementsDao {
    public void createPegawai(pegawaiModel pegawai);
}

Buat class baru lagi di dalam package dao, namun berupa java class saja dengan nama pegawaiDao. Isi class dengan kode program seperti berikut.

public class pegawaiDao implements implementsDao{
    private PreparedStatement pst;
    private ResultSet rs;
    private final Connection conn = koneksi.koneksi();
    
    @Override
    public void createPegawai(pegawaiModel pegawai) {
        Alert alert = new Alert(Alert.AlertType.CONFIRMATION);
        alert.setTitle("Apakah anda akan menyimpan data");
        alert.setHeaderText(null);
        alert.setContentText("Tekan OK untuk menyimpan data, Cencel untuk batal.");
        Optional result = alert.showAndWait();
        if (result.get() == ButtonType.OK){
            try {
                String query = "INSERT INTO `tbl_pegawai`(`nama_lengkap`, `divisi`, `jenis_kelamin`, `agama`, `tempat_lahir`, `tanggal_lahir`) VALUES (?,?,?,?,?,?)";
                pst = conn.prepareStatement(query);
                pst.setString(1, pegawai.getNamaLengkap());
                pst.setString(2, pegawai.getDivisi());
                pst.setString(3, pegawai.getJenisKelamin());
                pst.setString(4, pegawai.getAgama());
                pst.setString(5, pegawai.getTempatLahir());
                pst.setString(6, pegawai.getTanggalLahir());
                pst.execute();
                Alert berhasil = new Alert(Alert.AlertType.INFORMATION);
                berhasil.setTitle("Informasi Transaksi");
                berhasil.setHeaderText(null);
                berhasil.setContentText("Data "+pegawai.getNamaLengkap()+" Telah Berhasil Disimpan\n\nTerima Kasih.");   
                berhasil.showAndWait();
                pst.close();
            } catch (SQLException e) {
                Alert gagal = new Alert(Alert.AlertType.ERROR);
                gagal.setTitle("Informasi Database");
                gagal.setHeaderText(null);
                gagal.setContentText("Data "+pegawai.getNamaLengkap()+" Tidak Dapat Disimpan\n\nSilahkan Di Ulang.\n"
                        + "Error = "+e);
                gagal.showAndWait();
                Logger.getLogger(pegawaiDao.class.getName()).log(Level.SEVERE, null, e);
            }
        }
    }
}

Lalu kita akan beralih kedalam panePegawaiController untuk mengimplementasikan class-class yang sudah kita buat.

Deklarasikan class implementsDao setelah pendeklarasian variabel jk, atau tepatnya sebelum method initialize seperti kode berikut.
```
private String jk;
private implementsDao implement;
```

Di dalam method initialize kita inisisalisasi implement dengan class pegawaiDao, sehingga method initialize seperti kode dibawah

public void initialize(URL url, ResourceBundle rb) {
    divisi.setItems(divisiList);
    agama.setItems(agamaList);
    implement = new pegawaiDao();
}

Terakhir barulah kita buat kode program untuk menjalankan semua perintah ketika tombol Simpan ada action. Berikut kode program yang ada didalam method btnSimpanClicked.

@FXML
private void btnSimpanClicked(MouseEvent event) {
    pegawaiModel pegawai = new pegawaiModel();
    pegawai.setNamaLengkap(namaLengkap.getText());
    pegawai.setDivisi(divisi.getValue());
    pegawai.setJenisKelamin(jk);
    pegawai.setAgama(agama.getValue());
    pegawai.setTempatLahir(tempatLahir.getText());
    pegawai.setTanggalLahir(tanggalLahir.getValue().toString());
    implement.createPegawai(pegawai);
}

Sebenarnya tidak ada perbedaan dalam menginsert data dengan komponen lain, DatePicker menggunakan getValue untuk mengambil nilai dari datepickernya, kemudian di konvert ke dalam bentuk string karena dalam model kita mendeklarasikan variabel tanggalLahir dengan tipe data String. Untuk proses nya dapat dilihat pada class pegawaiDao, dengan menambah kolom tanggal_lahir pada line 15 dan menyimpan nilai pada line 22.

Jika ada yang error silahkan coba gunaka shorcut keyboard CTRL+SHIFT+I untuk Fix Import, dan coba jalankan program apakah sudah berhasil menyimpan, berhasil tidaknya adalah jika tidak ada error dan dapat dilihat pada gambar dibawah ini.

Gambar 3

Penutup

Sekian tutorial Cara Memasukan Data DatePicker Ke Dalam Database Pada JavaFx, untuk tutorial selanjutnya kita akan menggunakan struktur atau cara mengkode seperti pada tutorial ini. Untuk informasi lebih lanjut, kamu dapat mempelajari konsep OOP terlebih dahulu agar tidak terlalu pusing, karena saya tidak akan menjelaskan kembali mengenai OOP di java. Jika masih ada yang error atau ingin sharing ilmu silahkan berdiskusi di kolom komentar. Karena pembuatan tutorial ini tidak selalu sempurna dan butuh pengkoreksian jika salah.

Cara Memasukan Data CheckBox Ke Dalam Database Pada JavaFx

2018-06-17T23:04:00.002+07:00

Pembuka

Checkbox biasanya digunakan dalam pemilihan satu atau banyak opsi, dalam tutorial Cara Memasukan Data CheckBox Ke Dalam Database Pada JavaFx saya akan memberikan contoh bagaimana memasukan data Checkbox kedalam database.

Pembahasan

Buatlah beberapa Checkbox di dalam interface kita, sebagai contoh mengikuti tutorial sebelumnya. Saya akan contohkan membuat Checkbox dengan opsi untuk memilih hobi. Saya membuat beberapa opsi hobi seperti gambar berikut.

Gambar 1

Kemudian setiap Checkbox berikan id secara berurutan Menonton = hobi1, Membaca = hobi2, Berbelanja = hobi3, Bermain = hobi4 dan Lain-lain = hobi5. Kemudian generate controller menggunakan fitur Make Controller pada file paneUser.fxml. Sehingga dapat dilihat seperti kode program berikut.

@FXML
private CheckBox hobi1;
@FXML
private CheckBox hobi2;
@FXML
private CheckBox hobi3;
@FXML
private CheckBox hobi4;
@FXML
private CheckBox hobi5;

Tambahkan variabel yang digunakan untuk menyimpan data array/ list, sama halnya dengan RadioButton saya menggunakan ObservableList sebagai package untuk menyimpan fitur arraylist. Kode ini di letakan setelah baris private CheckBox hobi5; saja, seperti kode berikut.

ObservableList<String> hobi = FXCollections.observableArrayList();

Agar data pada setiap Checkbox terbaca dan masuk kedalam list, maka kita akan memberikan aksi pada setiap checkbox. Aksi ini diletakan di dalam method initialize(), setelah baris comboAgama. Berikut kode lengkapnya.

public void initialize(URL url, ResourceBundle rb) {
    comboAgama.setItems(list);

    hobi1.setOnAction(e->{
        if (hobi1.isSelected()) {
            hobi.add(hobi1.getText());
        }else {
            hobi.remove(hobi1.getText());
        }
    });
    hobi2.setOnAction(e->{
        if (hobi2.isSelected()) {
            hobi.add(hobi2.getText());
        }else {
            hobi.remove(hobi2.getText());
        }
    });
    hobi3.setOnAction(e->{
        if (hobi3.isSelected()) {
            hobi.add(hobi3.getText());
        }else {
            hobi.remove(hobi3.getText());
        }
    });
    hobi4.setOnAction(e->{
        if (hobi4.isSelected()) {
            hobi.add(hobi4.getText());
        }else {
            hobi.remove(hobi4.getText());
        }
    });
    hobi5.setOnAction(e->{
        if (hobi5.isSelected()) {
            hobi.add(hobi5.getText());                
        }else {
            hobi.remove(hobi5.getText());
        }
    });
}

Update kembali database yang kita gunakan dengan menambahkan kolom hobi, kamu dapat menggunakan query sql berikut.

ALTER TABLE `tbl_user` ADD `hobi` VARCHAR(100) NOT NULL AFTER `agama`;

Selanjutnya pada query java juga kita update menjadi sperti kode dibawah ini.

String query = "INSERT INTO `tbl_user`(`username`, `password`,`jenis_kelamin`,`agama`,`hobi`) VALUES (?,?,?,?,?)";

Kemudian tambahkan kode berikut sebelum pst.execute();, agar data dapat tersimpan ke dalam database.

pst.setString(5, hobi.toString());

Coba untuk di jalankan, apakah berhasil atau tidak, jika berhasil maka akan seperti gambar dibawah ini.

Gambar 2

Penutup

Sekian tutorial Cara Memasukan Data CheckBox Ke Dalam Database Pada JavaFx semoga bermanfaat. Kamu dapat mengkostum konten yang akan digunakan didalam checkbox, jika ada kendala silahkan berdiskusi di dalam kolom komentar.

Cara Memasukan Data ComboBox Ke Dalam Database Pada JavaFx

2018-06-17T21:18:00.000+07:00

Pembukaan

Combobox di dalam JavaFx tidak terlalu berbeda didalam java swing atau bahasa pemrograman lain. Yang berbeda adalah untuk mengisi list didalam combobox itu sendiri, dimana harus di inisialisasi didalam Class Controller dalam bentuk List.

Pembahasan

Pada projek atau tutorial mengenai RadioButton, tambahkan komponen control yaitu Label dan ComboBox setelah atau sebelum RadioButton. Lalu pada ComboBox beri id dengan nama fx:id adalah comboAgama. Dalam contoh ini saya akan buatkan input agama ke dalam database. Perhatikan gambar dibawah untuk lebih lengkapnya.

Gambar 1

Selanjutnya tambahkan kolom agama setelah kolom jenis kelamin, sebenarnya ini hanya opsi silahkan saja kamu dapat letakan dimana saja dengan syarat kolom agama masih berada pada tabel user (tabel untuk contoh). Kamu dapat menggunakan query berikut.

ALTER TABLE `tbl_user` ADD `agama` VARCHAR(10) NOT NULL AFTER `jenis_kelamin`;

Setelah diberkan id pada komponen ComboBox dan penambahan kolom pada database, maka kamu dapat mengupdate Controller User. Masih menggunakan cara yang sama yaitu dengan menggunakan Make Controller pada file paneUser.fxml.

@FXML
private ComboBox<?> comboAgama;

Ubahlah simbol tanda tanya (?) menjadi String, karena comboAgama akan di isi dengan nilai yang berupa String sehingga menjadi seperti berikut.

@FXML
private ComboBox<String> comboAgama;

Tambahkan sebuah list setelahnya, yang mana list ini menyimpan data array dari comboAgama, seperti kode berikut.

ObservableList<String> list = FXCollections.observableArrayList("Islam","Kristen","Protestan","Hindu","Budha","Lainnya");

ObservableList adalah class dari package collection di javafx, yang mana class ini dapat menyimpan data berupa array / list (obervableArrayList).

Agar ketika program dijalankan comboAgama secara otomatis terisi data agama, maka pada method initialize() tambahkan kode comboAgama.setItems(list), perhatikan kode program berikut:

public void initialize(URL url, ResourceBundle rb) {
   comboAgama.setItems(list);
}

Kemudian coba jalankan program dan lihat hasilnya, pastikan sudah menampilkan list agama. Selanjutnya adalah menyimpan data yang dipilih dari comboAgama ke dalam database. Pada variabel query insert yang sebelumnya

String query = "INSERT INTO `tbl_user`(`username`, `password`,`jenis_kelamin`) VALUES (?,?,?)";

ubah menjadi

String query = "INSERT INTO `tbl_user`(`username`, `password`,`jenis_kelamin`,`agama`) VALUES (?,?,?,?)";

Lalu set data yang akan di eksekusi sebelum kode pst.execute(); dengan kode berikut.

pst.setString(4, comboAgama.getValue());

Cek kembali dengan melakukan debug lalu run program, pastikan tidak ada error yang terjadi. Jika berhasil maka data akan tersimpan kedalam database seperti gambar berikut.

Gambar 2

Penutup

Seperti biasa, kamu dapat malakukan perubahan atau kostum data menyesuaikan dengan contoh. Saya kira tutorial mengenai Cara Memasukan Data ComboBox Ke Dalam Database Pada JavaFx sudah dapat membantu. Jika masih ada kendala atau error yang terjadi silahkan diskusi melalui komentar.

Cara Menampilkan Rute Peta Google Maps Dari Database

2018-06-16T23:02:00.000+07:00

Pembuka

Menampilkan Rute Peta Google Maps Dari Database

Pada tutorial ini, saya akan memberikan contoh bagaimana implementasi untuk menampilkan rute berdasarkan data yang ada di dalam database. Untuk contoh kamu bisa lihat tutorial sebelumnya mengenai Cara Membuat Aplikasi Google Maps Dengan PHP dan MySQL. Jika anda sudah costum dengan pencarian maka alangkah bagusnya lagi, berikut tutorial yang saya maksud adalah Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL.

~~Membuat Rute Sederhana dengan Google Maps.~~
~~Menampilkan Deskripsi Rute dengan Google Maps.~~
~~Menampilkan Informasi Rute Menggunakan Info Window di Google Maps.~~
~~Menampilkan Rute Peta Dari Database.~~
Menampilkan Rute Alternatif Di Google Maps.

Pembahasan

Tutorial ini anda perlu memahami kode program sebelumnya, seperti yang saya terangkan pada pembuka. Pastikan anda sudah memahami bagian atau setiap baris pada kode program tersebut, sehingga anda akan mudah untuk mengikuti tutorial ini. Disini saya tidak memberikan seluruh kode program lagi karena saya rasa tutorial sebelumnya sudah sekedar dari cukup.

Kita akan mulai dari file conf.php, kemudian tambahkan query untuk mengambil data pada tabel.
```
public function combo($tabel) {
   $combo = $this->db->prepare("SELECT * FROM $tabel");
   $combo->execute();
   return $combo;
}
```
Kamu dapat menambahkan fungsi tersebut setelah fungsi terakhir pada baris program, sebagai contoh fungsi terakhir pada file conf.php saya adalah tampilDataPencarianLokasi(), maka saya dapat letakan dibawah fungsi tersebut..
Selanjutnya beralih ke file home.php, di file inilah kita akan menambah kode javascript untuk pembuatan rute. Jika kamu membuka tutorial Cara Mebuat Pencarian Lokasi, kamu akan temukan juga pengubahan script pada file tersebut. Kamu lihat pada Line ke 9 yaitu variabel markerBaru. Tambahkan tiga variabel berikut setelah atau sebelum variabel markerBaru.
```
var markerArray = [];
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
```

Cari variabel infoWindow, seperti kode berikut:

var infoWindow = new google.maps.InfoWindow;

Kemudian tambahkan kode berikut di bawah (setelah) variabel infoWindow. Kita tahu script ini adalah script untuk menampilkan rute, seperti pada tutorial sebelumnya mengenai pembuatan Rute.

directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, infoWindow, map);
var onChangeHandler = function() {
   calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, infoWindow, map);
};

document.getElementById('start').addEventListener('change', onChangeHandler);      
document.getElementById('finish').addEventListener('change', onChangeHandler);

Selanjutnya adalah menambah tiga fungsi yaitu calculateAndDisplayRoute(), showSteps(), dan attachInstructionText(). Tiga fungsi ini bisa di letakan setelah fungsi downloadUrl(), berikut adalah fungsi yang di maksud.

function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map) {
  for (var i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('finish').value,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
      showSteps(response, markerArray, stepDisplay, map);
      $("#error").empty();
      $("#error").removeClass();
    } else {
     $("#error").addClass("badge badge-danger");
      $("#error").text("Tidak dapat menemukan nama lokasi, status error: "+status);
    }
  });
}

function showSteps(directionResult, markerArray, stepDisplay, map) {
  var myRoute = directionResult.routes[0].legs[0];
  for (var i = 0; i < myRoute.steps.length; i++) {
    var marker = markerArray[i] = markerArray[i] || new google.maps.Marker;
    marker.setMap(map);
    marker.setPosition(myRoute.steps[i].start_location);
    attachInstructionText(
        stepDisplay, marker, myRoute.steps[i].instructions, map);
  }
}

function attachInstructionText(stepDisplay, marker, text, map) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

Tahap terakhir adalah menambah combobox dan panel, dimana combobox akan menampilkan daftar lokasi dan panelmenampilkan informasi rute. Berikut adalah kode html nya, dengan disisipi kode php untuk menampilkan data didalam combobox. Kamu dapat melakukan replace kode html pada line 190 di tutorial Cara Membuat Pencarian.

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-success">
      <div class="panel-heading">
        <center><h4>LOKASI PELAYANAN UMUM DI KOTA PEKANBARU</h4></center>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-3">
            <input type="text" class="form-control" name="cari_lokasi" id="cari_lokasi" placeholder="Cari Lokasi Disini"/>
          </div>
          <div class="col-md-2">
            <button class="btn btn-primary" id="cariLokasi">Cari Lokasi</button>
          </div>
          <div class="col-md-7">
            <a href="index.php?page=kelola" class="btn btn-warning">Halaman Kelola</a>&nbsp
            <a href="" class="btn btn-danger">Refresh Maps</a>
          </div>
        </div>
        <div class="row">
          <p>
            <div class="col-md-6">
              <select class="form-control" id="start">
                <option>Awal</option>
                <?php
                $awal = $konfigurasi->combo('tabel_data');
                foreach ($awal as $key => $value) {
                echo "<option value=".$value['latitude'].','.$value['longitude'].">".$value['keterangan']."</option>";
                }
                ?>
              </select>
            </div>
            <div class="col-md-6">
              <select class="form-control" id="finish">
                <option>Tujuan</option>
                <?php
                $tujuan = $konfigurasi->combo('tabel_data');
                foreach ($tujuan as $key => $value) {
                echo "<option value=".$value['latitude'].','.$value['longitude'].">".$value['keterangan']."</option>";
                }
                ?>
              </select>
            </div>
            <span id="error"></span>
          </p>
        </div>
        </br>
        <div class="col-md-8">
          <div id="map" class="card" style="width:100%;height:450px"></div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div id="panel" class="card-block" style="overflow-y: scroll;height: 400px;">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Perhatikan pada baris 26-29 dan 37-40, baris berikut adalah kode php untuk menapilkan data pada combobox.

Penutup

Seperti biasa, tutorial ini hanya sebagai contoh, silahkan di kostum sendiri dan dikembangkan. Apabila hasil kostum anda bermanfaat bagi anda semoga anda dapat share melalui kolom komentar agar menjadi ilmu yang bermanfaat dan di gunakan oleh bersama. Adapun beberapa saran dari saya adalah mengubah template dari aplikasi agar lebih interaktif, kemudian saat dilakukannya pemilihan combobox dari kota Awal maka di kota Tujuan data kota Awal tidak lagi di tampilkan. Terakhir yang meurut saya sangat baik adalah ketika dilakukannya pencarian rute maka yang tampil adalah kedua marker kota Awal dan Tujuannya saja.

Cara Menampilkan Informasi Rute Menggunakan Info Window di Google Maps

2018-06-16T20:23:00.001+07:00

Pembuka

Setelah sebelumnya berhasil menampilkan informasi rute di dalam elemen div (panel), selanjutnya kita akan membuat marker yang mana setiap marker memiliki informasi rute yang dituju di dalam infowindow. Sebelum itu adapaun tutorial ini adalah tutorial ke-3 dari 5 tutorial yang akan diberikan.

~~Membuat Rute Sederhana dengan Google Maps.~~
~~Menampilkan Deskripsi Rute dengan Google Maps.~~
~~Menampilkan Informasi Rute Menggunakan Info Window di Google Maps.~~
Menampilkan Rute Peta Dari Database.
Menampilkan Rute Alternatif Di Google Maps.

Pembahasan

Gambar

Seperti biasa, buatlah file htm baru yang akan kita isi kode dalam membuat peta. Tidak disarankan untuk menggabung dengan file yang lama apabila anda belum memahami instruksi setiap baris kode program. Kita buat saja dengan nama direction_3.html, lalu ketikan kode program berikut ini.

<!DOCTYPE html>
<html>
    <head>
        <meta content="initial-scale=1.0, user-scalable=no" name="viewport">
            <meta charset="utf-8">
                <title>
                    Java Source Code
                </title>
                <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet">
                    <script crossorigin="anonymous" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
                    </script>
                    
                    <style>
                        html { position: relative; height: 100%; }
                        body { margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; height: 60px; line-height: 60px; background-color: #f5f5f5; } body > .container { padding: 60px 15px 10px; } .footer > .container { padding-right: 15px; padding-left: 15px; } code { font-size: 80%; } #map { margin-top: 0px; width: 100%; height: 400px; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #right-panel {height: 100%;float: right;width: 390px;overflow: auto;}
                    </style>
                </link>
            </meta>
        </meta>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                <a class="navbar-brand" href="">
                    Cara Membuat Rute Sederhana Dengan Google Maps
                </a>
                <button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarCollapse" data-toggle="collapse" type="button">
                    <span class="navbar-toggler-icon">
                    </span>
                </button>
            </nav>
        </header>
        <main class="container">
            <div class="row">
                <div class="col-md-12">
                    <br>
                        <div class="row">
                            <label class="col-sm-2 col-form-label">
                                Awal
                            </label>
                            <div class="col">
                                <select class="form-control" id="start">
                                    <option value="Pekanbaru">
                                        Pekanbaru
                                    </option>
                                    <option value="Duri Talang Mandi">
                                        Duri
                                    </option>
                                    <option value="Dumai">
                                        Dumai
                                    </option>
                                    <option value="Lirik Indragiri Hulu">
                                        Lirik
                                    </option>
                                    <option value="Pasir Pengaraian">
                                        Pasir Pengaraian
                                    </option>
                                    <option value="Pulau Bengkalis">
                                        Pulau Bengkalis
                                    </option>
                                </select>
                            </div>
                            <label class="col-sm-2 col-form-label">
                                Tujuan
                            </label>
                            <div class="col">
                                <select class="form-control" id="finish">
                                    <option value="Pekanbaru">
                                        Pekanbaru
                                    </option>
                                    <option value="Duri Talang Mandi">
                                        Duri
                                    </option>
                                    <option value="Dumai">
                                        Dumai
                                    </option>
                                    <option value="Lirik Indragiri Hulu">
                                        Lirik
                                    </option>
                                    <option value="Pasir Pengaraian">
                                        Pasir Pegaraian
                                    </option>
                                    <option value="Pulau Bengkalis">
                                        Pulau Bengkalis
                                    </option>
                                </select>
                            </div>
                        </div>
                        <span id="error">
                        </span>
                    </br>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div id="map" class="card">
                    </div>
                </div>
                <div class="col-md-4">
                  <div class="card">
                    <div id="panel" class="card-block" style="overflow-y: scroll;height: 400px;">
                    
                  </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="footer">
            <div class="container">
                <span class="text-muted">
                    www.java-sc.com
                </span>
            </div>
        </footer>
    </body>
    <script crossorigin="anonymous" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
    </script>
    <script crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
    </script>
    <script>
        function initMap() {
        var markerArray = [];
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 0.50404, lng: 102.4579712}
        });
        var stepDisplay = new google.maps.InfoWindow;
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('panel'));
    calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map);
        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map);
        };

        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('finish').addEventListener('change', onChangeHandler);
      }

      function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map) {
       for (var i = 0; i < markerArray.length; i++) {
          markerArray[i].setMap(null);
        }
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('finish').value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
            showSteps(response, markerArray, stepDisplay, map);
            $("#error").empty();
            $("#error").removeClass();
          } else {
           $("#error").addClass("badge badge-danger");
            $("#error").text("Tidak dapat menemukan nama lokasi, status error: "+status);
          }
        });
      }

      function showSteps(directionResult, markerArray, stepDisplay, map) {
        var myRoute = directionResult.routes[0].legs[0];
        for (var i = 0; i < myRoute.steps.length; i++) {
          var marker = markerArray[i] = markerArray[i] || new google.maps.Marker;
          marker.setMap(map);
          marker.setPosition(myRoute.steps[i].start_location);
          attachInstructionText(
              stepDisplay, marker, myRoute.steps[i].instructions, map);
        }
      }

      function attachInstructionText(stepDisplay, marker, text, map) {
        google.maps.event.addListener(marker, 'click', function() {
          stepDisplay.setContent(text);
          stepDisplay.open(map, marker);
        });
      }
    </script>
    <script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=KODE_API_KAMU&callback=initMap"></script>
</html>

Dari kode sebelumnya "Lihat Tutorial Ini", kita menambah dua fungsi yaitu showSteps dan attachInstructionText. Yang mana pada fungsi showSteps adalah memasukan marker ke dalam peta. Lihat pada line 153, jika respon yang diterima adalah OK maka lokasi setiap titik rute akan disimpan ke dalam variabel markerArray. Sedangkan fungsi kedua adalah untuk menampilkan informasi ketika marker di klik.

Penutup

Tentu saja tutorial ini tidak sesempurna yang dipikirkan, anda dapat mengkostum beberapa kode misalnya memberikan icon pada setiap titik pengganti marker yang begitu besar. Atau anda dapat menampilkan informasi lain yang dapat di tampilkan saat respon diterima (OK). Silahkan dikostum sesuai dengan kebutuhan, jika ingin berbagi silahkan tinggalkan komentar di postingan ini.

Cara Menginstall Jasper Report Di Netbeans 8

2018-03-04T11:00:00.002+07:00

Pembukaan

Jasper report merupakan library untuk membuat beberapa laporan dari aplikasi yang kita kembangkan (bangun). Tidak asing lagi, jasper report sudah banyak digunakan terutama dalam aplikasi yang di bangun dari bahasa pemrograman Java. Kali ini saya akan membuatkan tutorial bagaimana cara menginstall jasper report di netbeans 8, dalam kasus ini saya menggunakan versi netbeans 8.2.

Pembahasan

Untuk jasper report yang digunakan adalah plugin netbeans yang dapat didowload pada http://plugins.netbeans.org. Untuk versi pluginnya sebenarnya sudah lumayan lawas yaitu versi 5.5, sebenarnya kamu bisa menggunakan varsi yang paling terbaru yang berada pada situs https://community.jaspersoft.com. Namun beberapa hal yang membuat saya tetap menggunakan versi lawas ini diantaranya.

Merupakan plugin dari netbeas yang berarti kita desain dokumen berada di dalam netbeans.
Spesifikasi perangkat yang saya gunakan minim, kalau saya menggunakan 2 tools yang berbeda padahal dikerjakan secara bersamaan maka dijamin laptop saya akan Lagging (sudah testing dengan Jasper Report Studio)
Lagian ini hanya digunakan untuk desain dokumen nya saja.

Pendapat ke 3 mungkin bisa di abaikan, jika kamu punya pendapat lain (yang berbeda )silahkan di utarakan melalui kolom komentar.

Plugins Jasper Report Netbeans

Library Jasper Report Terbaru

Seperti yang saya sebutkan sebelumnya, yang versi 5.5 hanya digunakan untuk desain saja kalau untuk library jaspernya kita gunakan yang terbaru saja. Namun jika spesifikasi laptop atau perangkat kamu mempuni silahkan download Jasper Report Studio versi komunitasnya (gratis).

Install Plugin Jasper Report Netbeans

Saat kamu berada di page plugins netbeans, silahkan kamu pilih versi netbeans yang paling tinggi kemudian klik tombol download. Lihat gambar dibawah.

Gambar 1

Setelah terdownload, extrak lah file hasil download tersebut dalam 1 folder saja agar mudah menemukannya.Buka netbeans kamu kemudian pada menubar pilih Tools > Plugins.

Gambar 2

Selanjutnya kamu akan di tampilkan frame untuk menambah plugins. Buka pada tab Downloaded, Klik tombol Add Plugins .., cari file yang sudah di extrak tadi kemudian block seluruh file. Setelah di block maka langsung Klik tombol Open. Karena saya telah menginstall pluginsnya maka saya tidak bisa menampilkan pada tahap selanjutnya. Secara otomatis nanti akan menampilkan dialog untuk mengisntall, klik saya Yes /Ok, dan tunggu proses hingga ada ballons informasi untuk meminta netbeans di restart.

Gambar 3

Dan sejara otomatis kamu akan mendapatkan Welcome Page Jasper Report di netbeans kamu yang tandanya siap untuk digunakan.

Penutup

Sekian untuk tutorial Cara Menginstall Jasper Report Di Netbeans 8, pada tutorial selanjutnya kita akan mencoba menggunakan / mebuat laporan menggunakan Jasper report. Selain itu pada link download library terbaru jasper report di atas, jika kamu sudah mendownload file jar nya kamu simpan saja dahulu karena akan berguna pada tutorial selanjutnya.

Cara Menampilkan Deskripsi Arah Pada Rute dengan Google Maps

2018-02-25T11:41:00.001+07:00

Pembuka

Setelah berhasil membuat rute sederhana menggunakan google maps api, selanjutnya pada tutorial ini akan memberikan contoh bagaimana menapilkan informasi atau deskripsi arah pada saat rute ditampilkan.

~~Membuat Rute Sederhana dengan Google Maps.~~
~~Menampilkan Deskripsi Rute dengan Google Maps.~~
Menampilkan Informasi Rute Menggunakan Info Window di Google Maps.
Menampilkan Rute Peta Dari Database.
Menampilkan Rute Alternatif Di Google Maps.

Pembahasan

Deskripsi Rute

Agar mempermudah pembelajaran, maka buatlah file html baru dengan nama (misalnya) direction_2. Kemudian pada file tersebut ketikanlah kode program berikut ini.

<!DOCTYPE html>
<html>
    <head>
        <meta content="initial-scale=1.0, user-scalable=no" name="viewport">
            <meta charset="utf-8">
                <title>
                    Java Source Code
                </title>
                <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet">
                    <script crossorigin="anonymous" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
                    </script>
                    <script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=API_KEY_KAMU&callback=initMap">
                    </script>
                    <style>
                        html { position: relative; height: 100%; }
                        body { margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; height: 60px; line-height: 60px; background-color: #f5f5f5; } body > .container { padding: 60px 15px 10px; } .footer > .container { padding-right: 15px; padding-left: 15px; } code { font-size: 80%; } #map { margin-top: 0px; width: 100%; height: 400px; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #right-panel {height: 100%;float: right;width: 390px;overflow: auto;}
                    </style>
                </link>
            </meta>
        </meta>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                <a class="navbar-brand" href="">
                    Cara Membuat Rute Sederhana Dengan Google Maps
                </a>
                <button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarCollapse" data-toggle="collapse" type="button">
                    <span class="navbar-toggler-icon">
                    </span>
                </button>
            </nav>
        </header>
        <main class="container">
            <div class="row">
                <div class="col-md-12">
                    <br>
                        <div class="row">
                            <label class="col-sm-2 col-form-label">
                                Awal
                            </label>
                            <div class="col">
                                <select class="form-control" id="start">
                                    <option value="Pekanbaru">Pekanbaru</option>
                                    <option value="Duri Talang Mandi">Duri</option>
                                    <option value="Dumai">Dumai</option>
                                    <option value="Lirik Indragiri Hulu">Lirik</option>
                                    <option value="Pasir Pengaraian">Pasir Pengaraian</option>
                                    <option value="Pulau Bengkalis">Pulau Bengkalis</option>
                                </select>
                            </div>
                            <label class="col-sm-2 col-form-label">
                                Tujuan
                            </label>
                            <div class="col">
                                <select class="form-control" id="finish">
                                    <option value="Pekanbaru">Pekanbaru</option>
                                    <option value="Duri Talang Mandi">Duri</option>
                                    <option value="Dumai">Dumai</option>
                                    <option value="Lirik Indragiri Hulu">Lirik</option>
                                    <option value="Pasir Pengaraian">Pasir Pegaraian</option>
                                    <option value="Pulau Bengkalis">Pulau Bengkalis</option>
                                </select>
                            </div>
                        </div>
                        <span id="error">
                        </span>
                    </br>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div id="map" class="card">
                    </div>
                </div>
                <div class="col-md-4">
                  <div class="card">
                    <div id="panel" class="card-block" style="overflow-y: scroll;height: 400px;">
                    
                  </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="footer">
            <div class="container">
                <span class="text-muted">
                    www.java-sc.com
                </span>
            </div>
        </footer>
    </body>
    <script crossorigin="anonymous" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
    </script>
    <script crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
    </script>
    <script>
        function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 0.50404, lng: 102.4579712}
        });
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('panel'));

        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('finish').addEventListener('change', onChangeHandler);
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('finish').value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
            $("#error").empty();
            $("#error").removeClass();
          } else {
           $("#error").addClass("badge badge-danger");
            $("#error").text("Tidak dapat menemukan nama lokasi, status error: "+status);
          }
        });
      }
    </script>
</html>

Pada baris 76 - 82 merupakan bagian untuk menampilkan panel informasi dari rute yang dibuat. Lalu untuk menampilkan informasi kita hanya menambah beberapa baris kode javascript yaitu:

directionsDisplay.setPanel(document.getElementById('panel'));

Kode ini dapat dilihat pada baris 106, dengan menampilkan informasi berdasarkan id panel pada elemen html.

Penutup

Tutorial sederhana Cara Menampilkan Deskripsi Arah Pada Rute dengan Google Maps dapat kamu kostum kembali, baik itu dari segi tampilan ataupun dari segi proses. Jangan lupa untuk selalu merubah API_KEY_KAMU dengan api key yang sudah diregistrasi kedalam google developer.

Cara Membuat Rute Sederhana Dengan Google Maps

2018-02-01T14:46:00.004+07:00

Pembuka

Google maps sudah menyediakan layanan direction yang sangat mudah untuk di implementasikan. Dalam hal ini saya akan memberikan contoh dalam membuat direction dengan google maps api dalam peta Indonesia. Adapun beberapa point yang ada dalam tutorial ini yaitu:

~~Membuat Rute Sederhana dengan Google Maps~~.
Menampilkan Deskripsi Rute dengan Google Maps.
Menampilkan Informasi Rute Menggunakan Info Window di Google Maps.
Menampilkan Rute Peta Dari Database.
Menampilkan Rute Alternatif Di Google Maps.

Pembahasan

Gambar 1

Buatlah file html kemudian beri nama direction_1 (nama file bebas) kemudian pada file html ketikan kode dibawah.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Java Source Code</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_KAMU&callback=initMap">
    </script>
    <style>
 html { position: relative; height: 100%; }
 body { margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; height: 60px; line-height: 60px; background-color: #f5f5f5; } body > .container { padding: 60px 15px 10px; } .footer > .container { padding-right: 15px; padding-left: 15px; } code { font-size: 80%; } #map { margin-top: 20px; width: 100%; height: 400px; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; }
    </style>
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="">Cara Membuat Rute Sederhana Dengan Google Maps</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </nav>
    </header>
    <main class="container">
      <div class="row">
       <div class="col-md-12">
       <br>
        <div class="row">
      <label class="col-sm-2 col-form-label">Awal</label>
         <div class="col">
            <select class="form-control" id="start" >
            <option value="Pekanbaru">Pekanbaru</option>
            <option value="Duri Talang Mandi">Duri</option>
            <option value="Dumai">Dumai</option>
            <option value="Lirik Indragiri Hulu">Lirik</option>
            <option value="Pasir Pengaraian">Pasir Pengaraian</option>
            <option value="Pulau Bengkalis">Pulau Bengkalis</option>
          </select>
      </div>
      <label class="col-sm-2 col-form-label">Tujuan</label>
      <div class="col">
          <select class="form-control" id="finish">
            <option value="Pekanbaru">Pekanbaru</option>
            <option value="Duri Talang Mandi">Duri</option>
            <option value="Dumai">Dumai</option>
            <option value="Lirik Indragiri Hulu">Lirik</option>
            <option value="Pasir Pengaraian">Pasir Pegaraian</option>
            <option value="Pulau Bengkalis">Pulau Bengkalis</option>
          </select>
      </div>
      </div>
    <span id="error"></span>
      </div>
     </div>
  
   <div id="map"></div>       
  
    </main>
    <footer class="footer">
      <div class="container">
        <span class="text-muted">www.java-sc.com</span>
      </div>
    </footer>
  </body>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 0.50404, lng: 102.4579712}
        });
        directionsDisplay.setMap(map);

        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('finish').addEventListener('change', onChangeHandler);
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('finish').value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
            $("#error").empty();
            $("#error").removeClass();
          } else {
           $("#error").addClass("badge badge-danger");
            $("#error").text("Tidak dapat menemukan nama lokasi, status error: "+status);
          }
        });
      }
    </script>
</html>

Dari kode diatas, saya menggunakan framework bootstrap 4 untuk layout, untuk data yang dicari adalah nama daerah namun dalam hal ini kita harus benar-benar memastikan service google api dapat mengecek nama lokasi. directionService dan directionDisplay merupakan variabel untuk menggunakan service directions google Api. Fungsi calculateAndDisplayRute adalah fungsi untuk menampilkan rute yang dibentuk berdasarkan lokasi yang kita tentukan pada value form select. Kita juga bisa merubah lokasi dari nama ke dalam bentuk LatLang, hanya merubah bagian value pada form select. Sebagai contoh untuk daerah Pekanbaru, <option value="0.5139625,101.3711348">Pekanbaru</option>.

Penutup

Pada postingan ini hanya memberikan kamu contoh sederhana untuk menampilkan rute berdasarkan nama daerah dan koordinat lokasi.

Cara Membuat Session Di Java Swing Menggunakan File XML

2017-11-21T12:54:00.002+07:00

Pembuka

Pada kesempatan kali ini kita akan mencoba melanjutkan tutorial sebelumnya mengenai Cara Membuat Session Di Java Dengan Setter dan Getter. Didalam tutorial tersebut kita hanya mendapatkan session yang digunakan untuk frame lain. Sedangkan session biasanya tersimpan dan dapat digunakan kembali saat aplikasi di tutup (bukan di logout). Nah session sangat terkenal di dunia Web programming, session biasanya di simpan pada browser. Sehingga ketika web atau sistem yang kita jalankan masih dalam keadaan login di tutup, maka saat di buka kembali web akan tetap dalam keadaan login. Jika di logout maka seluruh session akan ter destroy (terhapus). Sebenarnya hal ini sangat sulit di dapatkan pada aplikasi desktop (correct me if wrong). Namun kita dapat mengakalinya dengan menyimpan session didalam sebuah file yang tersimpan di directory aplikasi yang dibangun. Di dalam tutorial ini saya akan memberikan contoh Cara Membuat Session Di Java Swing Menggunakan File XML. XML sendiri adalah bahasa Markup seperti HTML, namun ketentuan dalam pengetikan kode programmnya tidak lah menentu. XML banyak digunakan untuk urusan desain web atau interface aplikasi (android).

Pembahasan

Buatlah database dengan nama java-sc atau jika anda perlukan menggunakan database anda sediri. Kemudian buat tabel user dengan atribut id, nama, username, password, dan level. Sebenarnya database ini kita gunakan untuk menguji berhasil tidaknya saja.

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `nama` varchar(30) DEFAULT NULL,
  `username` varchar(20) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  `level` enum('Admin','Pegawai') DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `user`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `user`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

Tambahkan data berdasarkan kolom yang sudah dibuat pada tabel, barulah kita lanjutkan kedalam java. Buat project baru di java netbeans dengan nama project LoginWithSession, sehingga pada awal dibatnya project akan ada class main. Buat class baru dengan nama Database, seperti biasa ini nantinya berisikan beberapa konfig. tambahkan terlebih dahulu library MySQL JDBC Driver pada project yang dibuat. Isikan file Database.java dengan kode progam berikut.

/*
 * Java Source Code Developer :: Hady Eka Saputra
 */
package loginwithsession;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import javax.swing.JOptionPane;

/**
 *
 * @author jsc-dev
 */
public class Database {
    Connection conn = null;
    private static String id;
    private static String username;
    private static String password;
    private static String level;
    
    public static String get_userId(){
        return id;
    }
    public static void set_userId(String userId){
        Database.id = userId;
    }
    public static String get_username(){
        return username;
    }
    public static void set_username(String username){
        Database.username = username;
    }
     public static String get_password(){
        return password;
    }
    public static void set_password(String pass){
        Database.password = pass;
    }
    public static String get_level(){
        return level;
    }
    public static void set_level(String level){
        Database.level = level;
    }
    
    public static Connection koneksi(){
        String driver   = "com.mysql.jdbc.Driver";
        String host     = "jdbc:mysql://localhost/java-sc";
        String user     = "root";
        String pass     = "root";
        try {
            Class.forName(driver);
            Connection conn = DriverManager.getConnection(host, user, pass);
            return conn;
        } catch (ClassNotFoundException | SQLException e) {
            JOptionPane.showMessageDialog(null, e.getMessage());
        }
        return null;
    }
}

Untuk keterangan kode program diatas bisa dilihat pada tutorial Cara Membuat Session Di Java Dengan Setter dan Getter. Buat 2 jframe untuk keperluan form login dan keperluan frame dashboard aplikasi dengan nama loginFrame dan homeFrame. Sebagai contoh bisa dibuat seperti gambar dibawah ini beserta keterangannya, (untuk keperluan desain saya anggap sudah paham).

Gambar 1

Gambar 2

Pada tombol masuk, tambahkan kode program dibawah ini.

        conn = Database.koneksi();
        String query = "SELECT `id`,`username`,`password`,`level` FROM `user` WHERE username=? AND password=?";
        try {
            pst = conn.prepareStatement(query);
            pst.setString(1, txt_username.getText());
            pst.setString(2, txt_password.getText());
            rs = pst.executeQuery();
            if (rs.next()) {
                Database.set_userId(rs.getString("id"));
                Database.set_username(rs.getString("username"));
                Database.set_password(rs.getString("password"));
                Database.set_level(rs.getString("level"));
                JOptionPane.showMessageDialog(null, "Berhasil Login !!!!");
                Database.createXML(rs.getString("id"), rs.getString("username"), rs.getString("password"), rs.getString("level"));
                homeFrame hF = new homeFrame();
                hF.setVisible(true);
                this.dispose();
                
            }
            else {
                JOptionPane.showMessageDialog(null, "Username dan Password Tidak Cocok !!");
            }
            
            rs.close();
            pst.close();
            conn.close();
        } catch (SQLException e) {
            JOptionPane.showMessageDialog(null, e);
        }

Pastikan kita inisalisasikan pst,rs dan conn pada bagian dibawah nama class dari form, seperti berikut ini.

public class loginFrame extends javax.swing.JFrame {
    Connection conn = null;
    ResultSet rs = null;
    PreparedStatement pst = null;
    /**....................

Anda akan menemukan error pada bagian Database.createXML, ini adalah method yang kita gunakan untuk membuat file xml nantinya. Tambahkan kode program berikut di dalam Class Database sehingga secara penuh isi kode program class Database adalah seperti berikut ini.

/*
 * Java Source Code Developer :: Hady Eka Saputra
 */
package loginwithsession;

import java.io.File;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import javax.swing.JOptionPane;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import org.w3c.dom.Document;
import org.w3c.dom.Element;

/**
 *
 * @author jsc-dev
 */
public class Database {
    Connection conn = null;
    private static String id;
    private static String username;
    private static String password;
    private static String level;
    
    public static String get_userId(){
        return id;
    }
    public static void set_userId(String userId){
        Database.id = userId;
    }
    public static String get_username(){
        return username;
    }
    public static void set_username(String username){
        Database.username = username;
    }
     public static String get_password(){
        return password;
    }
    public static void set_password(String pass){
        Database.password = pass;
    }
    public static String get_level(){
        return level;
    }
    public static void set_level(String level){
        Database.level = level;
    }
    
    public static Connection koneksi(){
        String driver   = "com.mysql.jdbc.Driver";
        String host     = "jdbc:mysql://localhost/java-sc";
        String user     = "root";
        String pass     = "root";
        try {
            Class.forName(driver);
            Connection conn = DriverManager.getConnection(host, user, pass);
            return conn;
        } catch (ClassNotFoundException | SQLException e) {
            JOptionPane.showMessageDialog(null, e.getMessage());
        }
        return null;
    }
    
    public static void createXML(String id,String uname,String pass,String lvl){
        try {
            DocumentBuilderFactory docFactory = DocumentBuilderFactory.newInstance();
            DocumentBuilder docBuilder = docFactory.newDocumentBuilder();


            Document doc = docBuilder.newDocument();
            Element rootElement = doc.createElement("session");
            doc.appendChild(rootElement);
            
            
            Element id_login = doc.createElement("id");
            rootElement.appendChild(id_login);
            id_login.setTextContent(id);
            Element username = doc.createElement("uname");
            rootElement.appendChild(username);
            username.setTextContent(uname);
            Element password = doc.createElement("pass");
            rootElement.appendChild(password);
            password.setTextContent(pass);
            Element level = doc.createElement("level");
            rootElement.appendChild(level);
            level.setTextContent(lvl);
            
            TransformerFactory transformerFactory = TransformerFactory.newInstance();
            Transformer transformer = transformerFactory.newTransformer();
            DOMSource source = new DOMSource(doc);
            StreamResult result = new StreamResult(new File(System.getProperty("user.dir") + "/session.xml"));
            transformer.transform(source, result);

   } catch (ParserConfigurationException | TransformerException e) {
  System.out.println(e);
   }
    }
    
}

Beralih ke bagian frame dashboard, buat method baru dengan nama logged kemudian tambahkan kode program untuk menggunakan data session pada masing-masing method yang menyimpan data tersebut. Berikut kode programnya.

    public homeFrame() {
        initComponents();
        logged();
    }
    private void logged (){
        txt_id.setText(loginwithsession.Database.get_userId());
        txt_username.setText(loginwithsession.Database.get_username());
        txt_password.setText(loginwithsession.Database.get_password());
        txt_level.setText(loginwithsession.Database.get_level());
        
    }

Pada bagian tombol keluar tambahkan kode program berikut.

        File data = new File(System.getProperty("user.dir") + "/session.xml");
        if (data.exists()) {
            data.delete();
            loginFrame lF = new loginFrame();
            lF.setVisible(true);
            JOptionPane.showMessageDialog(null, "Berhasil Keluar Aplikasi, \n\nSilahkan Masuk Kembali!!");
            this.dispose();
        }

Dengan menghapus file session.xml yang di buat tadi, maka kita tidak dapat mengakses homeFrame tanpa login. Terakhir adalah main class yang dimana jika kita membuild program kita nantinya class ini adalah class yang digunakan untuk class pertama yang dijalankan. Kita gunakan pada class pertama tadi yang sudah otomatis di buat saat membuat project, berikut kode programnya.

/*
 * Java Source Code Developer :: Hady Eka Saputra
 */
package loginwithsession;

import java.io.File;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.swing.JOptionPane;
import javax.swing.UnsupportedLookAndFeelException;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import org.w3c.dom.Document;
import org.xml.sax.SAXException;

/**
 *
 * @author jsc-dev
 */
public class checkSession {
    public static void main(String[] args) throws UnsupportedLookAndFeelException {
        File data = new File(System.getProperty("user.dir") + "/session.xml");
        if (data.exists()) {
            
            try {
                DocumentBuilderFactory dbFactory = DocumentBuilderFactory.newInstance();
                DocumentBuilder dBuilder = dbFactory.newDocumentBuilder();
                Document doc = (Document) dBuilder.parse(data);
                String id = doc.getElementsByTagName("id").item(0).getTextContent();
                String username = doc.getElementsByTagName("uname").item(0).getTextContent();
                String password = doc.getElementsByTagName("pass").item(0).getTextContent();
                String level = doc.getElementsByTagName("level").item(0).getTextContent();
                
                loginwithsession.Database.set_userId(id);
                loginwithsession.Database.set_username(username);
                loginwithsession.Database.set_password(password);
                loginwithsession.Database.set_level(level);
                
                for (javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()) {
                    if ("GTK+".equals(info.getName())) {
                        try {
                            javax.swing.UIManager.setLookAndFeel(info.getClassName());
                            break;
                        } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                            Logger.getLogger(checkSession.class.getName()).log(Level.SEVERE, null, ex);
                        }
                    }
                }
                homeFrame hF = new homeFrame();
                hF.setVisible(true);
            } catch (IOException | ParserConfigurationException | SAXException e) {
                JOptionPane.showMessageDialog(null, e);
            }
        }else {
            for (javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()) {
                if ("GTK+".equals(info.getName())) {
                    try {
                        javax.swing.UIManager.setLookAndFeel(info.getClassName());
                        break;
                    } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                        Logger.getLogger(checkSession.class.getName()).log(Level.SEVERE, null, ex);
                    }
                }
            }
            loginFrame lF = new loginFrame();
            lF.setVisible(true);
        }                      
    }
}

Selanjutnya coba jalankan aplikasi ini, secara umum maka akan seperti video dibawah.

Penutup

Sebenarnya cara ini tidak efisien mengingat keamanan dari aplikasi, namun karena biasanya aplikasi desktop hanya dijalankan secara lokal atau tidak perlu terhubung ke internet seperti aplikasi web mungkin saja cara ini terbilang aman. Untuk keperluan lainnya bisa saja menggunakan username dan password yang lebih secure dan tidak mudah di decrypt.

Cara Membuat Login Aplikasi Menggunakan Twitter Di Java

2017-11-05T02:35:00.000+07:00

Pembuka

Setelah sebelumnya pada tutorial Cara Menghubungkan Twitter dengan Program Java berjalan dengan sukses, kali ini saya akan memberikan contoh program Cara Membuat Login Aplikasi Menggunakan Twitter Di Java. Sama halnya dengan yang sebelumnya, kita masih menggunakan token yang pernah di buat. Namun dalam tutorial ini kita hanya menggunakan token consumer dan token secret consumer.

Pembahasan

Kita akan membuat dalam project yang berbeda atau projek baru dari sebelumnya, pada tutorial ini nama projek adalah SystemLoginWithTwitter. Setelah projek baru dibuat akan ada nama package dengan nama systemloginwithtwitter dan main class SystemLoginWithTwitter.java. Kita akan abaikan java class tersebut, buatlah jFrame dengan nama loginFrame untuk interface login. Sekiranya dalam tutorial ini interface yang saya gunakan seperti gambar berikut.

Gambar 1

Dengan beberapa komponen interface jFrame login adalah seperti didalam tabel.

Komponen	Text	Variable	Fungsi
jFrame	-	-	Merupakan form utama (main form )dari aplikasi berupa login
jPanel	-	Default (jPanel1)	Panel untuk menapung komponen swing control
jLabel	-	icon, head, jsc	Menampilkan icon twitter, menampilkan text Login With Database And Twitter, dan menampilkan text www.java-sc.com
jPanel	-	Default (jPanel2)	Panel untuk menapung komponen swing control textfield dan button
JTextField	-	username	textfield memasukan username
JPasswordField	-	password	textfield memasukan password
JButton	Login,Twitter,Coming Soon	login_db,login_tw,login_cs	tombol aksi untuk masing-masing intruksi login

Untuk interface terserah saja, karena itu adalah kreasi masing-masing developer. Selanjutnya buat lagi JFrame dengan interface untuk menampilkan halaman utama setelah login. Beri nama JFrame baru dengan nama homeFrame, perhatikan interface yang ada saya buat (boleh ditiru ataupun tidak).

Gambar 2

Selanjutnya komponen yang digunakan pada interface homeFrame adalah seperti berikut ini.

Komponen	Text	Variable	Fungsi
jFrame	-	-	Merupakan interface setelah login (home)
jPanel	-	Default (jPanel1)	Panel untuk menapung komponen swing control
jLabel	Selamat Datang, null, user_id, dan screen_name	lbl_welcome,lbl_foto, lbl_userId, dan lbl_screenName	Menapilkan data yang di dapat dari twitter
jSrollPanel	-	Default	Panel untuk menapung komponen jPanel dan beberapa komponen lainnya.
JTextPane	-	timelineText	Panel untuk menapilkan beberapa text (timeline pada twitter)

Beralih pada loginFrame.java, kemudian klik 2 kali pada tombol Twitter untuk membuat event actionPerform.

        Twitter twitter = new TwitterFactory().getInstance();
        twitter.setOAuthConsumer("Consumer Token", "Consumer Secret Token");
        try {
            RequestToken requestToken = twitter.getOAuthRequestToken();  
            
            Desktop desktop = Desktop.isDesktopSupported() ? Desktop.getDesktop() : null;
            if (desktop != null && desktop.isSupported(Desktop.Action.BROWSE)) {
                try {
                    Desktop.getDesktop().browse(new URL(requestToken.getAuthorizationURL()).toURI());
                } catch (IOException | URISyntaxException e) {
                    System.out.println("Tidak Dapat Membuka Browser :"+e.getMessage());
                }   
            }
            AccessToken accessToken = null;
            while (null == accessToken) {                
                try {
                    String pin = JOptionPane.showInputDialog(null, "Masukan Pin Autentikasi", "PIN Autentikasi Aplikasi",JOptionPane.INFORMATION_MESSAGE);
                    accessToken = twitter.getOAuthAccessToken(requestToken,pin);
                } catch (TwitterException e) {
                    JOptionPane.showMessageDialog(null,e.getMessage());
        }
}
            User user = twitter.verifyCredentials();
            JOptionPane.showMessageDialog(null, "Assalamualaikum "+user.getName());
            SystemLoginWithTwitter.set_userId(user.getId());
            SystemLoginWithTwitter.set_name(user.getName());
            SystemLoginWithTwitter.set_token(accessToken.getToken());
            SystemLoginWithTwitter.set_tokenSecret(accessToken.getTokenSecret());
            homeFrame home = new homeFrame();
            home.setVisible(true);
            this.setVisible(false);
        } catch (TwitterException e) {
            JOptionPane.showMessageDialog(null, "Gagal : "+e.getMessage());
        }

Mungkin akan ada error disebabkan karena tidak ada library yang di import, namun ada beberapa eror lagi yang belum selesai terutama pada bagian.

            SystemLoginWithTwitter.set_userId(user.getId());
            SystemLoginWithTwitter.set_name(user.getName());
            SystemLoginWithTwitter.set_token(accessToken.getToken());
            SystemLoginWithTwitter.set_tokenSecret(accessToken.getTokenSecret());

Masalah ini muncul karena kita belum membuat method untuk set dan get data pada class SystemLoginWithTwitter.java. Sekarang beralihlah pada class berikut, kemudian hapus block pada public static void main sehingga hanya menjadi seperti ini saja.

package systemloginwithtwitter;
/**
 *
 * @author jsc-dev
 */
public class SystemLoginWithTwitter {
    
}

Selanjutnya ketikan kode program berikut didalam sehingga menjadi.

package systemloginwithtwitter;
/**
 *
 * @author jsc-dev
 */
public class SystemLoginWithTwitter {
    private static Long userId;
    private static String name;
    private static String token;
    private static String tokenSecret;
    
    public static Long get_userId(){
        return userId;
    }
    public static void set_userId(Long userId){
        SystemLoginWithTwitter.userId = userId;
    }
    public static String get_name(){
        return name;
    }
    public static void set_name(String name){
        SystemLoginWithTwitter.name = name;
    }
    public static String get_token(){
        return token;
    }
    public static void set_token(String token){
        SystemLoginWithTwitter.token = token;
    }
    public static String get_tokenSeret(){
        return tokenSecret;
    }
    public static void set_tokenSecret(String tokenSecret){
        SystemLoginWithTwitter.tokenSecret = tokenSecret;
    }
}

Barulah masalah error yang terjadi seharusnya sudah selesai, apabila belum selesai silahkan berkomentar pada kolom komentar. Untuk tahap ini seharusnya jika dijalankan sudah berhasil, sebelum melakukan testing saya akan tambahkan beberapa kode program lagi untuk homeFrame.java. Buka jframe homeFrame, kemudian masuk pada bagian source dari class jFrame tersebut. Cari fungsi berikut,

    public homeFrame() {
        initComponents();
    }

Tambahkan method baru dengan nama loadDataUser(), dan ketikan kode program berikut di dalam nya.

        private void loadDataUser(){
        String nama = SystemLoginWithTwitter.get_name();
        Long userId = SystemLoginWithTwitter.get_userId();
        String token = SystemLoginWithTwitter.get_token();
        String tokenSecret = SystemLoginWithTwitter.get_tokenSeret();
        try {
            ConfigurationBuilder config = new ConfigurationBuilder();
            config.setDebugEnabled(true)
                    .setOAuthConsumerKey("KAiWPUJ41gLAG60nqY0iX1Yd6")
                    .setOAuthConsumerSecret("CIesBNQVoyobgcVAlTXLQJLVMIRpOMkAGJl1KHky7URdhVeslI")
                    .setOAuthAccessToken(token)
                    .setOAuthAccessTokenSecret(tokenSecret);

            TwitterFactory tfactory = new TwitterFactory(config.build());
            twitter4j.Twitter twitter = tfactory.getInstance();
            User user = twitter.verifyCredentials();
            lbl_welcome.setText("Selamat Datang "+nama);
            lbl_foto.setIcon((Icon) new ImageIcon(new ImageIcon(new URL(user.getOriginalProfileImageURL())).getImage().getScaledInstance(138, 138, Image.SCALE_DEFAULT)));
            lbl_userId.setText(userId.toString());
            lbl_screenName.setText(user.getScreenName());
            
            List status =  twitter.getHomeTimeline();
            StringBuilder sb = new StringBuilder();
            for (Status s : status){
                sb.append(s.getUser().getName()+" : "+s.getText()+"\n\n\n");
            }
            timelineText.setText(sb.toString());
        } catch (TwitterException e) {
            JOptionPane.showMessageDialog(null, e.getMessage(), "Gagal Membaca Data User Twitter", JOptionPane.ERROR_MESSAGE);
        } catch (MalformedURLException ex) {
            Logger.getLogger(homeFrame.class.getName()).log(Level.SEVERE, null, ex);
        }

Nama fungsi selanjutnya di jalankan pada homeFrame sehingga menjadi seperti kode program berikut.

    public homeFrame() {
        initComponents();       loadDataUser();
    }

Selanjutnya bisa di jalankan seluruh program dengan membuka (run) pada bagian loginFrame, untuk memuali bisa lihat gambar dibawah ini.

Gambar 3

Penutup

Sayangnya cara ini hanya berguna setiap ingin masuk menggunakan akun twitter harus menggunakan akses PIN yang di kirim dari twitter. Saya belum mendapatkan solusi jika twitter4j tersedia untuk desktop dari segi login tanpa menggunakan PIN, jika menggunakan fungsi Callback URL pada twitter berlaku untuk tipe program basis web.

Cara Menghubungkan Twitter dengan Program Java

2017-10-31T23:58:00.002+07:00

Pembuka

Twitter merupakan sosial media yang sudah terkenal dikalangan masyarakat IT, apalagi twitter merupakan sosial media yang paling banyak diminati untuk melakukan beberapa riset, atau sekedar menggunakan API dari twitter untuk megambil data pengguna, tweet dan tranding topik dari hastag yang ada. Pada kesempatan ini saya akan memberikan kode program, bagaimana seluruh data pada twitter dapat diakses dengan program lain. Kunci utamanya adalah API yang sudah disediakan Developer Twitter, API dapat diakses dengan mendapatkan kode (token) yang kita minta dari twitter. Melalui token tersebut kita dapat meminta data seperti timeline, profile, atau trending topik di twitter, selanjutnya saya akan bahas pada tutorial Cara Menghubungkan Twitter dengan Program Java ini.

Pembahasan

Masuk ke dalam halaman pengembang twitter atau bisa langsung melalui url https://apps.twitter.com , selanjutnya akan diminta masuk dengan akun twitter yang sudah terdaftar. Silahkan login saja menggunakan akun twitter kamu yang aktif. Selanjutnya anda akan disuguhi laman Application Managemen, yang dapat juga dikatakan laman pembuatan App pada akun twitter.

Gambar 1

App disini sebenarnya hanya untuk mendapatkan beberapa Key atau Token yang nantinya digunakan pada pengembangan aplikasi menggunakan Pemrograman lain (dalam hal ini java salah satunya). Selanjutnya arahkan dan klik pada tombol Create New App untuk membuat App baru. Isi form Application Details yang diberi tanda bintang merah, pada bagian Callback URL silahkan dikosongkan saja tidak apa-apa.

Gambar 2

Ceklis pada bagian Developer Agreement, bisa di baca sebelum melanjutkan untuk menekan tombol Create your Twitter application.

Gambar 3

Setelah sukses, kita lakukan beberapa settingan yaitu pertama setingan permision dan kedua generate acces token. Pada bagian tab Permissions pilih Read, Write and Access direct messages untuk akses penuh ke twitter (sebenarnya tidak penuh-penuh kali) kemudian klik tombol Update Settings.

Gambar 4

Selanjutnya buka tab Keys and Access Tokens, maka akan ditampilkan kode (token) untuk Consumer, dan kita buat juga untuk App kita dengan menekan tombol Access Token di bagian bawah "Your Access Token".

Gambar 5 : Consumer Key

Gambar 6 : Access Token

Lalu kita akan lakukan tes untuk Menghubungkan Twitter dengan Program Java yang kita buat, silahkan buka netbeans dan buat project dengan nama AccessTwitter. Selanjutnya sebelum kita melakukan koding, download terlebih dahulu library Twitter4J.

Download Twitter4J

Extrak file twitter4j-*.zip di sebuah folder yang mudah di temukan. Selanjutnya import library Twitter4J dengan nama file twitter4j-core-*.jar pada folder lib. Perhatikan tanda (*) merupakan versi dari library, karena pada tanggal postingan ini library Twitter4J masih versi 4.0.4.

Gambar 7

Selanjutnya pada bagian main class, silahkan tambahkan kode program berikut, saya akan berikan contoh untuk mengambil isi timeline kita.

ConfigurationBuilder config = new ConfigurationBuilder();
        config.setDebugEnabled(true)
                .setOAuthConsumerKey("Consumer Key")
                .setOAuthConsumerSecret("Consumer Key Secret")
                .setOAuthAccessToken("Your Token")
                .setOAuthAccessTokenSecret("Your Token Secret");
        
        TwitterFactory tfactory = new TwitterFactory(config.build());
        twitter4j.Twitter twitter = tfactory.getInstance();
        
        try {
            List status =  twitter.getHomeTimeline();
            int n= 0;
            for (Status s : status) {
                n++;
                System.out.println(n+" = "+s.getUser().getName()+" Tweet : "+s.getText());
            }
        } catch (TwitterException e) {
            System.out.println(e);
        }

Isi bagian Consumer Key, Consumer Key Secret, Your Token, dan Your Token Secret sesuai dengan kode yang ada pada Apps Twitter. Apabila ada error silahkan tekan tombol CTRL+SHIFT+I pada keyboard, jika tidak ada error barulah coba di jalankan.

Gambar 8 : Timeline di Java

Gambar 9 : Original Timeline

Penutup

Sekian tutorial bagaimana Cara Menghubungkan Twitter dengan Program Java dengan mengambil contoh adalah melihat timeline dari akun twitter masing-masing.

Cara Mengambil Kotak Masuk Pesan Gmail di Java Swing

2017-10-12T22:36:00.005+07:00

Pembuka

Selain untuk mengirim email, JavaMail memiliki banyak kegunaan. Dalam tutorial Cara Mengambil Kotak Masuk Pesan Gmail di Java Swing ini, saya akan memberikan contoh kode progam java yang mengambil kotak masuk/ pesan masuk dari layanan email google. Namun saya hanya memberikan sedikit contoh dalam pengimplementasiannya pada java saja, untuk ke tahap advanced kita dapat berdiskusi melalui kolom komentar.

Pembahasan

Seperti tutorial sebelumnya mengenai Cara Mengirim Email Menggunakan Java Swing, kita akan menyatukan program tersebut dengan program inbox. Buat jFrame baru pada package yang sama dengan nama jFrame adalah DashboardMail ,lalu buatlah sebuah interface dengan keinginan anda, atau lihat gambar dibawah ini.

Gambar 1

Adapun komponen dan keterangan komponen yang digunakan dapat dilihat pada tabel dibawah.

Komponen	Text	Variable	Fungsi
jFrame	-	-	Merupakan form utama dari aplikasi
jPanel	-	fullPanel, otherPanel dan tablePanel	fullPanel komponen kontainer utuk menampung seluruh komponen kontrol dan kontainer, otherPanel untuk menampung jButton dan jLabel, dan tablePane untuk menampung komponen jTable.
jButton	Inbox dan Send	btn_inbox dan btn_kirim	btn_inbox digunakan untuk fungsi pemanggilan cek inbox pada email dan btn_kirim untuk memanggil jFrame pada JavaScMailer.java
jLabel	Java-Sc Tutorial Email	jLabel1	-
jButton	Kirim dan Bersihkan	btn_kirim dan btn_bersihkan	Tombol untuk mengirim dan tombol bersihkan seluruh form
jTable	-	tableInbox	Untuk menampung data kotak masuk pesan pada email.

Selanjutnya setelah seluruh design interface selesai dengan penamaan variabel pada komponen juga telah selesai, pindah ke bagian Source pada netbeans. Cari baris kode program berikut tepat pada bagian atas setelah nama Class,

    public DashboardMail() {
     initComponents();
    }

Selanjutnya buatlah method baru dengan nama method cekInbox(), kemudian ketikan kode program berikut.id

    public void cekInbox(){
      String host = "pop.gmail.com";
      String user = "emailgmailkamu@gmail.com";
      String password = "passwordgmailkamu";
      
        try {
         Properties properties = new Properties();

         properties.put("mail.pop3.host", host);
         properties.put("mail.pop3.port", "995");
         properties.put("mail.pop3.starttls.enable", "true");
         Session emailSession = Session.getDefaultInstance(properties);

         Store store = emailSession.getStore("pop3s");
         store.connect(host, user, password);
         //mengambil folder inbox pada email
         Folder emailFolder = store.getFolder("INBOX");
         emailFolder.open(Folder.READ_ONLY);
         //baca kotak masuk
         Message[] messages = emailFolder.getMessages();
         System.out.println("messages.length---" + messages.length);
         //mengambil seluruh daftar kotak masuk
         for (int i = 0, n = messages.length; i < n; i++) {
             //menyimpan pesan masuk pada array
             Message message = messages[i];
             DefaultTableModel model = (DefaultTableModel) tableInbox.getModel();
             List daftarInbox = new ArrayList<>();
             tableInbox.setAutoCreateColumnsFromModel(true);
             daftarInbox.add(i+1);
             daftarInbox.add(message.getFrom()[0]);
             daftarInbox.add(message.getSubject());
             //menampilkan array pada tabel
             model.addRow(daftarInbox.toArray());
         }
        emailFolder.close(false);
        store.close();

        } catch (NoSuchProviderException e) {
           e.printStackTrace();
        } catch (MessagingException e) {
           e.printStackTrace();
        } catch (Exception e) {
           e.printStackTrace();
        }
    }

Apabila menampilkan banyak error, anda cukup menekan CTRL+SHIFT+I untuk import seluruh library yang dibutuhkan. Agar kode program dapat di eksekusi, tentu harus ada komponen yang memerintahkan eksekusi. Maka pada masing-masing tombol buat lah Action Event, dengan cara double click saja komponen jButton. Pada masing-masing block kode program isi berdasarkan kode program dibawah ini.

    private void btn_inboxActionPerformed(java.awt.event.ActionEvent evt) {                                          
        cekInbox();
    }

Dan ini untuk tombol send.

    private void btn_kirimActionPerformed(java.awt.event.ActionEvent evt) {                                          
        JavaScMailer send = new JavaScMailer();
        send.setVisible(true);
        send.setAlwaysOnTop(true);
    }

Setelah selesai coba jalankan kode program di atas sehingga jika ada perintah eksekusi tiap tombol akan tampil seperti gambar berikut.

Gambar 2

Penutup

Namun ada beberapa kelemahan saat kita membuat program seperti ini, load saat eksekusi program sangat lama, jika ada 1000 data maka load akan membutuhkan waktu yang cukup lama. Namun bisa saja kita mengakalinya dengan mengambil pesan masuk yang paling atas saja, atau mungkin saja ada beberapa library yang bisa kita gunakan saat meload data dari google mail yang banyak. Tentu pengalaman orang bisa saja melebihi dari tutorial diatas, silahkan berkomentar apabila memiliki tips dan trik yang lebih baik untuk tutorial Cara Mengambil Kotak Masuk Pesan Gmail di Java Swing.

Cara Mengirim Email Menggunakan Java Swing

2017-10-04T00:17:00.003+07:00

Pembukaan

Tutorial cara mengirim email menggunakan java swing adalah tutorial yang cukup mudah. Mengirim email ini menggunakan layanan google mail (SMTP), sehingga kita tidak perlu melakukan konfigurasi yang rumit. Biasanya pengiriman email melalui aplikasi sangat lah jarang, terutama pada aplikasi desktop (terkecuali aplikasi untuk perusahaan besar). Karena beberapa orang masih suka bertanya bagaimana mengirim email menggunakan java, kali ini saya berikan langsung menggunakan swing (GUI).

Pembahasan

Pertama kali yang wajib kita perhatikan adalah layanan google mail mengizinkan aplikasi kita agar dapat mengakses google mail.

Display Unlock Captcha , silahkan enable dengan cara pilih tombol Continue.
Less Secure Apps , jika Allow less secure apps masih dalam kondisi OFF maka pada radio button di klik dalam kondisi warna biru.
Download library JavaMail API

Selanjutnya silahkan buat interface form untuk mengirim pesan dengan JFrame Form, lihat gambar dibawah saja (saya anggap anda sudah bisa membuat iterface jika belum silahkan pelajari tutorial sebelumnya di blog ini).

Gambar 1

Berikut adalah daftar komponen dan variabel yang penting dalam pembuatan interface.

Komponen	Text	Variable	Fungsi
JFrame	-	-	Merupakan form utama dari aplikasi
Jlabel	Kirim kepada dan Subjek	jLabel1 dan jLabel2	Merupakan label penjelas pada form
jTextField	-	penerima dan subjek	Form yang paling pertama adalah untuk email tujuan dan setelahnya adalah subjek email
jTextArea	-	isi	Merupakan textarea untuk memasukan pesan email
jButton	Kirim dan Bersihkan	btn_kirim dan btn_bersihkan	Tombol untuk mengirim dan tombol bersihkan seluruh form

Selanjutnya klik dua kali pada masing-masing tombol, sehingga mengarahkan pada bagian koding. Klik dua kali berguna untuk membuat event actionPerform, bisa juga dengan memilih klik kanan komponen jbutton kemudian pilih event.

Lakukan import library mail-1.4.7.jar pada package yang kita gunakan, setelah berhasil silahkan ketikan kode program dibawah pada bagian

  private void btn_kirimActionPerformed(java.awt.event.ActionEvent evt) {                                          
        
    }

sehingga menjadi seperti dibawah ini.

    private void btn_kirimActionPerformed(java.awt.event.ActionEvent evt) {                                          
        try {
            Properties props = new Properties();
            props.put("mail.smtp.auth", "true");
     props.put("mail.smtp.starttls.enable", "true");
     props.put("mail.smtp.host", "smtp.gmail.com");
     props.put("mail.smtp.port", "587");

            Session session = Session.getInstance(props, new EmailAuth());
            Message pesan = new MimeMessage(session);

            InternetAddress dari = new InternetAddress("namaemail@gmail.com", "Dari Java Source Code");
            pesan.setFrom(dari);

            InternetAddress tujuan = new InternetAddress(penerima.getText());

            pesan.setRecipient(Message.RecipientType.TO, tujuan);

            pesan.setSubject(subjek.getText());
            pesan.setText(isi.getText());
            Transport.send(pesan);
            JOptionPane.showMessageDialog(null,"Email berhasil terkirim ke "+penerima.getText());
        } catch (UnsupportedEncodingException | MessagingException ex) {
            JOptionPane.showMessageDialog(null, ex);
        }
    }

Apabila didapatkan pesan tanda error, cukup klik kanan pada lembar kerja kemudian pilih Fix Imports atau dengan cara tekan keyboard CTRL+SHIFT+I sampai tampil gambar dibawah kemudian klik OK.

Gambar 2

Setelah selesai, ada satu tanda lagi tepat pada bagian

Session session = Session.getInstance(props, new EmailAuth());

sederhananya adalah dengan menekan tanda lampu warning, kemudian pilih Create Class EmailAuth in javascmailer.JavaScMailer, lihat pada gambar dibawah.

Gambar 3

Cek pada bagian bawah kode program, terdapat class EmailAuth yang baru dibuat seperti kode program dibawah.

    private static class EmailAuth extends Authenticator {

        public EmailAuth() {
        }
    }

Ubah dengan kode program dibawah.

    private static class EmailAuth extends Authenticator {
        @Override
        protected PasswordAuthentication getPasswordAuthentication() {
            return new PasswordAuthentication("email@kamu.com", "passwordemailkamu");
        }
    }

Dengan ketentuan email@kamu.com merupakan alamat email yang digunakan untuk mengirim pesan, dan passwordemailkamu adalah password dari email yang digunakan. Jika ada pesan error maka cukup Fix Import kembali. Tahap terakhir adalah pada bagian tombol bersihkan, silahkan saja tambah kode program berikut pada btn_bersihkanActionPerformed.

    private void btn_bersihkanActionPerformed(java.awt.event.ActionEvent evt) {                                              
        penerima.setText("");
        subjek.setText("");
        isi.setText("");
    }

Tahap terakhir adalah melakukan ujicoba untuk mengirim email, jika anda berhasil mengirim emailnya maka akan tampil seperti gambar dibawah.

Gambar 4

Gambar 5

Penutup

Sekian tutorial Cara Mengirim Email Menggunakan Java Swing, untuk pertanyaan silahkan bertanya pada kolom komentar. Untuk kali ini saya tidak menyediakan link download kode program dari tutorial Cara Mengirim Email Menggunakan Java Swing.

Cara Memasukan Data RadioButton Ke Dalam Database Pada JavaFx

2017-08-06T06:02:00.007+07:00

Pembukaan

Sama halnya seperti Swing, radio berfungsi untuk melakukan satu pemilihan pada beberapa pilihan yang di berikan. Baca Cara Membuat jRadioButton Pada Komponen Swing di Java. Karena memiliki fungsi yang sama sehingga tidak perlu di jelaskan panjang lebar, langsung saja ke bagian pembahasan.

Pembahasan

Tentu tutorial ini melanjutkan tutorial sebelumnya yaitu Cara Memasukan Data TextField Ke Dalam Database Pada JavaFX , sehingga tidak perlu menjelaskan lagi database yang digunakan. Pada database yang sudah kita gunakan tambahkan satu kolom yaitu kolom jenis kelamin, berikut code sql untuk menambah kolom jenis kelamin.

ALTER TABLE `tbl_user` ADD `jenis_kelamin` VARCHAR(12) NOT NULL AFTER `password`;

Buka project netbeans yang telah ada kemudian tambah komponen yang diperlukan pada file paneUser.fxml. Adapun komponen yang kita perlukan adalah Label dan RadioButton. Tambahkan masing-masing komponen kemudian edit text menjadi Jenis Kelamin untuk komponen Label, Laki-laki untuk radio button pertama dan Perempuan untuk radio button kedua.

Gambar 1

Selanjutnya pada bagian properties komponen cari “Toggle Group”, bagian ini berguna untuk menggolongkan radio button pada sebuah grub sehingga radio ketika di pilih akan memilih salah satu dari radio yang disediakan. Misalnya lagi ada komponen 10 radio button maka sifat radio ketika akan terpilih salah satu dari 10 radio saja akan berfungsi, jika tidak menggunakan grub maka masing-masing komponen yang 10 bisa saja terseleksi semua.

Untuk membuat Toggle Group, kita terlebih dahulu memilih radio button yang di gunakan, bisa memilih salah satu terlebih dahulu atau kedua radio tersebut. Kemudian pada textbox Toggle Group isikan dengan jk (untuk jenis kelamin atau kasus yang anda gunakan). Setelah semua selesai silahkan simpan perubahan, coba terlebih dahulu apakah radio button berfungsi dengan benar (CTRL+P).

Gambar 2

Selanjutnya pada bagian Code, ubah fx:id masing-masing radio menjadi radio_lk untuk Laki-laki dan radio_pr untuk perempuan. Pada bagian On Action tambah action_lk untuk Laki-laki dan action_pr untuk Perempuan. Kenapa harus ada on action, jadi untuk mengambil text dari radio kita membutuhkan method yang berfungsi sebagai penyimpan data string (text radio) pada radio button nantinya.

Gambar 3

Setelah disimpan, selanjutnya buat controller kembali dengan cara Make Controller. Selanjutnya pada bagian pendefinisian variabel buat variabel String dengan nama jenis_kelamin.

Gambar 4

Beralih pada masing-masing action yang kita buat tadi pada radio button, tambahkan masing-masing kode berikut berdasarkan nama fd:id komponen.

    @FXML
    private void action_lk(ActionEvent event) {
        jenis_kelamin = radio_lk.getText();
    }

    @FXML
    private void action_pr(ActionEvent event) {
        jenis_kelamin = radio_pr.getText();
    }

Pada bagian coding tombol simpan cari pst.execute(); dan letakan kode berikut tepat sebelum pst.execute(); (method ini lihat pada tutorial sebelumnya, jika mengikuti akan paham).

 pst.setString(3, jenis_kelamin);

Karena kita menambah kolom pada tabel tentu query yang kita gunakan juga harus diubah.

String query = "INSERT INTO `tbl_user`(`username`, `password`) VALUES (?,?)";

Cari kode seperti diatas kemudian tambah kolom jenis_kelamin seperti kode dii bawah ini.

String query = "INSERT INTO `tbl_user`(`username`, `password`,`jenis_kelamin`) VALUES (?,?,?)";

Lakukan debug terlebih dahulu, kemudian coba jalankan program dan periksa apakah data jenis kelamin masuk kedalam database.

Gambar 5

Penutup

Sekian tutorial untuk Cara Memasukan Data RadioButton Ke Dalam Database Pada JavaFx, untuk yang belum paham silahakan berdiskusi melalui kolom komentar.

Cara Menggunakan Google Maps di Dalam Java Swing

2017-06-15T23:14:00.003+07:00

Pembukaan

Karena di fanspage banyak yang request bagaimana meng-include-kan google maps ke dalam program java, kali ini saya akan berikan satu contoh sederhana untuk kasus tersebut dan mungkin bisa kita teruskan pada tutorial selanjutnya. Cara Menggunakan Google Maps Ke Dalam Java Swing yang paling mudah adalah menggunakan library untuk load file Web. Library ini adalah JxBrowser yang dapat anda download dari link berikut.

Download JxBrowser

Pembahasan

Tidak perlu banyak mukodimah, hal yang perlu di buat adalah komponen yang akan digunakan adalah JFrame dan JPanel. Buat sebuah project sederhana dengan nama JGoogleMaps (boleh nama lain), kemudian tambah JFrame baru. Setelah JFrame ditambah selanjutnya pada GUI builder tambahkan JPanel.

Gambar 1

Setelah membuat layout aplikasi, pada komponen JPanel ubah variable Name atau nama variabel menjadi panelMaps. Setelah memiliki variabel kita cek layout yang digunakan jika Free Design silahkan ubah ke Border Layout. Cara merubah ke border layout sangat mudah cukup klik kanan pada JPanel > Pilih Set Layout > Pilih Border Layout. Lihat atau cek pada Navigator seperti contoh pada gambar dibawah ini;

Gambar 2

Kembali kebagian source (kode) , tambahkan method baru dibawah block

    public JGoogleMaps_one() {
        initComponents();
    }

jika nama class (frame anda) JGoogleMaps_one, jika tidak bisa di cek saja pasti ada block tersebut di bagian atas. Tambahkan kode program berikut.

    private void loadMaps(){
        Browser browser = new Browser();
        String dir = System.getProperty("user.dir");
        browser.loadURL(dir+"\\src\\jgooglemaps\\maps_jsc.html");
        BrowserView view = new BrowserView(browser);
        panelMaps.add(view, BorderLayout.CENTER);
        this.setLocationRelativeTo(null);
        this.pack();
        this.setVisible(true); 
    }

Dipastikan kode diatas akan menimbulkan error, nah cara menanganinya yaitu,

Trial JxBrowser yang selama 30 hari yang sudah di download sebelumnya, silahkan di extrak karena berupa zip file. Perlu di ingat anda harus dapatkan license dari JxBrowser dengan cara evaluate, nanti license akan dikirim melalui email yang digunakan untuk mendaftar pastikan juga license yang dikirim anda download.
Setelah extrak, kita kembali ke netbeans untuk import library JxBrowser dengan cara klik kanan pada Libraries > Add JAR/Folder.

Gambar 3

Cari folder lib pada file JxBrowser yang sudah kita extrak, maka kita akan dapatkan 5 File JAR. Jika anda pengguna windows anda dapat import file jxbrowser-6.14.1 dengan jxbrowser-win32-6.14.1,jika linux pilih jxbrowser-linux32-6.14.1 atau jxbrowser-linux64-6.14.1 dan untuk mac os jxbrowser-mac-6.14.1.
Kemudian import kembali library untuk license agar file JxBrowser dapat berjalan di program kita. Caranya sama hanya saja anda memasukan file license.jar yang sudah didownload melalui email. Adapun hasil akhirnya yang di import akan seperti gambar dibawah.

Gambar 4
Pada file maps_jsc.html ini adalah file html google maps yang sudah anda rancang, jika belum bisa pelajari pada blog ini Java Source Code. File ini dimasukan kedalam folder package jgooglemaps saja, kenapa? agar mempermudah pemanggilan saja.

Gambar 5
Setelah import selesai, ternyata masih ada merah-merah, nah anda hanya cukup klik kanan pada source atau kode program kemudian pilih Fix Import.

Gambar 6
Akan ada tampil pilihan librari yang di import, cukup klik tombol OK maka semua masalah beres.

Gambar 7

Semua masalah sudah fix, coba jalankan kode program yang sudah selesai tadi. Pasti masih tidak muncul/ tidak bekerja google maps nya. Tahap akhir adalah kita panggil method loadMaps() tadi setiap program dijalankan pada JGoogleMaps_one() jadi seperti berikut.

    public JGoogleMaps_one() {
        initComponents();
        loadMaps();
    }

Baru kita bisa jalankan kode program yang tadi, JANGAN LUPA UNTUK DI DEBUG agar menampilkan pesan error yang tersisa jika masih ada yang keliru pada file. Jika sukses akan menghasilkan gambar seperti dibawah ini.

Gambar 8

Penutup

Sebenarnya JxBrowser ini berfungsi untuk mengeksekusi url, html, javascript,css dan sebagainya pada program java (Bisa lihat dokumentasinya). Membuat program java kita menjadi seperti browser yang bisa menampilkan suatu website didalam aplikasi desktop. Kita bisa load di berbagai komponen kontainer tergantung kebutuhan. Namun sayangnya JxBrowser tidak bersifat OpenSource, jadi kita hanya diberi batas penggunaan 30 Hari (tadak menutup kemungkinan ada versi ilegal).

Cara Memasukan Data TextField Ke Dalam Database Pada JavaFX

2017-06-11T13:03:00.001+07:00

Pembukaan

Pada tutorial dengan judul Cara Memasukan Data TextField Ke Dalam Database Pada JavaFX akan membahas bagaimana cara memasukan data kedalam database MySQL. Masih pada project yang sama dengan sebelumnya, jika tidak tahu bisa mengkuti tutorial dari awal.

Pembahasan

Hal yang perlu dipersiaplan adalah sebuah database untuk project ini, sebelumnya kita juga sudah belajar mengenai koneksi database namun hanya menggunakan sample database dari bawaan MySQL. Buatlah database dengan nama javafx_historikal, dan buatlah sebuah tabel dengan nama tabel tbl_user.

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE DATABASE IF NOT EXISTS `javafx_historikal` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `javafx_historikal`;

CREATE TABLE `tbl_user` (
  `id` int(11) NOT NULL,
  `username` varchar(30) NOT NULL,
  `password` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `tbl_user`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `tbl_user`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Diatas adalah script SQL, silahkan sesuaikan saja dengan database yang anda miliki. Selanjutnya kita akan buat sebuah form dengan isi TextField dan Button. Form ini berada pada file paneUser.fxml pada package tutorialjavafx, tambah komponen Controls TextField, PasswordField, Label dan Button seperti gambar berikut (pastikan anda ganti text nya juga).

Gambar 1

Jika sudah, kita beri id masing-masing komponen yang di anggap penting dalam transaksi yaitu TextField, PasswordField dan Button. Masing-masing beri nama id dengan txtUsername, txtPassword dan btnSimpan.

Gambar 2

Setelah sukses dengan fx:id, kita harus menentukan komponen yang menjalankan perintah simpan. Didalam kasus ini btnSimpan (Tombol Simpan) lah yang berhak. Tentukan nama method untuk btnSimpan, sebagai contoh btnSimpanClicked pada On Mouse Clicked. Terakhir simpan dan silahkan keluar dari Scene Builde.

Selanjutnya kita akan buat sebuah controller baru untuk menjalankan perintah-perintah yang ada pada file paneUser.fxml. Sebenarnya bisa saja satu controller dengan Interface_homeController.java, namun kita akan kesusahan apabila ada banyak transaksi didalam tiap file fxml. Silahkan tambah kode berikut fx:controller="controller.paneUserController" di dalam Elemen ScrollPane seperti gambar berikut.

Gambar 3

Kemudian Make Controller pada file paneUser.fxml, sehingga seara otomatis akan menggenerate Controller.

Gambar 4

Pada method btnSimpanClicked kita akan memasukan kode program untuk menginputkan data yang ada pada textfield kedalam database. Sebelumnya mari kita atur database pada file koneksi.java, ubah host yang lama menjadi yang baru.

String host = "jdbc:mysql://localhost/javafx_historikal";

Tambah beberapa baris kode untuk pemanggilan library sql, atau sebenarnya ini adalah class yang berfungsi untuk mengeksekusi perintah sql. Tambahkan tepat setelah kode program public class paneUserController implements Initializable, sehingga menjadi;

public class paneUserController implements Initializable {
    Connection conn = koneksi.koneksi();
    PreparedStatement pst;

Jika ada yang error kita silahkan import saja library yang di gunakan, bisa dengan cara klik kanan pada kode (source) kemudian pilih Fix Import. Setelah itu baru kita tambah kode program berikut didalam method btnSimpanClicked.

    private void btnSimpanClicked(MouseEvent event) {
        Alert alert = new Alert(AlertType.CONFIRMATION);
        alert.setTitle("Apakah anda akan menyimpan data");
        alert.setHeaderText(null);
        alert.setContentText("Tekan OK untuk menyimpan data, Cencel untuk batal.");
        Optional result = alert.showAndWait();
        if (result.get() == ButtonType.OK){
            try {
                String query = "INSERT INTO `tbl_user`(`username`, `password`) VALUES (?,?)";
                pst = conn.prepareStatement(query);
                pst.setString(1, txtUsername.getText());
                pst.setString(2, txtPassword.getText());
                pst.execute();
                Alert berhasil = new Alert(AlertType.INFORMATION);
                berhasil.setTitle("Informasi Database");
                berhasil.setHeaderText(null);
                berhasil.setContentText("Data "+txtUsername.getText()+" Telah Berhasil Disimpan\n\nTerima Kasih.");   
                berhasil.showAndWait();
                pst.close();
            } catch (SQLException e) {
                Alert gagal = new Alert(AlertType.ERROR);
                gagal.setTitle("Informasi Database");
                gagal.setHeaderText(null);
                gagal.setContentText("Data "+txtUsername.getText()+" Tidak Dapat Disimpan\n\nSilahkan Di Ulang.\n"
                        + "Error = "+e);
                gagal.showAndWait();
            }
        } else {
            alert.close();
        }
    }

Coba jalankan project, JANGAN LUPA DI DEBUG agar kita tahu apakah masih ada error kode program di dalam project kita. Jika dijalankan ternyata berhasil, perhatikan pada gambar dibawah jika berhasil di jalankan.

Gambar 5

Kita juga bisa lihat data yang ada pada database apabila data sudah berhasil di masukan, contohnya satu data yang ada pada gambar.

Gambar 6

Penutup

Textfield dan PasswordField adalah komponen Controls yang sangat mirip, hanya saja fungsinya yang berbeda. Dimana satu untuk text biasa dan satu lagi untuk tipe password. Sangat mudah dan tidak jauh berbeda dengan penggunaan pada Swing.

Cara Membuat Alert Pada JavaFX

2017-06-10T00:02:00.000+07:00

Pembukaan

Sebuah kotak dialog peringatan merupakan hal yang penting, kenapa penting? hal ini menyangkut dengan keamanan dari aplikasi itu sendiri. Jika transaksi pada sebuah aplikasi langsng tereksekusi tanpa adanya perintah persetujuan maka ini tidak aman. Sebagai contoh apabila seorang user salah menekan tombol (ex. tombol hapus) maka transaksi akan tereksekusi dan tidak ada pembatalan yang dilakukan. Bayangkan saja jika yang terhapus adalah data perusahaan yang sangat penting dan bernilai milyaran. Dengan adanya dialog peringatan maka ini sangat memungkinkan untuk mengurangi kesalahan pada user yang bersifat merugikan. Alert merupakan pilihan utama yang disediakan oleh JavaFX, alert adalah dialog peringatan ataupun informasi yang bsia ditampilkan sebelum mengeksekusi suatu perintah. Pada java swing ada yang namananya JOptionPane yang fungsinya juga sama dengan Alert. Alert di JavaFX hanya bisa berjalan pada versi java 8.09 keatas, sehingga seperti saran saya sebelumnya harus menggunakan minimal 8.11.

Pembahasan

Dalam tutorial kali ini kita akan membuat beberapa tombol peringatan (Alert), masih pada file tutorial yang sama dengan sebelumnya. Silahkan kita buka file interface_home.fxml terlebih dahulu dengan Scene Builder, jika sudah tambahkan beberapa Button atau anda bisa hanya menambah satu Button saja. Saya ingatkan komponen Button adalah termasuk dari komponen Controls, perhatikan contoh pada gambar dengan masing-masing tombol memiliki text Alert 1, Alert 2 dan Alert 3.

Gambar 1

Setelah selesai memberi text masing-masing tombol, kini kita buat id pada masing-masing tombol dimana Alert 1 = alertOne, Alert 2 = alertTwo dan Alert 3 = alertThree.

Gambar 2

Sebelum mengeksekusi program, kita lebih baik mengatur perintah input seperti apa yang dapat menjalankan program. Sama halnya pada menu kita bisa menggunakan On Mouse Clicked atau bisa juga On Action, keduanya sama saja menggunakan inputan mouse clicked. Silahkan kita gunakan saja On Mouse Clicked dengan masing-masing nama alertOneClicked, alertTwoClicked, dan alertThreeClicked.

Setelah masing-masing dibuat, "JANGAN LUPA UNTUK MENYIMPAN PERUBAHAN" dan scene builder bisa di close. Masih pada file yang sama yaitu interface_home.fxml, buat atau generate controller pada file tersebut (gambar dibawah hasil generate).

Gambar 3

Kemudian pada alertOneClicked kita akan buat Alert informasi, ketikan kode berikut di dalam method.

    private void alertOneClicked(MouseEvent event) {
        Alert alert = new Alert(AlertType.INFORMATION);
        alert.setTitle("Ini Title Alert");
        alert.setHeaderText(null);
        alert.setContentText("Ini isi dari alert informasinya!\n\nwww.java-sc.com");
        alert.showAndWait();
    }

Hasilnya akan seperti gambar berikut dibawah ini.

Gambar 4

Atau bisa juga menggunakan hearder dalam dialog, cara nya tinggal ubah saja null menjadi sebuah string, perhatikan contohnya dibawah.

    private void alertOneClicked(MouseEvent event) {
        Alert alert = new Alert(AlertType.INFORMATION);
        alert.setTitle("Ini Title Alert");
        alert.setHeaderText("Ini Header Dari Alert");
        alert.setContentText("Ini isi dari alert informasinya!\n\nwww.java-sc.com");
        alert.showAndWait();
    }

Dapat dilihat hasilnya pada gambar berikut, dimana jika null header tidak akan ditampilkan pada Alert.

Gambar 5

Contoh selanjutnya adalah membuat Alert untuk peringatan Warning, masih dalam tombol yang sama kita hanya mengganti AlertType nya saja.

    private void alertOneClicked(MouseEvent event) {
        Alert alert = new Alert(AlertType.WARNING);
        alert.setTitle("Ini Title Alert");
        alert.setHeaderText("Ini Header Dari Alert");
        alert.setContentText("Ini isi dari alert informasinya!\n\nwww.java-sc.com");
        alert.showAndWait();
    }

Gambar dibawah adalah hasilnya.

Gambar 6

Terakhir tipe Alert yang sederhana adalah bentuk atau tipe Error, sama seperti warning yang diganti hanya AlertType saja.

    private void alertOneClicked(MouseEvent event) {
        Alert alert = new Alert(AlertType.ERROR);
        alert.setTitle("Ini Title Alert");
        alert.setHeaderText("Ini Header Dari Alert");
        alert.setContentText("Ini isi dari alert informasinya!\n\nwww.java-sc.com");
        alert.showAndWait();
    }

Sebenarnya yang berubah adalah icon yang menyimbolkan masing-masing tipe Alert, lihat saja tipe error dengan icon tanda Silang Merah.

Gambar 7

Kemudian kita beralih ketombol Alert 2 dimana kita akan cobakan membuat Alert konfirmasi, perhatikan contoh kode program berikut.

    private void alertTwoClicked(MouseEvent event) {
        Alert alert = new Alert(AlertType.CONFIRMATION);
        alert.setTitle("Apakah anda akan keluar?");
        alert.setHeaderText(null);
        alert.setContentText("Tekan OK untuk keluar tekan Cencel Untuk batal");
        Optional result = alert.showAndWait();
        if (result.get() == ButtonType.OK){
            Alert keluar = new Alert(AlertType.ERROR);
            keluar.setTitle("www.java-sc.com");
            keluar.setHeaderText(null);
            keluar.setContentText("YEEEEY KAMU PENCET TOMBOL OK!!!");
            keluar.showAndWait();
        } else {
            alert.close();
        }
    }

Kode diatas akan menampilkan seperti gambar dibawah, jadi jika tombol OK di tekan akan menampilkan Alert dengan tipe Error dan jika tekan Cencel Alert konfirmasi akan keluar.

Gambar 8

Selain tombol Ok dan Cencel, kita bisa juga membuat beberapa tombol lain tergantung dengan kebutuhan dari program yang di buat. Contoh masih pada Alert 2 kita edit menjadi seperti kode program dibawah.

    private void alertTwoClicked(MouseEvent event) {
        Alert alert = new Alert(AlertType.CONFIRMATION);
        alert.setTitle("WWW.JAVA-SC.COM");
        alert.setHeaderText("ini Tombol Pilihan Cinta :v ");
        alert.setContentText("Mau Pilih Tombol Yang Mana? Hayoooo.....");      
        ButtonType tombol1 = new ButtonType("Cinta 1");
        ButtonType tombol2 = new ButtonType("Cinta 2");
        ButtonType tombol3 = new ButtonType("Cinta 3");
        ButtonType tombol4 = new ButtonType("Cinta 4");
        ButtonType tombol5 = new ButtonType("Batal Aja");
        alert.getButtonTypes().setAll(tombol1, tombol2, tombol3, tombol4,tombol5);
        Optional result = alert.showAndWait();
        if (result.get() == tombol1) {
            Alert pilihansatu = new Alert(AlertType.INFORMATION);
            pilihansatu.setTitle("Kamu Pilih Saya");
            pilihansatu.setHeaderText(null);
            pilihansatu.setContentText("ini jika pilih no 1!\n\nwww.java-sc.com");
            pilihansatu.showAndWait();
        }
        else if (result.get() == tombol2){
            Alert pilihandua = new Alert(AlertType.WARNING);
            pilihandua.setTitle("Kamu Pilih Saya");
            pilihandua.setHeaderText(null);
            pilihandua.setContentText("ini jika pilih no 2!\n\nwww.java-sc.com");
            pilihandua.showAndWait();
        }
        else if (result.get() == tombol3){
            Alert pilihantiga = new Alert(AlertType.ERROR);
            pilihantiga.setTitle("Kamu Pilih Saya");
            pilihantiga.setHeaderText(null);
            pilihantiga.setContentText("ini jika pilih no 3!\n\nwww.java-sc.com");
            pilihantiga.showAndWait();
        } 
        else if (result.get() == tombol4){
            Alert pilihanempat = new Alert(AlertType.INFORMATION);
            pilihanempat.setTitle("Kamu Pilih Saya");
            pilihanempat.setHeaderText(null);
            pilihanempat.setContentText("ini jika pilih no 4!\n\nwww.java-sc.com");
            pilihanempat.show();
        }
        else {
            alert.close();
        }
    }

Hasilnya terlihat pada gambar dibawah ini, dengan 5 tombol yang berbeda.

Gambar 9

Pada tombol selanjutnya (Alert 3) kita akan coba untuk menampilkan dialog error, didalamnya ada output dari error yang biasanya berguna untuk Exception.

    private void alertThreeClicked(MouseEvent event) {
        
        try {
            int array[] = {1,2};
            System.out.println(array[4]);
        } catch (Exception e) {
            Alert alert = new Alert(AlertType.ERROR);
            alert.setTitle("Error Exception");
            alert.setHeaderText("Apa ini header ?");
            TextArea area = new TextArea("Ini Error Array"+e.toString()+"\n\nwww.java-sc.com");
            area.setEditable(false);
            area.setWrapText(true);
            area.setMaxWidth(Double.MAX_VALUE);
            area.setMaxHeight(Double.MAX_VALUE);
            GridPane.setVgrow(area, Priority.ALWAYS);
            GridPane.setHgrow(area, Priority.ALWAYS);
            GridPane pane = new GridPane();
            pane.setMaxWidth(Double.MAX_VALUE);
            pane.add(area, 0, 0);
            alert.getDialogPane().setExpandableContent(pane);
            alert.showAndWait();
        }        
    }

Untuk kode diatas bisa dilihat pada gambar dibawah.

Gambar 10

Penutup

Hasil akhir dari seluruh kode program yang sudah kita buat di tampilkan pada gambar dibawah, sebenarnya untuk Alert ini alangkah baiknya kita buat dalam suatu class yang menyimpan seluruh fungsi. Kenapa? karena jika alert digunakan berkali-kali maka syntax program yang di ketikan akan begitu panjang.

Gambar 11

Berikut adalah daftar library yang digunakan dalam pembuatan Alert.
import java.io.IOException;
import java.net.URL;
import java.util.Optional;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.geometry.Insets;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.control.ButtonType;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TextArea;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.paint.Color;

Cara Membuat Koneksi Database di JavaFX

2017-06-09T20:03:00.001+07:00

Pembukaan

Sebenarnya koneksi database pada JavaFX sama dengan koneksi database Java Swing (Lihat di Cara Membuat Program Koneksi Database di Java dan MySQL) dan memang tidak ada bedanya sama sekali. Tetapi, karena kita dalam satu pembahasan yang lain, kali ini saya akan berikan saja contoh koneksi di JavaFX.

Pembahasan

Membuat Koneksi Database di JavaFX hanya memerlukan driver dari database yang digunakan dan sebuah class untuk menyimpan kode program koneksi. Pertama buatlah file java dengan nama koneksi di package tutorialjavafx.

Gambar 1

Setelah itu, kita tambahkan Library MySQL JDBC Driver kedalam project dengan cara klik kanan Library > Add Library.

Gambar 2

Setelah ketemu MySQL JDBC Driver, klik tombol Add Library sehingga secara otomatis akan menambah ke folder Library di project.

Gambar 3

Buka kembali file koneksi.java, edit dan tambahkan kode program dibawah ini.

package tutorialjavafx;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

/**
 *
 * @author Java Source Code
 */
public class koneksi {
    Connection conn = null;
    public static Connection koneksi(){
        String driver = "com.mysql.jdbc.Driver";
        String host = "jdbc:mysql://localhost/test";
        String user = "root";
        String pass = "";
        try {
            Class.forName(driver);
            Connection conn = DriverManager.getConnection(host,user,pass);
            System.out.println("Koneksi Berhasil");
            return conn;
        } catch (ClassNotFoundException | SQLException e) {
            System.out.println("Koneksi Gagal "+e);
        }
        return null;
    }
}

Kemudian kita akan panggil didalam main method kita, silahkan buka file TutorialJavaFX.java dan tambahkan koneksi.koneksi(); dibawah method start() seperti ini.

    public void start(Stage stage) throws Exception {
        koneksi.koneksi();
        Parent root = FXMLLoader.load(getClass().getResource("interface_home.fxml"));
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }

Coba jalankan project dan jangan lupa untuk merunning MySQL di XAMPP terlebih dahulu apabila menggunakannya. Gambar dibawah akan menjelaskan kalau misalnya koneksi sudah berhasil.

Gambar 4

Penutupan

Jika ingin menggunakan database lain seperti Postgress atau Oracle kita hanya menyesuaikan saja dengan syntax java, karena tidak ada perbedaan JavaFX dengan java. Karena JavaFX merupakan java itu sendiri.

Cara Menimpa Container Utama dengan Container Lain Pada JavaFX

2017-06-09T01:41:00.001+07:00

Pembukaan

Container pada JavaFX ada banyak, sehingga memungkinkan kita untuk membuat sebuah program/ layout dari program secara kostum (bebas). Dalam tutorial kali ini Java-Sc akan menerapkan Cara Menimpa Container Utama dengan Container Lain di atasnya. Kenapa harus ditimpa? ini dikarenakan apabila kita menggunakan banyak container dan dipanggil menjadi sebuah popup tentu akan merugikan dari segi interaksi manusia dengan komputer. Bayangkan saja jika dalam satu program memiliki 5 menu dan setiap menu terdapat tombol untuk CRUD. Bayangkan juga jika 5x4 saja sudah 20 Container yang digunakan sebagai popup, didalam popup tentu kita harus memasukan tombol Close atau Cencel. Sehingga dalam pembangunan sebuah program yang seharusnya bisa meminimalisir fungsi malah memubazirkan fungsi. "Tapi sebenarnya ini hanya Pilihan saja"

Pembahasan

Masih pada project yang sama dengan tutorial sebelumnya, kita memiliki 4 menu utama yaitu Home, Data Pegawai, Data Historikal, dan Data User. Kita akan buat 4 file FXML yang di dalamnya terdapat Container JavaFX.

Paling pertama adalah buka file interface_home.fxml dengan Scene Builder, kemudian pada bagian kanan (sebelah menu) terdapat lembar kosong yang sebenarnya sudah terisi dengan Container AncorPane bawaan dari ScrollPane. Sebenarnya fokus utamanya adalah pada ScrollPane, sehingga kita dapat menggunakan ScrollPane ini kedalam File FXML lainnya. Caranya adalah dengan Copy Paste Container ScrollPane, klik kanan pada komponen dan pilih Copy.

Gambar 1

Jika sudah di copy, buat file baru yaitu Empty FXML pada package tutorialjavafx.

Gambar 2

Ubah nama file menjadi paneHome, kemudian tekan tombol Finish. Jika sudah buka file tersebut dengan Scene Builde, kemudian Paste komponen ScrollPane yang sudah kita Copy tadi. Sebelum di Paste pastikan Container yang lama terhapus.

Gambar 3

Jangan lupa untuk disimpan, karena satu file sudah selesai kita bisa gunakan file paneHome untuk beberapa menu berikutnya. Caranya copy paste juga, hanya saja yang dicopy paste adalah file FXML (paneHome.fxml).

Gambar 4

Dan setelah di Copy file paneHome.fxml tadi, paste saja didalam package tutorialjavafx dan nama nya akan menjadi paneHome_1.fxml. Rename nama tersebut menjadi panePegawai dan lakukan hal yang sama untuk paneHistorikal dan paneUser.

Gambar 5

Perhatikan file yang sudah dibuat tadi, sekiranya seperti yang ada pada gambar dibawah ini;

Gambar 6

Untuk melakukan percobaan, kita bisa ganti background dari masing-masing Container AnchorPane secara berbeda (sudah ada pada tutorial pertama).

Jadi bagaimana cara menimpa komponen tersebut? dan menggunakan apa?

Pada tutorial sebelumnya mengenai On Mouse Clicked kita sudah mempelajari merubah background menu, nah kali ini kita akan coba menggunakan fungsi untuk menimpa Container utama dengan Container baru. Buka saja file Controller Interface_homeController.java, karena kita akan memanggilnya menggunakan event Mouse Clicked. Utama dan yang paling utama adalah buat fx:id dahulu untuk ScrollPane pada file interface_home.fxml, karena komponen ini lah yang akan kita timpa. Silahkan buka dengan SceneBuilder dan beri id dengan nama paneSuper.

Gambar 7

Setelah itu jangan lupa untuk disimpan, dan kembali ke Netbeans. Lakukan Make Controller kembali pada file interface_home.fxml, maka akan ada id paneSuper didalam file Interface_homeController.java.

Pada tiap masing-masing method menu, kita tambahkan kode untuk memanggil file FXML lainnya tepat setelah kode program untuk merubah background dari menu.

menuHomeClicked

    private void menuHomeClicked(MouseEvent event) {
        try {
            menuHome.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
            menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            ScrollPane sp = FXMLLoader.load(getClass().getResource("/tutorialjavafx/paneHome.fxml"));
            paneSuper.setContent(sp);
        } catch (IOException e) {
            System.out.println(e);
        } 
    }

menuPegawaiClicked

    private void menuPegawaiClicked(MouseEvent event) {
        try {
            menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuPegawai.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
            menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            ScrollPane sp = FXMLLoader.load(getClass().getResource("/tutorialjavafx/panePegawai.fxml"));
            paneSuper.setContent(sp);
        } catch (IOException e) {
            System.out.println(e);
        } 
    }

menuHistoriClicked

    private void menuHistoriClicked(MouseEvent event) {
        try {
            menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuHistorikal.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
            menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            ScrollPane sp = FXMLLoader.load(getClass().getResource("/tutorialjavafx/paneHistorikal.fxml"));
            paneSuper.setContent(sp);
        } catch (IOException e) {
            System.out.println(e);            
        }  
    }

menuUserClicked

    private void menuUserClicked(MouseEvent event) {
        try {
            menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            menuUser.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
            menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
            ScrollPane sp = FXMLLoader.load(getClass().getResource("/tutorialjavafx/paneUser.fxml"));
            paneSuper.setContent(sp);
        } catch (IOException e) {
            System.out.println(e);                        
        }     
    }

Nah jika sudah kita coba jalankan programnya, akan tetapi jangan lupa untuk di Debug terlebih dahulu kemudian baru di Run. Perhatikan gambar dibawah untuk melihat hasil dari kode program (tutorial Cara Menimpa Container Utama dengan Container Lain Pada JavaFX).

Gambar 8

Penutupan

Jadi didalam kode program diatas terdapat try catch block, kita menggunakan block tersebut untuk mengetahui error pada syntak. Selain itu untuk interaksi IO memang sangat dibutuhkan try catch, jika tidak menggunakan maka kode program akan error. Jadi berikut adalah list untuk library yang digunakan dalam file Interface_homeController.java.
import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.geometry.Insets;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.paint.Color;
Silahkan di priksa apabila ada error pada syntak program yang dikerjakan.

Cara Membuat Action Click Untuk Mengubah Backround Pada JavaFX

2017-06-08T22:26:00.004+07:00

Pembukaan

Melanjutkan tutorial Cara Membuat Interface Aplikasi Pada JavaFx yang sudah ada, maka kita akan melanjutkan ke tahap berikutnya. Kali ini kita akan membahas mengenai Controller dan Event pada JavaFX yaitu MouseClick. Kenpa harus mouse clicked saja? jawabannya dimana event yang paling sering digunakan adalah event ini.

Pada JavaFX ada yang namanya controller, sebenarnya ini adalah salah satu konsep MVC pada sebuah pemrograman. Dimana mengandalkan setiap file memiliki fungsinya masing-masing namun masih dapat berintegrasi atau terhubung satu dengan yang lain. Di JavaFX, controller biasanya digunakan untuk menyimpan fungsi-fungsi yang diberikan didalam file View atau kita sebut saja file FXML. Sebagai contoh controller menyimpan variabel, controller menyimpan event atau pun controller menyimpan method yang di buat sendiri.

Pembahasan

Pada tutorial Cara Membuat Action Click Untuk Mengubah Backround Pada JavaFX menerapkan event mouseclicked dengan eksekusi baris kode yang sederhana saja. Mouse Clicked ini diterapkan pada pembuatan menu sidebar pada program. Apa yang pertama kali dilakukan ? Yang sangat penting adalah pemberian id atau variabel pada masing-masing komponen. Di sini kita tidak perlu melakukan koding untuk pemberian id, cukup buka file FXML dengan Scene Builder kemudian ubah di dalamnya. Ketika file sudah di buka pada Scene Builder, pilih bagian Code di sidebar kanan, kemudian cari text Identity. Jika tidak menemukan, coba pilih dahulu komponen yang mau di beri action. Jika sudah ketemu silahkan beri id (fx:id) pada masing-masing komponen menu, sebagai contoh jika mengikuti tutorial kita akan membuat menu yang dapat di click.
Perhatikan, kita memiliki 5 menu masing-masing dari menu kita beri id dengan nama;

Gambar 1

menuHome
menuPegawai
menuHistorikal
menuUser
menuLogout

Setelah selesai dengan pemberian id tiap komponen label (menu), selanjutnya kita berikan action pada masing-masing komponen tersebut.Caranya mudah, anda hanya cukup scroll kebawah hingga menemukan On Mouse Clicked pada menu Code (dibasah fx:id). Selanjutanya beri nama masing-masing event atau action seperti berikut;

Gambar 2

menuHomeClicked
menuPegawaiClicked
menuHistoriClicked
menuUserClicked
menuLogoutClicked

Selanjutnya tahap diatas sudah selesai, dan kita akan ketahap pengkodingan untuk mengatur perintah apa saja yang akan dilakukan jika menu di click. Kembali dan close saja Scene Builder (JANGAN LUPA UNTUK DI SIMPAN), pada netbeans kita edit source pada file interface_home.fxml. Cara membuka source dari file tersebut dengan klik kanan pada interface_home.fxml > pilih Edit.

Gambar 3

Selanjutnya kita tambahkan atribut controller di dalam baris pertama syntax Container, sebagai contoh karena menggunakan AnchorPane maka tambahkan kode tersebut di dalamnya. Berikut adalah kode default jika tidak ada atribut controller;

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="547.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">

Dan tambahkan pada bagian akhir dari kode tepat sebelum tutup kurung siku (>) seperti dibawah ini.

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="547.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="controller.Interface_homeController">

Dimana controller.Interface_homeController terdiri dari package dan nama klass, controller merupakan nama package pada project sedangkan Interface_homeController adalah nama java class yang berguna untuk menyimpan seluruh code atau fungsi dari file interface_home.fxml.

Gambar 4

Selanjutnya kita akan generate kode-kode yang ada pada file interface_fxml yang sebelumnya sudah di atur pada scene builder, yang mana yaitu id pada komponen dan action event pada komponen.

Caranya dengan klik kanan pada file interface_home.fxml kemudian pilih Make Controller, secara otomatis akan mengarahkan kebagian file Interface_homeController.java di package controller.

Gambar 5

Jika berhasil akan ada method berdasarkan On Mouse Clicked dan ada juga id yang berupa variabel komponen. Dalam kasus ini kita akan buat event aksi yang sederhana saja, dimana menu akan berubah warna backgroud jika menu di klik.

menuHomeClicked

    private void menuHomeClicked(MouseEvent event) {
        menuHome.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
        menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
    }

menuPegawaiClicked

    private void menuPegawaiClicked(MouseEvent event) {
        menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuPegawai.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
        menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
    }

menuHistoriClicked

    private void menuHistoriClicked(MouseEvent event) {
        menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuHistorikal.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
        menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
    }

menuUserClicked

    private void menuUserClicked(MouseEvent event) {
        menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuUser.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
        menuLogout.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
    }

menuLogoutClicked

    private void menuLogoutClicked(MouseEvent event) {
        menuHome.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuPegawai.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuHistorikal.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuUser.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
        menuLogout.setBackground(new Background(new BackgroundFill(Color.valueOf("#29B6F6"), CornerRadii.EMPTY, Insets.EMPTY)));
    }

Jika sudah silahkan simpan perubahan, kode diatas tidak akan bisa berjalan karena pada main method kita masih menggunakan syntax default dan tidak ada perintah untuk memanggil file FXML. Maka buka dan edit terlebih dahulu class TutorialJavaFX.java didalam package tutorialjava, edit degan kode berikut;

package tutorialjavafx;

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author Java Source Code
 */
public class TutorialJavaFX extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("interface_home.fxml"));
        
        Scene scene = new Scene(root);
        
        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}

Barulah kita bisa coba jalankan kode program yang kita buat, perlu di ingat lakukan DEBUG terlebih dahulu, karena jika tidak kode program tidak akan bsia terbaca dan akan mengalami error java result 1. Perhatikan saja gambar dibawah ini yang merupakan hasil dari kode yang sudah dibuat.

Gambar 6

Penutupan

Masih banyak lagi perintah atau event yang bisa kita jalankan ketika komponen di klik, namun ini adalah salah satu contoh saja. Selanjutnya kita akan bahas lebih banyak lagi pada tutorial JavaFX ini.