Sunday, January 8, 2023

Membuat Mata Uang Rupiah Menggunakan Javascript

 


<!DOCTYPE html>

<html>

<head>

<title>Membuat Mata Uang Rupiah Menggunakan Javascript</title>

</head>

<body>

<style type="text/css">

body {

font-family: sans-serif;

}

.kotak {

width: 350px;

margin: auto;

margin-top: 15px;

padding: 10px;

}

p{

margin-bottom: 20px;

color: #0004ff;

}

input {

text-align: right;

width: 100%;

margin-bottom: 20px;

margin-top: 10px;

padding: 7px 10px;

font-size: 18px;

}

</style>

<center>

<h1>Format Rupiah </h1>

</center>

<div class="kotak">

<span>Nominal Rupiah. :</span>

<input type="text" id="rupiah"/>

</div>

<script type="text/javascript">

var rupiah = document.getElementById('rupiah');

rupiah.addEventListener('keyup', function(e){

// tambahkan 'Rp.' pada saat form di ketik

// fungsi formatRupiah() untuk mengubah angka yang di ketik menjadi format angka

rupiah.value = formatRupiah(this.value, 'Rp. ');

});

 

/* Fungsi formatRupiah */

function formatRupiah(angka, prefix){

var number_string = angka.replace(/[^,\d]/g, '').toString(),

split    = number_string.split(','),

sisa      = split[0].length % 3,

rupiah      = split[0].substr(0, sisa),

ribuan      = split[0].substr(sisa).match(/\d{3}/gi);

// tambahkan titik jika yang di input sudah menjadi angka ribuan

if(ribuan){

separator = sisa ? '.' : '';

rupiah += separator + ribuan.join('.');

rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');

}

</script>

</body>

</html>




Membuat Analog & Digital Clock Menggunakan Javascript

 


1. Digital Clock

<!DOCTYPE html>

<html>

<head>

<title>Membuat Jam Digital Menggunakan Javascript</title>

</head>

<body>

<style>

h1,h2,p,a{

font-family: sans-serif;

font-weight: normal;

}

.jam-digital {

overflow: hidden;

width: 330px;

margin: 20px auto;

border: 5px solid #efefef;

}

.kotak{

float: left;

width: 110px;

height: 100px;

background-color: #189fff;

}

.jam-digital p {

color: #fff;

font-size: 36px;

text-align: center;

margin-top: 30px;

}

</style>

<center>

<h1>Jam Digital </h1>

</center>

<div class="jam-digital">

<div class="kotak">

<p id="jam"></p>

</div>

<div class="kotak">

<p id="menit"></p>

</div>

<div class="kotak">

<p id="detik"></p>

</div>

</div>

<script>

window.setTimeout("waktu()", 1000);

function waktu() {

var waktu = new Date();

setTimeout("waktu()", 1000);

document.getElementById("jam").innerHTML = waktu.getHours();

document.getElementById("menit").innerHTML = waktu.getMinutes();

document.getElementById("detik").innerHTML = waktu.getSeconds();

}

</script>

</body>

</html>




2. Analog Clock

<!DOCTYPE html>

<html>

<head>

<title>Membuat Jam Analog Menggunakan Javascript</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

<style type="text/css">

h1,h2,p,a{

font-family: sans-serif;

font-weight: normal;

}

.jam_analog {

background: #e7f2f7;

position: relative;

width: 240px;

height: 240px;

border: 16px solid #52b6f0;

border-radius: 50%;

padding: 20px;

margin:20px auto;

}

.xxx {

height: 100%;

width: 100%;

position: relative;

}

.jarum {

position: absolute;

width: 50%;

background: #232323;

top: 50%;

transform: rotate(90deg);

transform-origin: 100%;

transition: all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);

}

.lingkaran_tengah {

width: 24px;

height: 24px;

background: #232323;

border: 4px solid #52b6f0;

position: absolute;

top: 50%;

left: 50%;

margin-left: -14px;

margin-top: -14px;

border-radius: 50%;

}

.jarum_detik {

height: 2px;

border-radius: 1px;

background: #F0C952;

}

.jarum_menit {

height: 4px;

border-radius: 4px;

}

.jarum_jam {

height: 8px;

border-radius: 4px;

width: 35%;

left: 15%;

}

</style>

<center>

<h1>Jam Analog</h1>

</center> 

<div class="jam_analog">

<div class="xxx">

<div class="jarum jarum_detik"></div>

<div class="jarum jarum_menit"></div>

<div class="jarum jarum_jam"></div>

<div class="lingkaran_tengah"></div>

</div>

</div>

<script type="text/javascript">

const secondHand = document.querySelector('.jarum_detik');

const minuteHand = document.querySelector('.jarum_menit');

const jarum_jam = document.querySelector('.jarum_jam');

function setDate(){

const now = new Date();

const seconds = now.getSeconds();

const secondsDegrees = ((seconds / 60) * 360) + 90;

secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

if (secondsDegrees === 90) {

secondHand.style.transition = 'none';

} else if (secondsDegrees >= 91) {

secondHand.style.transition = 'all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)'

}

const minutes = now.getMinutes();

const minutesDegrees = ((minutes / 60) * 360) + 90;

minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;

const hours = now.getHours();

const hoursDegrees = ((hours / 12) * 360) + 90;

jarum_jam.style.transform = `rotate(${hoursDegrees}deg)`;

}

setInterval(setDate, 1000)

</script>

</body>

</html>




Friday, January 6, 2023

Setting Plugin Android Pada IDE Netbeans

 


Berikut adalah cara menambahkan plugin Android :

1  Install Android SDK : Link Download

1.1. Download file android-sdk_r10-windows.zip, lalu ekstrak di direktori C:\. ( C:\android-sdk-windows ). Setelah itu jalankan file “SDK setup.exe”,  Jika ada package yang belum ada di komputer maka akan muncul window konfirmasi “Choose Packages to Install”, pilih “Accept All”, lalu klik Install

1.2. Jika terdapat masalah saat menambahkan package tersebut karena defaultnya SDK manager akan menggunakan saluran https (saluran secure SSL), maka setting SDK manager dengan memilih menu Settings --> “Force https//...sources to be fetched using http//...” 


2.  Menambahkan Android plugins ke Netbeans IDE

2.1. Buka Netbeans IDE, pilih menu Tools --> Plugins, didalam window Plugins pilih tab Settings dan tekan tombol Add dan masukkan nama plugin serta address URL tersebut dan klik tombol ‘OK’

2.2. Pada tab Available Plugins ketikkan android pada text field Search untuk mencari nama item Android, tandai centang pada item nama Android, lalu  klik Install

2.3. Kemudian klik Next

2.4. Centang Accept ... lalu klik  Install

2.5. Klik Continue ( biarkan peringatan mengenai unsigned plugin )


2.6. Selanjutnya tambahkan android platform ke Netbeans IDE.  buka aplikasi Netbeans IDE, pilih menu Tools --> Java Platform, kemudian tekan tombol Add Platform... kemudian tandai radio button pada Google Android Open Handheld Platform lalu klik Next

2.7. Pada window Choose Platform Folder browse ke folder tempat SDK Android berada (C:\android-sdk-windows). Kemudian klik Next

2.8. Pada window Add Java Platform, pilih Android 1.6 Standard Android platform...;1.6 ( jika aplikasi dicompile dengan target android versi rendah maka kemungkinan jalan di versi android lebih tinggi ). Kemudian pilih target compiler sesuai versi android handphone yang dimiliki (jika versi android froyo maka pilih Android 2.2 Standard Android platform..;2.2). kemudian klik Finish. 

2.9. Kemudian klik Close.

 Catatan : Gunakan cara yang sama untuk menambahkan Java Platform Android versi lainnya (misal Versi Android 2.2).


3.  Membuat Android Virtual Device (AVD)

Android Virtual Device digunakan oleh Netbeans IDE untuk menampilkan hasil running dari program yang dibuat, jika AVD belum dibuat maka akan muncul window permintaan AVD oleh Netbeans IDE. AVD merupakan Virtual Device untuk Handphone Android yang berada komputer. 

3.1. Jalankan aplikasi SDK Manager.exe yang ada di folder C:\android-sdk-windows\SDK Manager atau klik 2x shortcut pada desktop. Kemudian pilih menu “Virtual devices” dan klik New.

3.2. Kemudian akan terbuka window “Create new Android Virtual Device”

Keterangan :

  • Name : beri nama android device  (contoh : HapeDroid2.2)
  • Target : pilih OS Android version sesuai yang tambahkan pada Netbean IDE ( Android 2.2)
  • SD Card Size : SD Card (Memory Card) Virtual untuk AVD. isikan kapasitas 1000MiB (1Gb).
  • Skin : pilih screen resolution yang telah tersedia atau membuat custom resolution sesuai dengan Hape Android. pilih WVGA800 (800x480), karena inilah screen resolution sebagian besar Hp android. Untuk Android Tablet, membuat screen resolution jadi 1024x600.
  • Hardware : ini dipilih secara otomatis..

Setelah itu,  klik “Create AVD” dan klik OK pada window “Result of creating AVD ‘HaPeDroid2.2’:”


Untuk menjalankan AVD, pilih/sorot dan kemudian klik tombol Start. 

3.3. Jendela Pilihan Peluncuran akan terbuka, untuk mengatur skala tampilan dan Wipe User Data. Jika tampilan window AVD terlalu kecil anda bisa men-centang “Scale display to real size” dan set nilai Screen size (in) = 4 atau 5 ( ukuran window default ),  lalu klik Launch untuk memulai AVD tersebut.


Keterangan :

Sebelah kiri tampilan android, sebelah kanan merupakan tombol navigasi dan keyboard virtual. 

Berikut adalah shortcut untuk membantu menggunakan keyboard komputer untuk menjalankan AVD :

Home
Go to the Home Screen
F2
Menu Button
ESC
Back Button
F6
Toggle Trackball Mode
Ctrl+F5
Increase Volume
Ctrl+F6
Decrease Volume
Ctrl+F11
Switch Between Portrait and Landscape Mode
Alt+Enter
Toggle Full-Screen Mode

3.4. Ujicoba AVD Android 

Sudah terkoneksi ke internet. kemudian klik web browser ikon di layar AVD.


4  Membuat  project Android  di Netbeans IDE

4.1. Buka Netbeans IDE, pilih menu File-->New Project... kemudian pilih Android paltform

4.2. Isikan Project Name dan field yang lain. Pilih Android Platform. Kemudian klik Finish.


4.3. Pada file : MainActivity.java, tambahkan script :

package org.me.hellodroid;

import android.app.Activity;

import android.os.Bundle;

import android.widget.TextView;

/* @android with netbeans */

public class MainActivity extends Activity {

    public void onCreate(Bundle icicle) {

        super.onCreate(icicle);

        TextView tv = new TextView(this);

        tv.setText("Hello ini adalah Android");

        setContentView(tv);

    }

}

4.4. Selanjutnya run program tersebut , maka Netbeans IDE akan otomatis memanggil AVD


Catatan :

Jalankan AVD lebih dahulu untuk menghemat waktu AVD melakukan booting start sehingga lebih cepat melihat output program.


Thursday, January 5, 2023

Membuat Google Maps Menggunakan Java Swing

 


1. Buat file : map.html

<!DOCTYPE html>

<html>

<head>

   <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

   <style type="text/css">

       html { height: 100% }

       body { height: 100%; margin: 0; padding: 0 }

       #map-canvas { height: 100% }

   </style>

   <script type="text/javascript"

           src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

   <script type="text/javascript">

     var map;

     function initialize() {

       var mapOptions = {

         center: new google.maps.LatLng(48.209331, 16.381302),

         zoom: 4

       };

       map = new google.maps.Map(

              document.getElementById("map-canvas"), mapOptions);

     }

     google.maps.event.addDomListener(window, 'load', initialize);


   </script>

</head>

<body>

<div id="map-canvas"></div>

</body>

</html>


2. Buat file java 

2.1. Standard  

import static com.teamdev.jxbrowser.engine.RenderingMode.HARDWARE_ACCELERATED;

import com.teamdev.jxbrowser.browser.Browser;

import com.teamdev.jxbrowser.engine.Engine;

import com.teamdev.jxbrowser.engine.EngineOptions;

import com.teamdev.jxbrowser.view.swing.BrowserView;

import java.awt.BorderLayout;

import javax.swing.JFrame;

import javax.swing.SwingUtilities;

public class GoogleMaps {

    public static void main(String[] args) {

        EngineOptions options =

                EngineOptions.newBuilder(HARDWARE_ACCELERATED).build();

        Engine engine = Engine.newInstance(options);

        Browser browser = engine.newBrowser();

        SwingUtilities.invokeLater(() -> {

            BrowserView view = BrowserView.newInstance(browser);

            JFrame frame = new JFrame("Google Maps");

            frame.add(view, BorderLayout.CENTER);

            frame.setSize(800, 500);

            frame.setVisible(true);

            browser.navigation().loadUrl("file:///Users/me/map.html");

        });

    }

}

2.2.  Plust Zoom

import static com.teamdev.jxbrowser.engine.RenderingMode.*;

import com.teamdev.jxbrowser.browser.Browser;

import com.teamdev.jxbrowser.engine.Engine;

import com.teamdev.jxbrowser.engine.EngineOptions;

import com.teamdev.jxbrowser.view.swing.BrowserView;

import java.awt.BorderLayout;

import javax.swing.JButton;

import javax.swing.JFrame;

import javax.swing.JPanel;

import javax.swing.SwingUtilities;

public class GoogleMaps {

    private static final int MIN_ZOOM = 0;

    private static final int MAX_ZOOM = 21;

    private static final String setMarkerScript =

            "var myLatlng = new google.maps.LatLng(48.4431727,23.0488126);\n" +

                    "var marker = new google.maps.Marker({\n" +

                    "    position: myLatlng,\n" +

                    "    map: map,\n" +

                    "    title: 'Hello World!'\n" +

                    "});";

    /**

     * In map.html file default zoom value is set to 4.

     */

    private static int zoomValue = 4;

    public static void main(String[] args) {

        EngineOptions options =

                EngineOptions.newBuilder(HARDWARE_ACCELERATED).build();

        Engine engine = Engine.newInstance(options);

        Browser browser = engine.newBrowser();

        SwingUtilities.invokeLater(() -> {

            BrowserView view = BrowserView.newInstance(browser);

            JButton zoomInButton = new JButton("Zoom In");

            zoomInButton.addActionListener(e -> {

                if (zoomValue < MAX_ZOOM) {

                    browser.mainFrame().ifPresent(frame ->

                            frame.executeJavaScript("map.setZoom(" +

                                    ++zoomValue + ")"));

                }

            });

            JButton zoomOutButton = new JButton("Zoom Out");

            zoomOutButton.addActionListener(e -> {

                if (zoomValue > MIN_ZOOM) {

                    browser.mainFrame().ifPresent(frame ->

                            frame.executeJavaScript("map.setZoom(" +

                                    --zoomValue + ")"));

                }

            });

            JButton setMarkerButton = new JButton("Set Marker");

            setMarkerButton.addActionListener(e ->

                    browser.mainFrame().ifPresent(frame ->

                            frame.executeJavaScript(setMarkerScript)));

            JPanel toolBar = new JPanel();

            toolBar.add(zoomInButton);

            toolBar.add(zoomOutButton);

            toolBar.add(setMarkerButton);

            JFrame frame = new JFrame("Google Maps");

            frame.add(toolBar, BorderLayout.SOUTH);

            frame.add(view, BorderLayout.CENTER);

            frame.setSize(800, 500);

            frame.setVisible(true);

            browser.navigation().loadUrl("file:///Users/me/map.html");

        });

    }

}


Catatan : Library JxBrowser 

Download Trial JxBrowser selama 30 hari, lalu di extrak. Perlu mendapatkan license dari JxBrowser dengan cara evaluate, nanti license akan dikirim melalui email yang digunakan untuk mendaftar pastikan juga license yang dikirim didownload. Setelah extrak,  setelah itu import library JxBrowser. Jika untuk windows 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.

Membuat Absensi Online Menggunakan Google Form

 



Buat Google Formulir Daftar Absensi 


Catatan : Jika belum memahami baca : Cara Membuat Google Forms Dan Link

1. Dengan Agreement/disclaimer

Setelah membuat semua pertanyaan di absensi; 

1. Klik tambahkan bagian

2. Beri judul bagian dengan Agreement

3. Tambahkan pertanyaan dengan memilih yang pilihan ganda isi jawaban dengan Ya dan Tidak

4. Share dan kirim formulir absensi dalam kolom chat di media meeting online




2. Dengan tanda tangan

Selain membuat agrement, bisa juga menambahkan signature atau tanda tangan 

1. Klik tambahkan bagian

2. Isi deskripsi dengan nama upload tanda tangan

3. tambahkan pertanyaan upload file

3. Isi pertanyaan dengan upload scan foto tanda tangan

4. Pilih jenis file untuk upload

5. klik wajib di isi atau required




3. Dengan capture foto

Cara ini tidak jauh beda dengan membuat google form dengan tanda tangan. bedanya hanya poin no isi pertanyaan dengan  uploap capture saat acara berjalan. hanya saja di  upload field pertanyaan diganti dengan Screen Capture





4. Dengan QR code

1. Klik the-qrcode-generator.com

2. Masukkan alamt url di text area

3. Klik save dan pilih PNG

4. Download QR Code yang telah di buat

5. Bagikan dengan sharescreen ke peserta jika akan digunakan di dalam pelaksanaan metting.


Membuat Quiz Menggunakan Google Form

 


1. Membuat Quiz

1.1. Masuk ke akun gmail 

1.2. Kemudian masuk google drive 

1.3. Setelah itu,  klik new --> more --> google form > kemudian pilih blank form

1.4. Klik menu setting kemudian klik make this a quiz



2. Mengacak soal dan jawaban

2.1. Klik menu setting klik presentation klik Shuffle question order



2.2. Klik tanda di sebelah required


 

2.3. pilih Shuffle option order atau acak jawaban, lalu klik tanda di sebelah required


Mengirim Video Pada Google Form

 


1. Buat Google Form, lalu pilih Blank Form

2. Isikan Judul,  Nama, Deskripsi dari form



3. Tambahkan pertanyaan dengan tipe short answer kemudian isi dengan nama peserta



4. Kemudian isi dengan judul dan pertanyaan dengan type File Upload yang nantinya bagian ini berfungi untuk peserta mengupload file video tersebut


5.Selanjutnya lakukan pengaturan dari jenis file yang di terima dengan mengaktifkan dulu Allow only specific file types kemudian centang VIDEO berikutnya set maximum number of file dan berikutnya setting maximum file size atau ukuran



6. Pilih tab setting, lalu lakukan pengaturan seperti di bawah ini mulai dari pengumpulan Email kemudian setting menjadi Always agar setelah submit peserta bisa menerima salinan dari yang di upload dan selanjutnya batas 1 kali upload dengan mengaktifkan Limit to 1 response 



7. Isi form yang telah dibuat untuk melihat apakah file yang telah di buat sudah sesuai dengan yang diharapkan.  Kemudian buka laporan dari form yang telah dibuat dimana dalam laporan tesebut bisa melihat siapa saja yang sudah upload dan klik link untuk membuka video yang telah diupload peserta, klik menu respon kemudian klik logo Spreadsheet 


8. Klik Create untuk melanjutkan membuka laporan di Google Sheet



9. Kemudian untuk melihat video yang di upload, klik link di tabel upload video Google Sheet


Memunculkan Simbol & Emoji Pada OS Mac

  Memunculkan Simbol & Emoji  1. Buka aplikasi Pages / Notes pada Macbook. 2. Klik pada Menubar Edit --> Pilih Emoji and Symbols a...