Cara Membuat (Build) APK Pada Android Studio Lengkap Dengan Gambar

Membuat atau Build file apk melalui android studio memiliki dua cara yaitu melalui build apk biasa yang nantinya cuma akan menghasilkan file debug saja dan yang kedua adalah generate signed apk yang mengharuskan kita untuk membuat file keystore beserta dengan mengisi nama dan password yang nantinya akan menghasilkan apk release.

Cara membuat apk pada android studio sangatlah mudah melalui build apk namun sedikit ribet pada generate signed apk, jika anda hanya ujicoba aplikasi saja maka build apk pilihan anda namun jika anda berniat mempublikasikan di play store, mobomarket dll maka wajib membuat apk dengan generate signed apk, berikut dibawah ini adalah cara membuat build apk pada android studio.

1 Pastikan anda telah membuat project baru atau lama, kemudian pilih menu Build dan klik sub menu Build APK

android-1

2 Kemudian tunggu beberapa menit akan muncul Show in Explorer dan klik

android-2

3 Setelah klik Show in Explorer maka akan muncul file apk debug seperti dibawah ini

android-3

Sedangkan cara membuat build apk menggunakan generate signed apk pada android studio untuk merelease aplikasi kita ke publik seperti cara dibawah ini

1 Pilih menu Build dan klik sub menu Generate Signed APK kemudian akan muncul dialog

android-4

2 Pada dialog munculan klik Create new… dan muncul dialog key store, klik tombol di pojok kanan atas kemudian pilih folder yang anda tuju untuk menyimpan file keystore dan klik Ok

android-5

3 Isi password (usahakan 4 input password sama), beri nama anda/aplikasi pada alias, biarkan validity 25, dan yang paling wajib beri nama pada first and last name dan klik Ok

android-6

4 klik Next

android-7

5 Isi ulang password tadi dan klik Ok

android-8

6 klik Finish untuk mencetak apk

android-9

7 klik Show in Explorer untuk menampilkan apk release

android-10

8 Ini hasil cetakan file apk release dan selesai

android-11

Sekian tutorial kali ini semoga bermanfaat dan lancar dalam belajar membuat aplikasi android melalui android studio atau menggunakan IDE lainnya seperti eclipse atau netbeans.

Membuat Aplikasi MDI Dengan Java Netbeans

Program yang dibuat dengan bentuk mdi memang tidak asing lagi bagi kita, lihat saja aplikasi office milik microsoft yaitu microsoft office word, excel atau power point. Dengan aplikasi mdi akan memudahkan kita dalam hal pembuatan aplikasi yang mengharuskan user untuk login terlebih dahulu untuk menikmati program.

Namun disini membangun aplikasi mdi dengan java netbeans, kenapa memilih java? java bisa dijalankan di banyak platform, kenapa pilih netbeans kan ada eclipse ? netbeans merupakan ide yang menerapkan GUI form jadi akan memudahkan dalam mendesain sedangkan eclipse adalah ide java yang populer tetapi mengharuskan kita untuk menghafal seluruh kode hanya untuk mendesain form dan sangat susah dalam menentukan letak yang ideal suatu input form.

Untuk membuat form buka netbeans ide pada windows atau ubuntu di dektopnya kalau ada, buatlah project baru dan beri nama AplikasiMDI atau terserah anda kemudian buatlah sebuah jframeform dan berinama MainMenu (MainMenu.java) kemudian drag drop menubar ke form dan pada menu file drag drop menuitem dan beri nama exit, pada menu edit ganti nama dengan nama view dan drag drop 3 menuitem beri nama sesuai jinternalframe misalkan Input, Setting dan Laporan, drag drop jdesktoppane dibawah menubar sampai penuh form, lihat gambar dibawah ini
aframefrom-mainmenu-mdi-2016-05-04
Kemudian klik kanan pada package -> pilih new -> pilih other -> pilih swing gui form -> pilih jinternalframe form dan klik next isi nama dengan nama input (input.java) dan buat lagi yang baru isi dengan nama setting (setting.java) dan Laporan (Laporan.java), untuk contoh seperti dibawah ini.
setting-mdi-2016-05-04

laporan-mdi-2016-05-04

input-mdi-2016-05-04
Setelah itu buka kembali MainMenu.java dan klik pada menuitem -> pilih events -> pilih action -> klik actionperformed dan isikan syntax java dibawah ini

Menu item exit

private void jMenuItem1ActionPerformed(java.awt.event.ActionEvent evt) {                                           
        // TODO add your handling code here:
        System.exit(0);
    }

Menu item input

private void jMenuItem2ActionPerformed(java.awt.event.ActionEvent evt) {                                           
        // TODO add your handling code here:
        jDesktopPane1.removeAll();
        repaint();
        input in = new input();
        //in.setSize(jDesktopPane1.getSize().width, jDesktopPane1.getSize().height);
        in.show();
        jDesktopPane1.add(in);
    }

Menu item setting

private void laporanActionPerformed(java.awt.event.ActionEvent evt) {                                        
        // TODO add your handling code here:
        jDesktopPane1.removeAll();
        repaint();
        setting set = new setting();
        set.setSize(jDesktopPane1.getSize().width, jDesktopPane1.getSize().height);
        set.show();
        jDesktopPane1.add(set);
    }

Menu item Laporan

private void jMenuItem4ActionPerformed(java.awt.event.ActionEvent evt) {                                           
        // TODO add your handling code here:
        jDesktopPane1.removeAll();
        repaint();
        Laporan lap = new Laporan();
        lap.setSize(jDesktopPane1.getSize().width, jDesktopPane1.getSize().height);
        lap.show();
        jDesktopPane1.add(lap);
    }

Lihat hasil program aplikasi mdi dibawah ini, sekian tutorial kali ini semoga bermanfaat dan hasilnya seperti gambar dibawah ini.

aplikasimdi-2016-05-04

Download Source Code

Cara Membuat Aplikasi CRUD (Create, Read, Update, Delete) Dengan Java (Netbeans) dan SQLite

Aplikasi crud atau istilah panjangnya create, read, update, dan delete adalah sebuah aplikasi yang biasanya dibuat untuk pekerjaan pengisian formulir yang digunakan untuk mendata object atau orang ataupun digunakan untuk sebuah manajemen dari perusahaan tertentu.

Aplikasi create, read, update, dan delete kali ini akan dibuat dengan java yang menggunakan software development yaitu netbeans dan database sebagai penyimpanan datanya menggunakan sqlite, sqlite adalah database manajemen yang portabel, jadi bisa di copy paste ke berbagai sistem operasi.

SQLite disini adalah menggunakan source kode sqlite langsung, bukan hanya databasenya saja tapi semua tool tool sqlite akan digunakan, jadi aplikasi yang akan dibuat menggunakan sqlite embeded.

sqliteembeded-2016-05-04
Buatlah jframe form baru dengan nama terserah anda. namun saya mengunakan nama passwordsimpan.java dengan nama project Password Simpan. Buatlah rancangan form seperti gambar dibawah ini.
passwordsimpanform-2016-05-04
Kemudian buat variabel dan letakkan dibawah public class passwordsimpan extends javax.swing.JFrame.

private DefaultTableModel model;
private Connection conn;
private Statement stat;
private PreparedStatement prep;
private ResultSet rs;

Buatlah method koneksi ke database sqlite (database akan dibuat sendiri pada syntax ini)

public void koneksiDatabase() {
        try {
            Class.forName("org.sqlite.JDBC");
            conn = DriverManager.getConnection("jdbc:sqlite:passwordsimpan"); // nama file SQLite = mahasiswa
            stat = conn.createStatement();
            // stat.executeUpdate("drop table if exists tMahasiswa;");   // Untuk menghapus database jika database sudah ada.
            stat.executeUpdate("create table IF NOT EXISTS tpassim (id integer primary key autoincrement, alamat text, pengguna text, password text);"); // membuat data base
        } catch (Exception ex1) {
            System.out.println(ex1.toString());
        }
    }

Buat tampilan data dalam tabel dengan method loaddata

public void loadData(){
        // menghapus seluruh data
        model.getDataVector().removeAllElements();
        // memberi tahu bahwa data telah kosong
        model.fireTableDataChanged();
        try {
            rs = stat.executeQuery("select * from tpassim");
        
            while(rs.next()){
                // lakukan penelusuran baris
                Object[] o = new Object[4];
                o[0] = rs.getString("id");
                o[1] = rs.getString("alamat");
                o[2] = rs.getString("pengguna");
                o[3] = rs.getString("password");
                model.addRow(o);
            }
                    rs.close();
            stat.close();           
        }catch(SQLException e){
            System.out.println("Terjadi Error load data");
        }
    }

Tempel syntax ke dalam konstruktor seperti dibawah ini (public passwordsimpan() ) dan penambahan pada konstruktor ( throws SQLException )

public passwordsimpan() throws SQLException {
        initComponents();
        koneksiDatabase();
        
        // membuat tabel
        model = new DefaultTableModel();
        
        jTable1.setModel(model);
        
        model.addColumn("ID");
        model.addColumn("Alamat");
        model.addColumn("Pengguna");
        model.addColumn("Password");
        
        // memanggil fungsi load data
        loadData();
    }

Baru akan membuat event actionproformed dengan klik kanan pada button yang telah dibuat – pilih events – pilih action – pilih actionproformed. Untuk button hapus syntaxnya seperti dibawah ini.

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        int i = jTable1.getSelectedRow();
        if(i == -2){
            // tidak ada baris terseleksi
            return;
        }

        String nim = (String) model.getValueAt(i, 0);

        try {
            String sql = "DELETE FROM tpassim WHERE id = ?";

            prep = conn.prepareStatement(sql);

            prep.setString(1, nim);

            prep.executeUpdate();
            prep.close();
        }catch(SQLException e){
            System.err.println("Terjadi Error button hapus");
        }finally{
            loadData();
        }
    }

Untuk button update syntaxnya dibawah ini

private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        int i = jTable1.getSelectedRow();
        if(i == -1){
            // tidak ada baris terseleksi
            return;
        }

        // ambil nim yang terseleksi
        String nim = (String) model.getValueAt(i, 0);
        String nima = jTextField1.getText();
        String nama = jTextField2.getText();
        String jurusan = jTextField3.getText();

        try{
            String sql = "UPDATE tpassim SET alamat = ?, pengguna = ?, password = ? WHERE id = ?";

            prep = conn.prepareStatement(sql);

            prep.setString(1, nima);
            prep.setString(2, nama);
            prep.setString(3, jurusan);
            prep.setString(4, nim);

            prep.executeUpdate();
            prep.close();
        }catch(SQLException e){
            System.err.println("Terjadi Error button ubah");
        }finally{
            loadData();
        }
    }

Untuk button simpan syntaxnya dibawah ini

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        String nima = jTextField1.getText();
        String nama = jTextField2.getText();
        String jurusan = jTextField3.getText();

        try{
            prep = conn.prepareStatement("insert into tpassim values (?, ?, ?, ?);");

            prep.setString (1, null);
            prep.setString (2, nima);
            prep.setString (3, nama);
            prep.setString (4, jurusan);

            prep.executeUpdate();
            prep.close();
        } catch (SQLException e) {
            System.err.println("Terjadi Error button tambah");
        } finally {
            loadData();
        }
    }

Untuk button bersih yaitu menghapus atau mereset data aktif dari form, syntaxnya dibawah ini

private void jButton4ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        jTextField1.setText(null);
        jTextField2.setText(null);
        jTextField3.setText(null);
        jTextField1.requestFocus();
    }

Untuk menapilkan data untuk proses update dan delete dari tabel atau database adalah dengan menggunakan mouse klik pilih tabel yang dibuat kemudian klik kanan – pilih events – pilih mouse – pilih mouseClicked. syntaxnya dibawah ini

private void jTable1MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        int i = jTable1.getSelectedRow();
        if (i == -1){
            // tak ada baris terseleksi
            return;
        }

        String nim = (String) model.getValueAt(i, 1);
        jTextField1.setText(nim);

        String nama = (String) model.getValueAt(i, 2);
        jTextField2.setText(nama);

        String jurusan = (String) model.getValueAt(i, 3);
        jTextField3.setText(jurusan);
    }

Hasilnya adalah seperti yang terlihat dibawah ini.

apppassim-2016-05-04

Download Source Code

Aplikasi CRUD (Create, Read, Update, Delete) dengan Java Netbeans dan MySQL

Aplikasi crud merupakan dasar pemgraman atau dasar sebuah aplikasi yang digunakan dalam aplikasi proses input dan output dalam hal pengisian formulir dan kemudian akan muncul sebuah laporan. Dengan menguasai aplikasi crud ini maka akan memudahkan dalam hal pembuatan aplikasi lainnya misalkan membuat aplikasi perkantoran sudah tentu didalamnya terkumpul kumpulan crud yang menjadi beberapa inputan.

Pada pembahasan kali ini kita akan membahas cara membuat aplikasi crud dengan menggunakan java beserta software idenya yaitu netbeans dan program database untuk menyimpan data yaitu mysql. untuk aplikasi netbeans bisa didapatkan di Netbeans selanjutnya aplikasi mysql bisa didapatkan di MySQL selanjutnya anda perlu membuat database pada mysql console dengan nama database basisdata dan nama tabelnya crud beserta fieldnya yaitu: kode, nama, tgl, jk dan alamat.

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

CREATE TABLE IF NOT EXISTS `crud` (
  `kode` int(5) NOT NULL,
  `nama` varchar(45) NOT NULL,
  `tgl` varchar(30) NOT NULL,
  `jk` varchar(20) NOT NULL,
  `alamat` text NOT NULL,
  PRIMARY KEY (`kode`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `crud` (`kode`, `nama`, `tgl`, `jk`, `alamat`) VALUES
(677, 'As', 'Tue Jan 07 14:43:06 WIT 2014', 'Perempuan', 'jenewa'),
(3423, 'Ghazali', 'Thu Jan 09 19:53:58 WIT 2014', 'Laki-laki', 'baroh'),
(6577, 'Annisa', 'Tue Jan 11 14:27:07 WIT 2000', 'Perempuan', 'Padang Tiji');

Kemudian buatlah sebuah project baru pada netbeans dengan klik new project -> pilih java aplication -> klik next -> buat nama aplikasi dengan nama AplikasiCRUD hilangkan conteng pada create main class. kemudian buahlah file koneksinya untuk koneksi dari database mysql kepada aplikasi java dengan klik pada package kemudian klik kanan -> pilih new -> pilih java class berinama koneksi makan jadi dengan nama koneksi.php.

public class koneksi {
    private Connection koneksi;
    public Connection connect(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            System.out.println("Berhasil Koneksi");
        } catch (ClassNotFoundException ex) {
            System.out.println("Gagal Koneksi "+ex);
        }
        String url = "jdbc:mysql://localhost:3306/basisdata";
        try {
            koneksi = DriverManager.getConnection(url, "root", "kodokijo");
            System.out.println("Berhasil Koneksi Database");
        } catch (SQLException ex) {
            System.out.println("Gagal Koneksi Database "+ex);
        }
        return koneksi;
    }
    
}

Buatlah file baru dengan klik kanan pada package -> pilih new -> pilih jframeform kemudian berinama sesuka hati atau disini penulis menggunakan nama jframeform dengan nama formcrud akan menjadi formcrud.java dan desain seperti gambar dibawah ini.

formcrud-452016
Selanjutnya klik source dan isi didalam public class formcrud extends javax.swing.JFrame dengan deklarasi class untuk memanggil koneksi database yang dibawah ini.

private Connection conn = new koneksi().connect();
private DefaultTableModel tabmode;

Buatlah class untuk form yang mana akan digunakan untuk pengaktifan, non_aktifkan dan kosongkan pada form agar tidak langsung terbuka demi menjaga data agar tidak dihapus sembarangan.

protected void non_aktif(){
        jTextArea1.setEnabled(false);
        jTextField1.setEnabled(false);
        jTextField2.setEnabled(false);
        jRadioButton1.setEnabled(false);
        jRadioButton2.setEnabled(false);
        jDateChooser1.setEnabled(false);
    }
    protected void aktif(){
        jTextArea1.setEnabled(true);
        jTextField1.setEnabled(true);
        jTextField2.setEnabled(true);
        jRadioButton1.setEnabled(true);
        jRadioButton2.setEnabled(true);
        jDateChooser1.setEnabled(true);
        jTextField1.requestFocus();
    }
    protected void kosong(){
        jTextArea1.setText("");
        jTextField1.setText("");
        jTextField2.setText("");
    }

Untuk menampilkan data dari database mysql server kedalam tabel yang kita desain pada form maka kopas syntax javanya ada dibawah ini.

protected void datatabel(){
        Object[] Baris ={"Kode","Nama","Lahir","Kelamin","Alamat"};
        tabmode = new DefaultTableModel(null, Baris);
        jTable1.setModel(tabmode);
        String sql = "select * from crud";
        try {
            Statement stat = conn.createStatement();
            ResultSet hasil = stat.executeQuery(sql);
            while(hasil.next()){
                String kode = hasil.getString("kode");
                String nama = hasil.getString("nama");
                String tgl = hasil.getString("tgl");
                String jk = hasil.getString("jk");
                String alamat = hasil.getString("alamat");
                String[] data={kode,nama,tgl,jk,alamat};
                tabmode.addRow(data);
            }
        } catch (Exception e) {
        }
    }

Setelah itu baru untuk bisa dijalankan class class yang ada diatas maka yang diperlukan memanggil class dalam konstruktor java formcruid tadi.

public formcrud() {
        initComponents();
        non_aktif();
        datatabel();
}

Selanjutnya kita akan buat button button untuk berfungsi mulai button simpan, update, hapus dan bersih dengan klik kanan pada button -> pilih event -> pilih actions -> pilih actionperformated seperti dibawah ini.

button simpan

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        String resa;
        if(jRadioButton1.isSelected()){
            resa = jRadioButton1.getText();
        } else{
            resa = jRadioButton2.getText();
        }
        String sql = "insert into crud values(?,?,?,?,?)";
        try {
            PreparedStatement stat = conn.prepareStatement(sql);
            stat.setString(1, jTextField1.getText());
            stat.setString(2, jTextField2.getText());
            stat.setString(3, jDateChooser1.getDate().toString());
            stat.setString(4, resa);
            stat.setString(5, jTextArea1.getText());
            stat.executeUpdate();
            JOptionPane.showMessageDialog(null, "Data Berhasil Disimpan");
            kosong();
            jTextField1.requestFocus();
            datatabel();
        } catch (SQLException e) {
            JOptionPane.showMessageDialog(null, "Data Gagal Disimpan "+e);
        }
    }

klik tabel dengan klik kanan pada tabel pilih event -> pilih mouse -> pilih mouseclicked

private void jTable1MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        int bar = jTable1.getSelectedRow();
        String a = tabmode.getValueAt(bar, 0).toString();
        String b = tabmode.getValueAt(bar, 1).toString();
        String c = tabmode.getValueAt(bar, 2).toString();
        String d = tabmode.getValueAt(bar, 3).toString();
        String e = tabmode.getValueAt(bar, 4).toString();
        jTextField1.setText(a);
        jTextField2.setText(b);
        jTextArea1.setText(e);
    }

button update

private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        String resa;
        if(jRadioButton1.isSelected()){
            resa = jRadioButton1.getText();
        } else{
            resa = jRadioButton2.getText();
        }
        String sql = "update crud set nama=?, tgl=?, jk=?, alamat=? where kode='"+jTextField1.getText()+"'";
        try {
            PreparedStatement stat = conn.prepareStatement(sql);
            stat.setString(1, jTextField2.getText());
            stat.setString(2, jDateChooser1.getDate().toString());
            stat.setString(3, resa);
            stat.setString(4, jTextArea1.getText());
            stat.executeUpdate();
            JOptionPane.showMessageDialog(null, "Data Berhasil Diupdate");
            kosong();
            jTextField1.requestFocus();
            datatabel();
        } catch (SQLException e) {
            JOptionPane.showMessageDialog(null, "Data Gagal Diupdate "+e);
        }
    }

button hapus

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        int ok = JOptionPane.showConfirmDialog(null, "Apakah anda yakin ingin menghapus data", "Konfirmasi Dialog", JOptionPane.YES_NO_OPTION);
        if(ok==0){
        String sql = "delete from crud where kode='"+jTextField1.getText()+"'";
        try {
            PreparedStatement stat = conn.prepareStatement(sql);
            stat.executeUpdate();
            JOptionPane.showMessageDialog(null, "Data Berhasil Dihapus");
            kosong();
            jTextField1.requestFocus();
            datatabel();
        } catch (SQLException e) {
            JOptionPane.showMessageDialog(null, "Data Gagal Dihapus "+e);
        }
        }
    }

Sekian yang dapat saya sampaikan kalau ada kekurangan tolong diberitahukan agar penulis dapat memperbaiki kekurangan tersebut. hasilnya seperti dibawah ini.

aplikasicrud-452016

Menampilkan Data dalam Listbox (jList) dan Combobox (jCombobox) dengan Java Netbeans dan MySQL

Pada tutorial kali ini penulis ingin membahas cara menampilkan data dari database yang ada di mysql pada program yang ada Listbox dan Combobox dengan menggunakan bahasa pemrograman java dan menggunakan ide netbeans sebagai aplikasi developmentnya.

Untuk membuat aplikasi listbox dan combobox dengan java pertama-tama buka aplikasi netbeans kalau belum ada ya download di situ resmi mereka yaitu Netbeans dan untuk program database kalau belum ada silahkan download disitusnya MySQL kemudian install setelah itu buatlah database dengan nama basisdata atau terserah anda dan buatlah tabel dengan nama listcombo atau terserah anda.

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

CREATE TABLE IF NOT EXISTS `listcombo` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

INSERT INTO `listcombo` (`id`, `nama`) VALUES
(1, 'Web Developer'),
(2, 'Programmer'),
(3, 'Web Programmer'),
(4, 'System Analys'),
(5, 'Database Manager'),
(6, 'Cloud Manager'),
(7, 'Java Programmer'),
(8, 'Net Programmer');

Buatlah sebuah project dengan klik file new project -> pilih java application -> berikan nama project dengan nama listCombo atau terserah anda dan hilangkan contengan create main class setelah itu klik file -> pilih new file -> pilih swing gui form -> pilih jframe form berinama menutama atau terserah untuk desainnya 1 jlist dan 1 jcombobox atau seperti gambar dibawah ini

formlistcombo-2016-05-04
Kemudian klik source buat public class dalam file menutama tadi dengan nama public void combo dan public void list atau terserah anda yang penting dibuat. yang pertama tama buat file java class dengan nama koneksi (koneksi.java) seperti dibawah ini.

public class koneksi {
    private Connection koneksi;
    public Connection connect(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            System.out.println("Berhasil Koneksi");
        } catch (ClassNotFoundException ex) {
            System.out.println("Gagal Koneksi "+ex);
        }
        String url = "jdbc:mysql://localhost:3306/basisdata";
        try {
            koneksi = DriverManager.getConnection(url, "root", "");
            System.out.println("Berhasil Koneksi Database");
        } catch (SQLException ex) {
            System.out.println("Gagal Koneksi Database "+ex);
        }
        return koneksi;
    }
    
}

Ingat saya untuk file koneksi butuh file mysql jdbc connector namun kali ini penulis menggunakan ide netbeans, netbeans secara default sedang menyediakan file konektor dengan klik kanan pada folder libraries project pilih libraries dan cari mysql jdbc connector kemudian klik next. Sekarang kembali lagi ke menutama buat file public class.

combo()

public void combo(){
        Connection conn = new koneksi().connect();
        String sql = "select * from listcombo";
        try {
            Statement stat = conn.createStatement();
            ResultSet rs = stat.executeQuery(sql);
            while(rs.next()){
                jComboBox1.addItem(rs.getString("nama"));
            }
        } catch (Exception e) {
            JOptionPane.showMessageDialog(null,"Terjadi Kesalahan" +e);
        }
    }


list()

public void list(){
        DefaultListModel model = new DefaultListModel();
        String sql = "select * from listcombo";
        try {
            Statement stat = conn.createStatement();
            ResultSet rs = stat.executeQuery(sql);
            while(rs.next()){
                String ItemList2 = rs.getString("nama"); //get the element in column "item_code"
                model.addElement(ItemList2);
            }
            jList1.setModel(model);
        } catch (Exception e) {
            JOptionPane.showMessageDialog(null,"Terjadi Kesalahan" +e);
        }
    }

Public kontruktornya (public menutama())

public menutama() {
        initComponents();
        combo();
        setLocationRelativeTo(this);
        list();
    }

Untuk hasilnya bisa dilihat pada gambar yang ada dibawah ini. sekian tutorial saya kalau mau komentar silahkan saya tunggu komentar anda semoga bermaanfaat.

listbox-combobox-2016-05-04

Download Source Code

Membuat Event (cut, copy, paste dan select all) pada Popup Menu dengan Java Netbeans

Event cut, copy, paste dan select all sudah biasa digunakan pada sebuah program yang dibuat dengan menggunakan java maupun dengan menggunakan .net atau c/c++. Popup menu adalah menu yang tampil apabila diklik kanan dan menu ini biasanya berisi event yang sudah dijelaskan diatas.

Pada tutorial kali ini penulis cuma membahas cara membuat popup menu dan menampilkan event mouse yaitu waktu diklik copy atau lainya maka akan berjalan seperti program pada umumnya. Buatlah sebuah project dengan nama terserah anda dan hilangkan contengan create main class kemudian buatlah sebuah jframe form dengan nama terserah, kira kira desainnya seperti dibawah ini.

Membuat Event (cut, copy, paste dan select all) pada Popup Menu dengan Java Netbeans 1
Setelah itu desain fieldnya dengan menambah menubar dan popupmenu dengan cara drag dan drop pada palette kemudian buka tool navigator kemudian pilih jpopupmenu kemudian tambahkan menu item dengan cara klik kanan pada jpopupmenu kemudian klik add from palette pilih menu item dan ubah nama serta tambahkan lagi menjadi 4 menu item (cut, copy, paste dan select all) kira kira seperti gambar dibawah ini.

Membuat Event (cut, copy, paste dan select all) pada Popup Menu dengan Java Netbeans 2
Pastikan anda telah mendesain minimal 1 jtextfield atau 1 jtextarea. pada jtextarea pilih properties pada tool atau dengan klik kanan, kemudian cari componentPopupmenu dan pilih jpopupmenu, kalau bingung selahkan lihat gambar dibawah ini.

Membuat Event (cut, copy, paste dan select all) pada Popup Menu dengan Java Netbeans 3
Klik lagi pada navigator dan pada menu itemnya (jpopupmenu) kemudian klik kanan -> pilih event -> pilih mouse -> klik mouseReleased dan isikan seperti syntax java dibawah ini.

private void jMenuItem3MouseReleased(java.awt.event.MouseEvent evt) {                                         
        // TODO add your handling code here:
        jTextArea1.cut();
}                                        

private void jMenuItem4MouseReleased(java.awt.event.MouseEvent evt) {                                         
        // TODO add your handling code here:
        jTextArea1.copy();
}                                        

private void jMenuItem5MouseReleased(java.awt.event.MouseEvent evt) {                                         
        // TODO add your handling code here:
        jTextArea1.paste();
}                                        

private void jMenuItem6MouseReleased(java.awt.event.MouseEvent evt) {                                         
        // TODO add your handling code here:
        jTextArea1.selectAll();
}

Semoga bermanfaat tutorial diatas, kalau ada kekurangan saya sebagai penulis mohon komentarnya. hasil dari program diatas adalah sebagai berikut.

4-hasil-evenpopup-642016

Download Source Code

Membuat Aplikasi Laporan (iReport) dengan Java Netbeans dan MySQL

Aplikasi laporan adalah sebuah aplikasi yang wajib ada dalam sebuah aplikasi perkantoran, kenapa wajib ? karena dengan adanya laporan maka akan memudahkan dalam hal print dokumen yang nantinya akan dilakukan oleh seorang pegawai memberikan hasil kerjanya kepada atasannya.

Aplikasi laporan yang mendukung java yang lebih bagus yaitu iReport atau jasperReport yang sangat banyak digunakan untuk menampilkan laporan. pada tutorial kali ini penulis cuma membahas cara membuat dan menampilkan laporan saja, namun bukan mendesain laporan, untuk membuat laporan anda hanya memilih new dengan klik kanan -> pilih other -> pilih report -> pilih report wizard dengan begitu anda akan sangat terbantu dalam mendesain laporan seperti gambar dibawah ini.

menubar-ireport-442016

pertama tama yang harus dilakukan adalah membuat koneksi antara laporan dengan mysql untuk databasenya sendiri akan penulis jelaskan dibawah, pada tabbar pilih ikon yang bulat tersusun itu atau ikon database kemudian pilih database jdbc connection klik next -> isikan field koneksinya -> klik save.

datasource-ireport-442016

ireport-connection-442016

Kemudian buatlah laporan dengan penjelasan seperti diatas yaitu klik kanan -> pilih new -> pilih report wizard atau other cari pada report -> klik report wizard.

ireport-format-dokumen-442016

ireport-nama-dokumen-442016

ireport-query-ambil-442016

Klik design query kalau muncul password isikan password mysql dan drag drop tabel yang ada pada gambar dibawah ini atau juga bisa pada gambar diatas diketik menual syntax sql mysqlnya untuk menampilkan data misalkan menggunakan select * from tabel.

ireport-query-select-442016

ireport-field-select-442016

ireport-group

ireport-finish-442016

Yang diatas anda pilih dan klik next saja. selanjutnya desainnya seperti dibawah ini. untuk desain anda lakukan sendiri terserah anda pada gambar dibawah ini adalah laporan yang telah saya desain.

ireport-desain-awal-442016

ireport-form-desain-442016

Setelah laporan berhasil didesain maka yang anda perlukan adalah database, sebenarnya database dari awal wajib dibuat kalau tidak dibuat maka yang telah dipraktekkan diatas tidak berjalan.

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

CREATE TABLE IF NOT EXISTS `biodata` (
  `kode` varchar(5) NOT NULL,
  `nama` varchar(45) NOT NULL,
  `kelamin` varchar(20) NOT NULL,
  `alamat` varchar(100) NOT NULL,
  `ortu` varchar(45) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `biodata` (`kode`, `nama`, `kelamin`, `alamat`, `ortu`) VALUES
('11111', 'Ghazali', 'Laki-laki', 'Sigli', 'Zulkifli'),
('11112', 'Julinda', 'Perempuan', 'Ulim', 'Yusuf'),
('11113', 'Monicha', 'Perempuan', 'Bambi', 'Rahman'),
('11113', 'Andrian', 'Laki-laki', 'Bambi', 'Ramli'),
('11115', 'Andrian', 'Laki-laki', 'Krung', 'Ramli'),
('12345', 'Reza', 'Laki-laki', 'Desa', 'Kure');

Setelah itu desainlah formnya seperti dibawah ini dan berikan nama sesuka hati anda disinilah nantinya waktu yang dijalankan tampil formnya dan klik cetak langsung tampil laporannya.

ireport-myform-java-442016

Setelah itu klik kanan pada jbutton yang telah dibuat dan pilih event -> pilih action -> klik actionperformed, ini berguna nantinya untuk menambah data dan menampilkan laporan, untuk sintaxnya seperti dibawah ini

class koneksi

    Connection konek;
    Statement stat;
    
    public void koneksi(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            System.out.println("Berhasil Koneksi");
        } catch (ClassNotFoundException ex) {
            System.out.println("Gagal Koneksi "+ex);
        }
        String url="jdbc:mysql://localhost:3306/basisdata";
        try {
            konek = DriverManager.getConnection(url, "root", "kodokijo");
            stat = konek.createStatement();
            System.out.println("Ada Database");
        } catch (SQLException se) {
            System.out.println("Tidak ada database "+se);
        }
    }

button simpan

    private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        String sql = "insert into biodata values('"+textkode.getText()+"','"+textnama.getText()+"','"+textkelamin.getText()+"','"+textalamat.getText()+"','"+textfamily.getText()+"')";
        try {
            stat.executeUpdate(sql);
            textkode.setText("");
            textnama.setText("");
            textkelamin.setText("");
            textalamat.setText("");
            textfamily.setText("");
            textkode.requestFocus();
            JOptionPane.showMessageDialog(null, "Berhasil tambah data");
        } catch (SQLException ez) {
            JOptionPane.showMessageDialog(null, "Gagal total "+ez);
        }
    }

button cetak

     private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        String sql = "SELECT biodata.`kode` AS biodata_kode, biodata.`nama` AS biodata_nama, biodata.`kelamin` AS biodata_kelamin, biodata.`alamat` AS biodata_alamat, biodata.`ortu` AS biodata_ortu FROM `biodata` biodata";
        try {
            ResultSet rs = stat.executeQuery(sql);
            JasperPrint jasperPrint;       
            JRResultSetDataSource jrRS = new JRResultSetDataSource (rs);            
            JasperReport jasperReport = JasperCompileManager.compileReport("./src/laporan.jrxml");          
            jasperPrint = JasperFillManager.fillReport(jasperReport, null, jrRS);
            JRViewer aViewer = new JRViewer(jasperPrint);                  
            JDialog viewer = new JDialog();  
            viewer.setTitle(".: Jasper Report :.");             
            viewer.setAlwaysOnTop(true);
            viewer.getContentPane().add(aViewer);                  
            Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();     
            viewer.setBounds(0,0,screenSize.width, screenSize.height);
            viewer.setVisible(true);              

            stat.close();
            konek.close();
        } catch (Exception e) {
            JOptionPane.showMessageDialog(null, "Laporan gak ada "+e);
        }
    }

Kira kira hasil dari program diatas seperti pada gambar yang ada dibawah ini, semoga dapat terbantu dengan adanya tutorial diatas.

ireport-hasil1-442016

ireport-hasil-myform-442016

ireport-hasil-laporan-442016

Download Source Code

Membuat Aplikasi Search Data (Cari Data) dengan Java (Netbeans) dan MySQL

Aplikasi search pada java memang tidak terlalu dibutuhkan jika data yang akan diinput tidak banyak. Kalau data yang diinput banyak dalam program yang dibuat dengan java tentunya akan kewalahan dalam mencari data yang diinginkan dan akan menghabiskan banyak waktu yang semestinya digunakan untuk hal yang lain malah terbuang karena hal ini.

Untuk membuat search data atau pencarian data maka yang pertama sekali dipersiapkan adalah sebuah database dan tabelnya disini penulis menggunakan nama database dengan nama scripting_mysql dan nama tabel dengan nama address. Untuk syntax sqlnya bisa dilihat seperti dibawah ini.

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

CREATE TABLE IF NOT EXISTS `address` (
  `serial` int(4) NOT NULL AUTO_INCREMENT,
  `name_first` varchar(30) NOT NULL,
  `name_last` varchar(30) NOT NULL,
  `address_01` varchar(40) NOT NULL,
  `address_02` varchar(40) NOT NULL,
  `address_city` varchar(30) NOT NULL,
  `address_state` varchar(2) NOT NULL,
  `address_postal_code` varchar(10) NOT NULL,
  PRIMARY KEY (`serial`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

INSERT INTO `address` (`serial`, `name_first`, `name_last`, `address_01`, `address_02`, `address_city`, `address_state`, `address_postal_code`) VALUES
(1, 'Clark', 'Kent', '344 Clinton St', 'Apt. #3B', 'Metropolis', 'NY', '10001'),
(2, 'Dave', 'Jones', '500 Second Avenue', 'Suite 100', 'Atlanta', 'GA', '30303'),
(3, 'Tom', 'Watson', '123 Golf Course Lane', 'Suite A', 'Macon', 'GA', '31066'),
(4, 'Jack', 'Nicklaus', '400 Laurel Oak Dr', 'Suite 49', 'Suwanee', 'GA', '31044'),
(5, 'Betty', 'Smith', '100 Main Street', 'Suite 500', 'Buffalo', 'NY', '14201'),
(6, 'Bruce', 'Wayne', '1007 Mountain Drive', '', 'Gotham City', 'NY', '10000'),
(7, 'Ghazali', 'Samudra', 'Grong-grong', 'Sigli', 'Pidie', 'Ac', '24152');

Selanjutnya buatlah sebuah jframe form dengan nama apa saja terserah anda namun disini penulis mengunakan nama MainMenu (MainMenu.java) dan desain lah formnya seperti gambar yang ada dibawah ini, kemudian isikan syntax seperti dibawah ini.

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import javax.swing.JOptionPane;
import javax.swing.UIManager;
import javax.swing.table.DefaultTableModel;

public class MainMenu extends javax.swing.JFrame {

    Connection conn;
    Statement stat;
    ResultSet hasil;
    /**
     * Creates new form MainMenu
     */
    public MainMenu() {
        initComponents();
        koneksi();
        datatabel();
    }
    
    public void koneksi(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn=DriverManager.getConnection("jdbc:mysql://localhost/scripting_mysql","root","kodokijo");
            stat=conn.createStatement();
        } catch (Exception e) {
            JOptionPane.showMessageDialog(null, e);
        }
    }
    
    public void datatabel(){
        Object[] Baris={"Nama","Family","Alamat 1","Alamat 2","Kota","Provinsi","Kode Pos"};
        DefaultTableModel tabmode = new DefaultTableModel(null, Baris);
        jTable1.setModel(tabmode);
        String sql = "select * from address where name_first like '%"+jTextField1.getText()+"%' or name_last like '%"+jTextField1.getText()+"%' or address_01 like '%"+jTextField1.getText()+"%' or address_02 like '%"+jTextField1.getText()+"%' or address_city like '%"+jTextField1.getText()+"%' or address_state like '%"+jTextField1.getText()+"%' or address_postal_code like '%"+jTextField1.getText()+"%'";
        try {
            hasil=stat.executeQuery(sql);
            while(hasil.next()){
                String a = hasil.getString("name_first");
                String b = hasil.getString("name_last");
                String c = hasil.getString("address_01");
                String d = hasil.getString("address_02");
                String e = hasil.getString("address_city");
                String f = hasil.getString("address_state");
                String g = hasil.getString("address_postal_code");
                String[] data = {a,b,c,d,e,f,g};
                tabmode.addRow(data);
            }
        } catch (Exception e) {
        }
    }
}

Sekian tutorial sedikit ini kalau ada kekurangan saya sendiri mohon maaf kalau bisa sih dikomentari pada kotak komentar yang ada dibawah ini. Untuk hasil dan tool-tool lainnya bisa dilihat pada gambar yang ada dibawah ini.

Membuat Aplikasi Search Data (Cari Data) dengan Java (Netbeans) dan MySQL

Download Source Code

Membuat Splash Screen dan ProgressBar dengan Java (Netbeans)

Splash Screen dan ProgressBar adalah sebuah tool yang digunakan pada sebuah program yang membutuhkan loading libraries, dengan adanya Splash Screen dan ProgressBar maka akan memudahkan dalam menampilkan sebuah program karena libraries atau ketergantungannya sudah lengkap.

Splash Screen adalah bentuk jframe atau jpanel yang digunakan untuk menampilkan pada awal hidup aplikasi, walaupun splash screen tidak banyak yang memerlukan tetapi splash screen dapat menjadi style tersendiri dari sebuah program

ProgressBar adalah bentuk progress yang berjalan berdasarkan waktu atau kelengkapan libraries atau ketergantungan biasanya muncul juga persentasenya yang berbentuk % yang akan dijalankan maksimal 100%.

Pada pembuatan aplikasi ini maka diharapkan bagi anda sudah mempunyai java dan netbeans ide, jika belum ada maka download pada link http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html dan https://netbeans.org/downloads/ selanjutnya instal dan jalankan sekaligus buat project baru berinama apa saja, kemudian buat jframe baru dengan nama main.java atau terserah selanjutnya desain jframenya dengan menaruh progressbar, kalau bisa desainnya seperti gambar dibawah ini.

Membuat Splash Screen dan ProgressBar dengan Java (Netbeans) 1

Selanjutnya buat jframe baru lagi beri nama home dan berikan atau desain sesuka hati anda, kemudian tempel script dibawah ini pada main.java tadi pada source seperti dibawah ini.

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.Timer;

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 *
 * @author ghazali
 */
public class main extends javax.swing.JFrame {
    Timer timer;
    ActionListener action;
    home hm;
    /**
     * Creates new form main
     */
    public main() {
        initComponents();
        setLocationRelativeTo(this);
        jLabel1.setText(null);
        aksipo();
        timer = new Timer(100, action);
        timer.start();
    }
    
    public void aksipo(){
        action = new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {
                progressBar.setValue(progressBar.getValue() + 5); //persen progress bar bertambah setiap 5 kali
                progressBar.setStringPainted(true);
                if (progressBar.getPercentComplete() == 1.0) {
                    timer.stop();
                    hm = new home();
                    hm.setVisible(true);
                }
            }
        };
        this.dispose();
    }
}

Untuk hasilnya bisa dilihat seperti pada gambar dibawah ini, terima kasih telah berkunjung semoga bermanfaat.

Membuat Splash Screen dan ProgressBar dengan Java (Netbeans) 2

Download Source Code

Membuat Link ke Internet Browser (Tautan) dengan Java (Netbeans)

Link merupakan sebuah alamat yang digunakan pada website namun bisa juga digunakan pada program java. Cara kerja link ini pada java adalah dengan mengklik jlabel maka akan terbuka browser baik firefox atau chrome maka akan terbuka pada tab baru link yang kita masukkan pada script java.

Untuk membuat aplikasi ini maka anda buatlah sebuah project baru pada netbeans ide kemudian buatlah file jframe berinama apa saja kemudian desain jframe dengan menaruh beberapa jlabel dan beri nama sesuai nama link yang akan dibuat dan buat event mouseclicked, kemudian letakkan scriptnya seperti dibawah ini.

import java.awt.Desktop;
import java.io.IOException;
import java.net.URI;
import java.net.URISyntaxException;
import java.util.logging.Level;
import java.util.logging.Logger;

/**
 *
 * @author ghazali
 */
public class main extends javax.swing.JFrame {

    /**
     * Creates new form main
     */
    public main() {
        initComponents();
    }
    
    private void jLabel1MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        try {
            Desktop desktop = Desktop.getDesktop();
            URI url = new URI("http://localhost/owncloud");
            if (Desktop.isDesktopSupported()) {
                try {
                    desktop.browse(url);
                } catch (IOException ex) {
                    Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
        }
    }                                    

    private void jLabel2MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        try {
            Desktop desktop = Desktop.getDesktop();
            URI url = new URI("http://localhost/ftp");
            if (Desktop.isDesktopSupported()) {
                try {
                    desktop.browse(url);
                } catch (IOException ex) {
                    Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
        }
    }                                    

    private void jLabel3MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        try {
            Desktop desktop = Desktop.getDesktop();
            URI url = new URI("http://localhost/phpmyadmin");
            if (Desktop.isDesktopSupported()) {
                try {
                    desktop.browse(url);
                } catch (IOException ex) {
                    Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
        }
    }                                    

    private void jLabel4MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        try {
            Desktop desktop = Desktop.getDesktop();
            URI url = new URI("http://extria.blogspot.com");
            if (Desktop.isDesktopSupported()) {
                try {
                    desktop.browse(url);
                } catch (IOException ex) {
                    Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
        }
    }                                    

    private void jLabel5MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        try {
            Desktop desktop = Desktop.getDesktop();
            URI url = new URI("http://www.google.co.id");
            if (Desktop.isDesktopSupported()) {
                try {
                    desktop.browse(url);
                } catch (IOException ex) {
                    Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
        }
    } 

}

Untuk hasilnya bisa dilihat seperti gambar dibawah ini, semoga bermanfaat, terima kasih telah berkunjung pada blog pemrograman saya.

Membuat Link ke Internet Browser (Tautan) dengan Java (Netbeans)

Download Source Code

Membuat Kalkulator Dengan Bahasa C++

Untuk membuat sebuah aplikasi kalkulator maka perlu diketahui untuk apa kalkulator dibuat apakah untuk aplikasi biasa atau main-main saja. Kalkulator disini dibuat untuk memudahkan seseorang dalam menghitung data yang berupa angka, setiap sistem operasi pasti menyediakan aplikasi bawaannya sendiri. Yang jadi pertanyaannya kenapa harus membuat kalkulator kan sudah ada pada aplikasi pembawaannya. Tentunya jawabannya sangat simpel apakah anda ingin menggunakan aplikasi orang untuk keperluan sehari-hari tentunya dalam hati kita kurang puas, yang diinginkan hati kita bagaimana membuat sebuah aplikasi baik sederhana atau terlalu rumit untuk keperluan sendiri.

Kali ini penulis akan membuat sebuah aplikasi yang mana apilkasi ini dapat berjalan pada terminal, untuk versi GUI tunggu tutorial yang lain lagi. Buatlah sebuah project baru dengan nama apa aja pada dev-c++, visual c++ atau netbeans c++ (cross platform), dalam project tersebut biasanya akan dibuat sendiri main.cpp kalau tidak ada silahkan buatkan. Untuk sintaxnya bisa disalin seperti yang ada dibawah ini.

#include<iostream>
#include<cmath>

using namespace std;

int main(){
//-------defining variables and initializing them-------------    
    double num1,num2;
    char operation,redo;
//--------Printing my name on screen----------------    
    cout<<"Selamat datang pada kalkulator v.1.0 dibuat oleh Ghazali"<<endl;
    cout<<"***************************************************************"<<endl;
    cout<<endl<<endl<<endl;
//--here do loop is used so that the program can be used more then one time
//without exiting the run screen---------------------------    
    do
    {
 //----receiving the variables from input--------------         
    cout<<" Masukkan operasi kalkulator berikut ini (+,-,*,/,s)";
    cout<<"[berarti untuk pertukaran]:";
    cin>>operation ;
    cout<<endl<<endl;
     cout<<" Tolong masukkan angka untuk (";
    cout<<operation<<"):"<<endl<<"1st num:";
    cin>>num1;
    cout<<"2nd num:" ;
    cin>>num2;
    cout<<endl;
 //---used switch function so thet the operater can be decided------------  
    switch (operation)
    {
//------calculating the requested equation for inputs------------- 
//-------at the same time printing the results on screen-----------          
     case'+':            
             cout<<"Hasil tambah dari ("<<num1<<","<<num2<<"):";
             cout<<num1+num2<<endl;
             break; 
     case'-':
             cout<<"Hasil kurang dari ("<<num1<<","<<num2<<"):";
             cout<<num1-num2<<endl;
             break;
      case'*':
             cout<<"Hasil kali dari ("<<num1<<","<<num2<<"):";
             cout<<num1*num2<<endl;
             break;
      case'/':
             cout<<"Hasil bagi dari ("<<num1<<","<<num2<<"):";
             if(num2==0)
             {
             cout<<"not valid"<<endl;
             }
             cout<<(num1/num2)<<endl;
             break;
      case's':
             cout<<"Tukar angka dari ("<<num1<<","<<num2<<"):";
             swap(num1,num2);
             cout<<"1stnumber="<<num1<<"and 2nd number="<<num2<<endl<<endl;                    
           break;
      default:
              cout<<"Tidak ada perintah"<<endl;
      
           }
 //----now once again the program will ask the user if want to continue or not          
           cout<<"masukkan y atau Y untuk melanjutkan:";
           cin>>redo;
           cout<<endl<<endl;
           }
           while(redo=='y'||redo=='Y');
           
   system("pause");
    return 0;
    
    }

Sekian tutorial kali ini kalau ada kekurangan silahkan komentari seperti yang ada dibawah ini. Untuk hasil bisa dilihat seperti gambar yang ada dibawah ini. Sekian terima kasih.

kalkulator-cpp-2016-05-04

Cara Membuat Kalkulator Sederhana Dengan Eclipse Android ADT

Kalkulator adalah mesin hitung atau sebuah alat dalam menghitung angka seperti penjumlahan, pengurangan, perkalian dan pembagian dari perhitungan sederhana sampai juga ada kalkulator khusus sains yang berguna dalam menghitung rumus matematika. Di zaman perkembangan teknologi sekarang ini, kalkulator sudah dimasukkan kedalam perangkat dan juga sebagai fungsi tambahan pada perangkat komputer, mobile, handphone, tablet dan jam tangan.

Sekarang kita akan membuat sebuah aplikasi kalkulator yang berjalan pada sistem operasi Android, kalkulator yang akan kita buat bersifat sederhana dan dapat menjadikan kita kreatif dalam membangun kedepan yang lebih cangih lagi khususnya pembuatan kalkulator.

Bahan Dibutuhkan

  1. Android studio atau ADT bundle (Eclipse IDE)
  2. Java JDK min 7
  3. SDK (Pastikan SDK Platform dan ARM terpasang)
  4. AVD atau emulator telah dibuat dan jalan

Cara Kerja

  1. Jalan Aplikasi
  2. Isi nilai pada First Value (untuk nilai pertama) dan Secod Value (untuk nilai kedua)
  3. Klik tombol operasi (+) untuk penjumlahan, (-) untuk pengurangan, (x) untuk perkalian atau (:) untuk pembagian
  4. Kemudian muncul Hasil

Membuat Aplikasi

  1. Jalankan Eclipse/Android Studio
  2. Klik File > New > Android Application Project
  3. Beri nama aplikasi pada Application Name maka secara otomatis akan terbuat project name dan package name
  4. Pilih Target SDK dan Compile With dengan Android versi terbaru (4.4.2 Kitkat atau API 19) dan klik Next dan Next
  5. Browse.. icon aplikasi anda dan klik Next dan Next
  6. Biarkan Activity Name dan Layout Name dasar yaitu (MainActivity.java dan activity_main.xml)

Disain Layout

Pertama: buat string untuk pemberian nama atau text kedalam aplikasi kita, untuk stringnya seperti dibawah ini.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Kalkulator</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="first_value">First Value</string>
    <string name="second_value">Second Value</string>
    <string name="tambah">+</string>
    <string name="kurang">-</string>
    <string name="kali">x</string>
    <string name="bagi">:</string>
    <string name="hasil">Hasil: 0</string>

</resources>

Kedua: desain layout activity dengan cara drag drop 3 textview, 2 edittext dan 4 button seperti gambar dibawah ini.

1 Android Kalkulator Sederhana
Ketiga: selain dari drag-drop tadi maka pilihan terakhir adalah dengan cara pilih dipojok tengah activity_main.xml disamping Graphical Layout kemudian sesuaikan seperti sintaks dibawah ini.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.codeberkas.kalkulator.MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/first_value" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:ems="10"
        android:inputType="number" >

        <requestFocus />
    </EditText>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText1"
        android:layout_below="@+id/editText1"
        android:layout_marginTop="24dp"
        android:text="@string/second_value" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2"
        android:ems="10"
        android:inputType="number" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText2"
        android:layout_below="@+id/editText2"
        android:layout_marginTop="24dp"
        android:text="@string/tambah" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_toRightOf="@+id/textView1"
        android:text="@string/kurang" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_toRightOf="@+id/button2"
        android:text="@string/kali" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button3"
        android:layout_alignBottom="@+id/button3"
        android:layout_toRightOf="@+id/button3"
        android:text="@string/bagi" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_below="@+id/button1"
        android:layout_marginTop="23dp"
        android:text="@string/hasil"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Pembuatan Aksi

Pertama: panggil inport kode librari dibawah ini

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

Kedua: buat variabel untuk mengindeks kesemua lini.

Button tambah, kurang, kali, bagi;
EditText first, second;
TextView hasil;

Ketiga: Pemanggilan id komponen activity_main.xml kedalam MainActivity.java

first = (EditText)findViewById(R.id.editText1);
second = (EditText)findViewById(R.id.editText2);
tambah = (Button)findViewById(R.id.button1);
kurang = (Button)findViewById(R.id.button2);
kali = (Button)findViewById(R.id.button3);
bagi = (Button)findViewById(R.id.button4);
hasil = (TextView)findViewById(R.id.textView3);

Keempat: pembuatan aksi untuk keempat tombol

tambah.setOnClickListener(new OnClickListener() {
   
 @Override
 public void onClick(View arg0) {
  // TODO Auto-generated method stub
  int value11 = Integer.parseInt(first.getText().toString());
  int value12 = Integer.parseInt(second.getText().toString());
  int result = value11 + value12;
  hasil.setText("Hasil: "+result);
 }
});
kurang.setOnClickListener(new OnClickListener() {
   
 @Override
 public void onClick(View arg0) {
  // TODO Auto-generated method stub
  int value21 = Integer.parseInt(first.getText().toString());
  int value22 = Integer.parseInt(second.getText().toString());
  int result = value21 - value22;
  hasil.setText("Hasil: "+result);
 }
});
kali.setOnClickListener(new OnClickListener() {
   
 @Override
 public void onClick(View arg0) {
  // TODO Auto-generated method stub
  int value31 = Integer.parseInt(first.getText().toString());
  int value32 = Integer.parseInt(second.getText().toString());
  int result = value31 * value32;
  hasil.setText("Hasil: "+result);
 }
});
bagi.setOnClickListener(new OnClickListener() {
   
 @Override
 public void onClick(View arg0) {
  // TODO Auto-generated method stub
  double value41 = Double.parseDouble(first.getText().toString());
  double value42 = Double.parseDouble(second.getText().toString());
  double result = value41 / value42;
  hasil.setText("Hasil: "+result);
 }
});

Kode Penuh

package com.codeberkas.kalkulator;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;


public class MainActivity extends ActionBarActivity {
 
 Button tambah, kurang, kali, bagi;
 EditText first, second;
 TextView hasil;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        first = (EditText)findViewById(R.id.editText1);
        second = (EditText)findViewById(R.id.editText2);
        tambah = (Button)findViewById(R.id.button1);
        kurang = (Button)findViewById(R.id.button2);
        kali = (Button)findViewById(R.id.button3);
        bagi = (Button)findViewById(R.id.button4);
        hasil = (TextView)findViewById(R.id.textView3);
        
        tambah.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
          int value11 = Integer.parseInt(first.getText().toString());
          int value12 = Integer.parseInt(second.getText().toString());
          int result = value11 + value12;
          hasil.setText("Hasil: "+result);
   }
  });
        kurang.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
          int value21 = Integer.parseInt(first.getText().toString());
          int value22 = Integer.parseInt(second.getText().toString());
          int result = value21 - value22;
          hasil.setText("Hasil: "+result);
   }
  });
        kali.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
          int value31 = Integer.parseInt(first.getText().toString());
          int value32 = Integer.parseInt(second.getText().toString());
          int result = value31 * value32;
          hasil.setText("Hasil: "+result);
   }
  });
        bagi.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
          double value41 = Double.parseDouble(first.getText().toString());
          double value42 = Double.parseDouble(second.getText().toString());
          double result = value41 / value42;
          hasil.setText("Hasil: "+result);
   }
  });
        
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Hasil Aplikasi

Pertama: Aplikasi saat jalan pertama kali

2 Android Kalkulator Sederhana
Kedua: Ketika tombol tambah diklik

3 Android Kalkulator Sederhana operasi tambah
Ketiga: Ketika tombol kurang diklik

4 Android Kalkulator Sederhana operasi kurang
Keempat: Ketika tombol kali diklik

5 Android Kalkulator Sederhana operasi kali
Kelima: Ketika tombol bagi diklik

6 Android Kalkulator Sederhana operasi bagi

 

Cara Membuat Currency Converter Dengan Eclipse Android ADT

Currency Converter sering disebut juga Kurs (exchange rate) atau Forex (Foreign Exchange), Currency Converter cuma merupakan pengubahan dari sebuah nilai mata uang ke nilai mata uang lainnya, nilai dalam conversi dari Currency Converter ditentukan dengan Kurs yang berlaku saat ini atau yang berlaku pada suatu bank, sedangkan pengertian Kurs adalah harga dari mata uang di suatu negara yang dibeli/dijual dengan mata uang negara lainnya, Kurs adalah sebuah peranan penerjemah harga dari sebuah mata uang kepada mata uang lainnya, mata uang sebuah negara akan mahal jika sebuah negara nilai ekspornya mahal dan nilai impornya murah, jika sebuah negara nilai impornya mahal dan nilai ekspornya murah maka akan membuat mata uang negara itu tidak bernilai dari mata uang negara lainnya, Sedangkan Forex adalah perdagangan mata uang yang berlaku selama 24 jam, forex yang diperdagangkan adalah mata uang asing dan mengambil keuntungan jika nilai beli murah dan nilai jual mahal.

Selanjutnya kita akan membuat sebuah aplikasi yang dapat mengconversi dari sebuah mata uang kedalam mata uang lainnya dengan nama Currency Converter yang dibuat menggunakan Eclipse ADT dan juga bisa dibuat dengan menggunakan Android Studio. Untuk membuat aplikasi ini maka silahkan ikuti langkah-langkah dibawah ini.

Tool Dibutuhkan

  1. Android studio atau ADT bundle (Eclipse IDE)
  2. Java JDK min 7
  3. SDK (Pastikan SDK Platform dan ARM terpasang)
  4. AVD atau emulator telah dibuat dan jalan

Buat Project

  1. Jalankan Eclipse/Android Studio
  2. Klik File > New > Android Application Project
  3. Beri nama aplikasi pada Application Name maka secara otomatis akan terbuat project name dan package name
  4. Pilih Target SDK dan Compile With dengan Android versi terbaru (4.4.2 Kitkat atau API 19) dan klik Next dan Next
  5. Browse.. icon aplikasi anda dan klik Next dan Next
  6. Biarkan Activity Name dan Layout Name dasar yaitu (MainActivity.java dan activity_main.xml)

Cara Kerja

  1. Jalankan Aplikasi
  2. Beri nilai mata uang asing
  3. Pilih nama mata uang asing
  4. Klik Convert
  5. Lihat hasilnya yang telah diubah ke rupiah

Disain Layout

Pertama: edit res > value > strings.xml atau samakan seperti dibawah ini

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Currency Converter</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="jumlah">Jumlah</string>
    <string name="mata">Pilih Mata Uang</string>
    <string name="convert">Convert</string>
    <string name="usd">US Dollar</string>
    <string name="eur">Euro</string>
    <string name="gbp">British Pound Sterling</string>
    <string name="sgd">Singapore Dollar</string>
    <string name="aud">Australian Dollar</string>
    <string name="cny">Chinese Yuan</string>
    <string name="hkd">Hong Kong Dollar</string>
    <string name="jpy">Japanese Yen</string>
    <string name="nzd">New Zealand Dollar</string>
    <string name="myr">Malaysian Ringgit</string>

</resources>

Kedua: tambahkan kedalam res > layout > activity_main.xml 3 textview, 1 scrollview, 1 radiogroup, 10 radiobutton dan 1 button seperti gambar dibawah ini.
1 Android Currency Converter
Ketiga: atau selain nomor kedua anda juga bisa samakan kode xmlnya seperti dibawah ini.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.currencyconverter.MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="10dp"
        android:text="@string/jumlah" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:ems="10"
        android:inputType="number" >

        <requestFocus />
    </EditText>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText1"
        android:layout_below="@+id/editText1"
        android:layout_marginTop="19dp"
        android:text="@string/mata" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_below="@+id/button1"
        android:layout_marginTop="20dp"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceLarge" />
    
    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="wrap_content"
        android:layout_height="125dp"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2" >

        <LinearLayout
            android:layout_width="278dp"
            android:layout_height="125dp"
            android:orientation="vertical" >
            
      <RadioGroup
          android:id="@+id/radioGroup1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" >
  
          <RadioButton
              android:id="@+id/usd"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:checked="true"
              android:text="@string/usd" />
  
          <RadioButton
              android:id="@+id/sgd"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/sgd" />
  
          <RadioButton
              android:id="@+id/nzd"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/nzd" />
          
          <RadioButton
              android:id="@+id/myr"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/myr" />
  
          <RadioButton
              android:id="@+id/jpy"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/jpy" />
          
          <RadioButton
              android:id="@+id/hkd"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/hkd" />
  
          <RadioButton
              android:id="@+id/gbp"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/gbp" />
          
          <RadioButton
              android:id="@+id/eur"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/eur" />
  
          <RadioButton
              android:id="@+id/cny"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/cny" />
      </RadioGroup>
        </LinearLayout>
    </ScrollView>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/scrollView1"
        android:layout_below="@+id/scrollView1"
        android:layout_marginTop="15dp"
        android:text="@string/convert" />

</RelativeLayout>

Kode Penuh

Edit MainActivity.java kemudian samakan dengan kode yang ada dibawah ini.

package com.example.currencyconverter;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {
 
 private Button btn;
 private EditText inputer;
 private TextView hasil;
 private RadioGroup rg;
 private RadioButton rb;
 Double res;
 String banding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        btn = (Button)findViewById(R.id.button1);
        inputer = (EditText)findViewById(R.id.editText1);
        hasil = (TextView)findViewById(R.id.textView3);
        rg = (RadioGroup)findViewById(R.id.radioGroup1);
        
        btn.setOnClickListener(new View.OnClickListener() {
   
   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    int selid = rg.getCheckedRadioButtonId();
    rb = (RadioButton)findViewById(selid);
    
    banding = rb.getText().toString();
    
    if(banding.equals("US Dollar")){
     Double value1 = Double.parseDouble(inputer.getText().toString());
     res = value1 * 13920;
     hasil.setText("Rupiah: "+res);
    } else if(banding.equals("Euro")){
     Double value2 = Double.parseDouble(inputer.getText().toString());
     res = value2 * 15199;
     hasil.setText("Rupiah: "+res);
    } else if(banding.equals("British Pound Sterling")){
     Double value3 = Double.parseDouble(inputer.getText().toString());
     res = value3 * 20228;
     hasil.setText("Rupiah: "+res);
    } else if(banding.equals("Singapore Dollar")){
     Double value4 = Double.parseDouble(inputer.getText().toString());
     res = value4 * 9670;
     hasil.setText("Rupiah: "+res);
    } else if(banding.equals("Australian Dollar")){
     Double value5 = Double.parseDouble(inputer.getText().toString());
     res = value5 * 9701;
     hasil.setText("Rupiah: "+res);
    } else if(banding.equals("Chinese Yuan")){
     Double value6 = Double.parseDouble(inputer.getText().toString());
     res = value6 * 2124;
     hasil.setText("Rupiah: "+res);
    } else if(banding.equals("Hong Kong Dollar")){
     Double value7 = Double.parseDouble(inputer.getText().toString());
     res = value7 * 1793;
     hasil.setText("Rupiah: "+res);
    } else if(banding.equals("Japanese Yen")){
     Double value8 = Double.parseDouble(inputer.getText().toString());
     res = value8 * 118;
     hasil.setText("Rupiah: "+res);
    } else if(banding.equals("New Zealand Dollar")){
     Double value9 = Double.parseDouble(inputer.getText().toString());
     res = value9 * 9091;
     hasil.setText("Rupiah: "+res);
    } else if(banding.equals("Malaysian Ringgit")){
     Double value10 = Double.parseDouble(inputer.getText().toString());
     res = value10 * 3152;
     hasil.setText("Rupiah: "+res);
    } else{
     Toast.makeText(MainActivity.this, "Maaf anda belum pilih mata uang "+banding, Toast.LENGTH_LONG).show();
    }
   }
  });
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Penjelasan Kode

Pertama: impor pustaka yang dibutuhkan

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

Kedua: buat variabel

private Button btn;
private EditText inputer;
private TextView hasil;
private RadioGroup rg;
private RadioButton rb;
Double res;
String banding;

Ketiga: buat pemanggilan antara id activity_main.xml kedalam MainActivity.java

btn = (Button)findViewById(R.id.button1);
inputer = (EditText)findViewById(R.id.editText1);
hasil = (TextView)findViewById(R.id.textView3);
rg = (RadioGroup)findViewById(R.id.radioGroup1);

Keempat: buat button aksi untuk mengeksekusi nilai

btn.setOnClickListener(new View.OnClickListener() {
   
 @Override
 public void onClick(View v) {
  // TODO Auto-generated method stub
    
 }
});

Kelima: membuat isi dari eksekusi nilai pada button

int selid = rg.getCheckedRadioButtonId();
rb = (RadioButton)findViewById(selid);
    
banding = rb.getText().toString();
    
if(banding.equals("US Dollar")){
 Double value1 = Double.parseDouble(inputer.getText().toString());
 res = value1 * 13920;
 hasil.setText("Rupiah: "+res);
} else if(banding.equals("Euro")){
 Double value2 = Double.parseDouble(inputer.getText().toString());
 res = value2 * 15199;
 hasil.setText("Rupiah: "+res);
} else if(banding.equals("British Pound Sterling")){
 Double value3 = Double.parseDouble(inputer.getText().toString());
 res = value3 * 20228;
 hasil.setText("Rupiah: "+res);
} else if(banding.equals("Singapore Dollar")){
 Double value4 = Double.parseDouble(inputer.getText().toString());
 res = value4 * 9670;
 hasil.setText("Rupiah: "+res);
} else if(banding.equals("Australian Dollar")){
 Double value5 = Double.parseDouble(inputer.getText().toString());
 res = value5 * 9701;
 hasil.setText("Rupiah: "+res);
} else if(banding.equals("Chinese Yuan")){
 Double value6 = Double.parseDouble(inputer.getText().toString());
 res = value6 * 2124;
 hasil.setText("Rupiah: "+res);
} else if(banding.equals("Hong Kong Dollar")){
 Double value7 = Double.parseDouble(inputer.getText().toString());
 res = value7 * 1793;
 hasil.setText("Rupiah: "+res);
} else if(banding.equals("Japanese Yen")){
 Double value8 = Double.parseDouble(inputer.getText().toString());
 res = value8 * 118;
 hasil.setText("Rupiah: "+res);
} else if(banding.equals("New Zealand Dollar")){
 Double value9 = Double.parseDouble(inputer.getText().toString());
 res = value9 * 9091;
 hasil.setText("Rupiah: "+res);
} else if(banding.equals("Malaysian Ringgit")){
 Double value10 = Double.parseDouble(inputer.getText().toString());
 res = value10 * 3152;
 hasil.setText("Rupiah: "+res);
} else{
 Toast.makeText(MainActivity.this, "Maaf anda belum pilih mata uang "+banding, Toast.LENGTH_LONG).show();
}

Screenshot Hasil

Pertama: conversi mata uang dollar ke nilai mata uang rupiah

2 Android Currency Converter
Kedua: conversi mata uang malaysia ke nilai mata uang rupiah

3 Android Currency Converter

Cara Membuat Menubar Dan Icon Serta Submenu Dengan Eclipse Android ADT

Menubar dalam sebuah aplikasi android atau mobile lainya seperti ios, windows phone atau ubuntu phone sangat ditekankan dan bisa dibilang wajib ada serta juga setiap menubar akan ditampilkan icon beserta dengan submenu, pada artikel kali ini kita akan membahas cara membuat menubar, menu icon dan submenu dengan menggunakan android eclipse adt bundle.

Bahan Dibutuhkan

  1. Android IDE (Eclipse ADT atau Android Studio)
  2. Pastikan sudah terinstall ARM dan SDK Platform
  3. Buat AVD Emulator dan pastikan berjalan
  4. Selesai (Saya Menggunakan Eclipse ADT)

Buat Project

  1. Buka Eclipse di folder eclipse atau jalankan Android Studio
  2. Buat Project baru dan berinama terserah
  3. Isi nama aplikasi beserta dengan target sdk sama compile with (saya menggunakan api 19 atau android 4.4.2)
  4. kemudian klik next sampai pada atau biarkan MainActivity.java dan activity_main.xml dan klik finish.

Desain Menu

Pertama: Edit res > value > strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">menuBar</string>
    <string name="hello_world">Hello world!</string>
    <string name="list">List</string>
    <string name="file">File</string>
    <string name="view">View</string>
    <string name="add">Add</string>
    <string name="action_settings">Settings</string>
    <string name="profil">Profil</string>
    <string name="setelan">Setelan</string>
    <string name="about">About</string>
    <string name="exit">Exit</string>
    <string name="title_activity_second">SecondActivity</string>
    <string name="one">One Item</string>
    <string name="two">Two Item</string>
    <string name="three">About Item</string>

</resources>

Kedua: Edit res > menu > main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.menubar.MainActivity" >

    <item android:id="@+id/list"
        android:orderInCategory="100"
        android:title="@string/list"
        app:showAsAction="always"
        />
    
    <item android:id="@+id/file"
        android:orderInCategory="100"
        android:title="@string/file"
        app:showAsAction="always"
        >
    </item>
    
    <item android:id="@+id/add"
        android:orderInCategory="100"
        android:title="@string/add"
        app:showAsAction="ifRoom"
        />
    
    <item android:id="@+id/view"
        android:orderInCategory="100"
        android:title="@string/view"
        app:showAsAction="ifRoom"
        />
    
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never"/>
    
</menu>

Aksi Menu

Pertama: Buka dan edit src > package > MainActivity.java dan cari dan gantikan sintaks dibawah ini

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        } else if (id == R.id.list) {
            Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.profil) {
         Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.setelan) {
         Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.about) {
         Toast.makeText(getApplication(), "Ini adalah aplikasi pertama T Ghazali", Toast.LENGTH_LONG).show();
        } else if (id == R.id.exit) {
            finish();
        } else{
         Toast.makeText(getApplication(), "Anda salah pilih menu", Toast.LENGTH_LONG).show();
        }
        return super.onOptionsItemSelected(item);
    }

Kedua: untuk sintaks atau kode penuh MainActivity.java seperti dibawah ini

package com.example.menubar;

import android.support.v7.app.ActionBarActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        } else if (id == R.id.list) {
            Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.profil) {
         Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.setelan) {
         Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.about) {
         Toast.makeText(getApplication(), "Ini adalah aplikasi pertama T Ghazali", Toast.LENGTH_LONG).show();
        } else if (id == R.id.exit) {
            finish();
        } else{
         Toast.makeText(getApplication(), "Anda salah pilih menu", Toast.LENGTH_LONG).show();
        }
        return super.onOptionsItemSelected(item);
    }
}

Sub Menu

Untuk pembuatan submenu cukup ditambahkan kedalam item menu seperti kode dibawah ini.

...
    <item android:id="@+id/file"
        android:orderInCategory="100"
        android:title="@string/file"
        app:showAsAction="always"
        >
        <menu>
            <item android:id="@+id/profil"
          android:orderInCategory="100"
          android:title="@string/profil"
          app:showAsAction="ifRoom"
          />
            <item android:id="@+id/setelan"
          android:orderInCategory="100"
          android:title="@string/setelan"
          app:showAsAction="ifRoom"
          />
            <item android:id="@+id/about"
          android:orderInCategory="100"
          android:title="@string/about"
          app:showAsAction="ifRoom"
          />
            <item android:id="@+id/exit"
          android:orderInCategory="100"
          android:title="@string/exit"
          app:showAsAction="ifRoom"
          />
        </menu>
    </item>
...

Icon Menu

Pertama: copy paste icon menu format png kedalam folder res > drawable-mdpi seperti gambar dibawah ini.

pastekan icon logo eclipse adt
Kedua: edit menu tadi dengan penambahan android:icon seperti kode dibawah ini

memanggil icon ke eclipse adt

...
    <item android:id="@+id/list"
        android:icon="@drawable/daftar"
        android:orderInCategory="100"
        android:title="@string/list"
        app:showAsAction="always"
        />
    
    <item android:id="@+id/file"
        android:icon="@drawable/setelan"
        android:orderInCategory="100"
        android:title="@string/file"
        app:showAsAction="always"
        >
    </item>
...

Hasil

Untuk hasil dari menubar sama icon dan submenu seperti gambar dibawah ini.

menu tanpa icon menu dengan icon menu dengan submenu

Cara Download Dan Install Eclipse Android ADT Windows Linux Mac OS X

Pada situs resmi developer android sudah tidak ada lagi eclipse adt bundle versi terbaru bahkan versi lamapun sudah tidak dipublikasi, ini dikarenakan untuk pembuatan aplikasi android sangat ditekankan untuk menggunakan Android Studio, Android Studio sangat bagus dalam disain dan pembuatan aplikasi dibandingkan dengan menggunakan eclipse namun untuk menggunakan PhoneGap maka android studio tidak disarankan karena agak susah berbeda halnya penggunakan phonegap pada eclipse adt yang hanya drag drop atau copy paste saja selesai.

Cara Download Dan Install Eclipse ADT Bundle Windows Linux Mac OS X
Yang jadi masalahnya adalah bagaimana dan apa link untuk bisa didownload eclipse adt bundle windows, linux ataupun mac os x, selain adt bundle kita juga bisa install manual dengan cara download dulu eclipsenya kemudian install plugin adt didalam eclipse tersebut, namun jika kita menggunakan metode ini maka kemungkinan error 75 % karena ada beberapa eclipse yang tidak support atau adt pluginnya tidak support.

Untuk eclipse adt bundle windows bisa didapatkan dibawah ini, tinggal anda download dulu kemudian ekstaks dan buka folder eclipse kemudian jalankan.

  1. Download untuk Windows 32bit:
  2. Download untuk Windows 64bit:
  3. Download untuk Linux 32bit:
  4. Download untuk Linux 64bit:
  5. Download untuk Mac OS X:

Cara menggunakan eclipse adt bundle windows atau linux atau mac os x seperti dibawah ini.

  1. Download eclipse adt bundle diatas
  2. Ektraks dimana saja disarankan di C:/
  3. Buka folder eclipse dan jalankan eclipse.exe
  4. Jika muncul dialog penyimpanan workspace klik next saja
  5. Pilih menu Window > Android SDK Manager
  6. Conteng SDK Platform dan ARM EABI v7a System Image pada Android 4.4.2 (Api 19)
  7. Klik tombol install tunggu sampai selesai muncul done dipojok bawah kiri
  8. Kemudian restart/keluar eclipse dan jalankan kembali
  9. Kemudian pilih Window > Android Virtual Device Manager dan klik tombol Create… disamping kanan pojok atas
  10. berinama terserah pada AVD Name, pilih ukuran device 320 x 480 mdpi, target Android 4.4.2, CPU/EBI pilih ARM, pilih skin WQVGA432, dan SD Card > Size beri diatas 600 kemudian klik tombol ok
  11. Selesai

Langkah selanjutnya baca artikel cara membuat project/aplikasi baru pada eclipse adt bundle (Android IDE), sekian.

Cara Membuat Project Baru Pada Eclipse Android ADT

Jika anda baru saja mengenal eclipse dan adt plugin pasti anda bertanya-tanya bagaimana caranya membuat project atau aplikasi android baru menggunakan eclipse adt bundle ini, nah dari itulah saya membuat artikel sederhana ini yang berguna bagi yang masih pemula yang ingin mengembangkan aplikasi android melalui eclipse adt bundle seperti dibawah ini.

Ada tiga cara dalam membuat project baru yaitu dengan cara klik kanan pada Package Manager kemudian pilih New > Android Application Project atau klik icon di toolbar dan pilih Android Application Project ataupun pilih menu File > New > Android Application Project atau Others kemudian pilih folder Android > Android Application Project atau seperti gambar dibawah ini.
buat project baru pada eclipse adt
Kemudian muncul dialog yang menyuruh Anda untuk mengisi Application Name dengan nama apa saja kemudian Project Name dan Package Name akan dibuat secara otomatis, kemudian biarkan minimum sdk dan pilih Target SDK dan Compile With yaitu Android 4.4.2 (API 19) atau terserah kemudian klik next.
beri nama project baru eclipse adt
Biarkan contengan kemudian klik next dan browse gambar dengan format png untuk android icon Anda dan klik next.
conteng target activity dan logo

beri logo project baru kita pada eclipse adt
Kemudian biarkan Blank Activity terpilih dan klik next, kemudian biarkan Activity Name yaitu MainActivity dan Layout Name yaitu activity_main dan klik finish

buat activity launcer pada eclipse adt

beri nama activity pada eclipse adt
Kemudian hasilnya seperti gambar dibawah ini dan selesai, silahkan eksperimen sesuka hati anda.
hasil sepert ini untuk activity baru pada project baru eclipse adt

Cara Membuat Tabs Layout Dengan Eclipse Android ADT

Tabs layout atau tab system adalah bentuk tabs yang akan terbuka layout-layout baru dalam satu activity, jika Anda membuat sebuah activity dan menginginkan bisa membuat menu-menu dari batton maka saya sarankan jangan gunakan button dan activity baru cukup menggunakan tabs menu atau tabs layout ini karena lebih singkat dan ringan aplikasi kita tidak perlu harus banyak activity.

Untuk membuat tabs layout ini dibutuhkan sebuah project baru kemudian drag-drop tabs dan component (listview,form,webview,dll) yang dibutuhkan kedalam layout dari tabs, untuk lebih jelas silahkan ikuti langkah-langkah dibawah ini.

1. Setelah Anda membuat project baru disini kemudian Anda drag-drop tabs kedalam disain project activity_main.xml

Cara Membuat Tabs Layout Dengan Android IDE 1
2. Atau anda juga bisa cocokkan dengan kode activity_main.xml dibawah ini.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.tablayout.MainActivity" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >

                    <ListView
                        android:id="@+id/listView1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1" >
                    </ListView>

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                    
                    <TextView
                        android:id="@+id/textView1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Large Text"
                        android:textAppearance="?android:attr/textAppearanceLarge" />

                    <EditText
                        android:id="@+id/editText1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:ems="10"
                        android:inputType="textPersonName" >

                        <requestFocus />
                    </EditText>
                    
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                    
                    <WebView
                        android:id="@+id/webView1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />

                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</RelativeLayout>

3. Selanjutnya edit MainActivity.java kemudian isikan kode dibawah ini kedalam onCreate

TabHost Taband;

Taband = (TabHost) findViewById(android.R.id.tabhost);
Taband.setup();
               
Taband.addTab(Taband.newTabSpec("tab1").setIndicator("Lihat").setContent(R.id.tab1));
Taband.addTab(Taband.newTabSpec("tab2").setIndicator("Tambah").setContent(R.id.tab2));
Taband.addTab(Taband.newTabSpec("tab3").setIndicator("Cari").setContent(R.id.tab3));
               
Taband.setCurrentTab(0);

4. Untuk kode penuh dari MainActivity seperti dibawah ini.

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TabHost;


public class MainActivity extends ActionBarActivity {
	
	TabHost Taband;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        Taband = (TabHost) findViewById(android.R.id.tabhost);
        Taband.setup();
               
        Taband.addTab(Taband.newTabSpec("tab1").setIndicator("Lihat").setContent(R.id.tab1));
        Taband.addTab(Taband.newTabSpec("tab2").setIndicator("Tambah").setContent(R.id.tab2));
        Taband.addTab(Taband.newTabSpec("tab3").setIndicator("Cari").setContent(R.id.tab3));
               
        Taband.setCurrentTab(0);
        
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

5. Hasilnya pada emulator seperti dibawah ini.

Cara Membuat Tabs Layout Dengan Android IDE 2

Cara Membuat WebView Dengan Eclipse Android ADT

WebView adalah sebuah komponen untuk membuat aplikasi web atau website berjalan dalam aplikasi Android dengan cara memanggil url atau nama domain/ip atau dengan cara menyimpan file web seperti html, css dan javascript kedalam folder assets pada project aplikasi Android atau biasanya ditambah folder www dan disimpan kedalamnya.

Banyak sekali manfaat dalam menggunakan webview salah satunya adalah bagi para developer dari pengembangan web dengan tidak perlu harus belajar pemrograman mobile cukup dengan tahu sedikit yang berkaitan dengan Webview ini, berikut dibawah ini adalah cara membuat project aplikasi Android menggunakan Eclipse ADT.

Buat Project Baru

  1. Buka Eclipse yang sudah ada ADT dan Android SDK
  2. Buat project baru dengan klik next sampai pembuatan activity baru, perhatian: anda disarankan untuk tidak membuat activity baru karena nanti setelah project terbuat baru dibuat activity secara manual dengan membuat java pada src > package dan xml pada res > layout
  3. Akan tetapi jika Anda ingin ringan maka bisa langsung buat activity bersama project dengan syarat ActionBarActivity harus diubah ke Activity biasa karena anda sedikit error pada pembuatan WebView

Desain WebView

Buat desain layout bernama activity_main.xml atau jika sudah ada maka silahkan edit di res > layout > activity_main.xml, dengan cara ditambahkan WebView widget kedalam area layout activity atau seperti sintaks dibawah ini

<WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

Untuk kode penuh dari activity_main.xml dan webview seperti kode dibawah ini.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.mywebview.MainActivity" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

</RelativeLayout>

Pembuatan Perintah/Aksi

Untuk membuat perintah maka kita akan membuat MainActivity.java pada src > package (com.example.xxxxx) atau jika sudah terbuat silahkan di edit dan jangan lupa ubah ActionBarActivity ke Activity biasa, selanjutnya panggil import tool-tool yang dibutuhkan.

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {
//... disini kode webview dibawah ini tinggal gantikan saja komentar ini ...
}

Selanjutnya adalah pemanggilan antara webview activity_main.xml ke id MainActivity.java didalam onCreate dan dibawah setContentView serta dengan loadUrl untuk pemanggilan urlnya

WebView  myWebView = (WebView) findViewById(R.id.webView1);
myWebView.loadUrl("file:///android_asset/www/index.html");

Selanjutnya buat setelah untuk webview kita seperti memberikan javascript dan lain-lain.

WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Selanjutnya membuat klik link yang berguna untuk berjalan di webview ketika link lain di klik dan tidak redirect ke browser external, ini sangat berguna untuk web yang memiliki link atau halaman.

myWebView.setWebViewClient(new MyWebViewClient());

Selanjutnya membuat class dalam class untuk MyWebViewClient diluar oCreate dan didalam class MainActivity

class MyWebViewClient extends WebViewClient{

     @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (Uri.parse(url).getHost().equals("androidpidie.blogspot.com")) {
                // This is my web site, so do not override; let my WebView load the page
                return false;
            }
            // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
            Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(intent);
            return true;
        }

}

Untuk kode penuh pada MainActivity.java seperti dibawah ini

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends Activity {
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        WebView  myWebView = (WebView) findViewById(R.id.webView1);
        myWebView.loadUrl("file:///android_asset/www/index.html");
        //myWebView.loadUrl("http://10.0.2.2"); for web server (XAMPP/WampServer/Lamp)
        //myWebView.loadUrl("http://androidpidie.blogspot.com"); for your website
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        myWebView.setWebViewClient(new MyWebViewClient());
        
    }
 
 class MyWebViewClient extends WebViewClient{

     @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (Uri.parse(url).getHost().equals("androidpidie.blogspot.com")) {
                // This is my web site, so do not override; let my WebView load the page
                return false;
            }
            // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
            Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(intent);
            return true;
        }

 }

}

Mengedit Manifest

Yang perlu anda tambahkan kedalam AndroidManifest.xml adalah kode dibawah ini untuk mengaktifkan internet atau jaringan online pada aplikasi Android kita.

<uses-permission android:name="android.permission.INTERNET" />

Selanjutnya pastikan anda memanggil activity di AndroidManifest.xml beserta dengan membuat activity tidak memiliki toolbar dan membuat activity kita menjadi fullscreen.

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application>

Dibawah ini adalah kode penuh dari AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.mywebview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />
    
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Pembuatan index.html menggunakan jQuery Mobile pada folder assets > www

<!DOCTYPE html> 
<html>
<head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
 
<!-- Start of first page -->
<div data-role="page" id="foo">

 <div data-role="header" data-position="fixed">
  <h1>Foo</h1>
 </div><!-- /header -->

 <div role="main" class="ui-content">
  <p>I'm first in the source order so I'm shown as the page.</p>
  <p>View internal page called <a href="#bar">bar</a></p>
 </div><!-- /content -->

 <div data-role="footer" data-position="fixed">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">

 <div data-role="header" data-position="fixed">
  <h1>Bar</h1>
 </div><!-- /header -->

 <div role="main" class="ui-content">
  <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
  <p><a href="#foo">Back to foo</a></p>
 </div><!-- /content -->

 <div data-role="footer" data-position="fixed">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->
 
</body>
</html>

Screenshot Hasil

Cara Membuat WebView Dengan Android IDE 1

Cara Membuat WebView Dengan Android IDE 2

Cara Menginstall PhoneGap Pada Eclipse Android ADT

Phonegap adalah framework dari html, css dan javascript yang dibuat untuk menjalankan ketiga bahasa tersebut pada aplikasi mobile seperti Android, IOS, Windows Phone atau Blackberry. Fungsi phonegap adalah untuk mengerakkan perangkat kerang dengan menggunakan bahasa javascript dan untuk kerangka dan gaya menggunakan html dan css. Selain itu phonegap dibuat untuk developer atau programmer web untuk bisa membuat aplikasi mobile walaupun tidak bisa menguasai bahasa mobile seperti java dan lain-lain.

Cara kerja phonegap hampir mirip dengan WebView atau WebChromeView yang ada pada sistem operasi Android, yaitu sama-sama untuk manampilkan web kedalam aplikasi Android
namun yang berbeda adalah phonegap sudah mengembeded dalam tubuh project aplikasi Android sedangkan dengan webview itu hanya sebatas widget yang ditambahkan kedalam activity project Android. Untuk membuat atau menginstall phonegap pada Eclipse ADT silahkan ikuti langkah-langkah dibawah ini.

Bahan-Bahan

  1. Download Phonegap disini dan gunakan versi 2.9.0 (jangan gunakan versi diatasnya)
  2. Eclipse ADT dan Android SDK beserta dengan AVD Emulator
  3. Bikin aplikasi web dengan jQuery Mobile, Bootstrap atau Ratchet

Cara membuat project Android baru menggunakan phonegap dan Eclipse ADT dibawah ini

1. Download dan ekstrak file phonegap

ekstrak-phonegap
2. Buka Eclipse dan bikin project android baru tanpa membuat activitynya

buat-project-baru-phonegap
3. Copy folder xml dari folder ekstrak phonegap-2.9.0 > lib > android dan pastekan ke folder project res

copy-paste-xml-kefolder-res
4. Copy file cordova-2.9.0.jar dari phonegap-2.9.0 > lib > android dan pastekan ke folder project libs

copy-paste-jar-kefolder-libs
5. Klik kanan pada libs > cordova-2.9.0.jar dan pilih Build Path > Add to Build Path

klik-kanan-build-to-path
6. Buat folder baru pada assets yang bernama www

buat-folder-baru-assets
7. Copy file cordova.js dari phonegap-2.9.0 > lib > android dan pastekan ke folder project assets > www

pastekan-js-ke-www
8. Buat file index.html menggunakan jQuery Mobile atau Bootstrap ataupun Ratchet dan pastekan ke folder project assets > www (panggil script phonegap)

panggil-cordova
9. Buat file MainActivity.java pada src > com.example.xxxx

buat-class-phonegap
10. Isi kode java android dalam MainActivity.java dibawah ini.

import org.apache.cordova.Config;
import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class MainActivity extends DroidGap {

 @Override
 public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //super.loadUrl("file:///android_asset/www/index.html");
        super.loadUrl(Config.getStartUrl());
    }
 
}

11. Edit AndroidManifest.xml seperti dibawah ini.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.phonegapsaya"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />
  
 <supports-screens
  android:largeScreens="true"
  android:normalScreens="true"
  android:smallScreens="true"
  android:resizeable="true"
  android:anyDensity="true"
  />
  
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.VIBRATE" />
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
 <uses-permission android:name="android.permission.READ_PHONE_STATE" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.RECEIVE_SMS" />
 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
 <uses-permission android:name="android.permission.READ_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
 <uses-permission android:name="android.permission.GET_ACCOUNTS" />
 <uses-permission android:name="android.permission.BROADCAST_STICKY" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
     android:configChanges="orientation|keyboardHidden"  >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application> 

</manifest>

12. Gunakan kode dibawah ini pada index.html

<!DOCTYPE html> 
<html>
<head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
 
<!-- Start of first page -->
<div data-role="page" id="foo">

 <div data-role="header" data-position="fixed">
  <h1>Foo</h1>
 </div><!-- /header -->

 <div role="main" class="ui-content">
  <p>I'm first in the source order so I'm shown as the page.</p>
  <p>View internal page called <a href="#bar">bar</a></p>
 </div><!-- /content -->

 <div data-role="footer" data-position="fixed">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">

 <div data-role="header" data-position="fixed">
  <h1>Bar</h1>
 </div><!-- /header -->

 <div role="main" class="ui-content">
  <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
  <p><a href="#foo">Back to foo</a></p>
 </div><!-- /content -->

 <div data-role="footer" data-position="fixed">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->
 
</body>
</html>

13. Hasilnya seperti screenshot dibawah ini.

phonegap-berjalan

Cara Memperbaiki Wifi Mati Karena Update/Upgrade Windows 10

Saya hampir binggung bangaimana cara mengaktifkan kembali wifi kita yang ternonaktif karena update/upgrade windows 10 pada saat saya melakukan restart untuk update windows 10, nah yang jadi masalahnya setelah selesai windows update maka langsung saya koneksikan dengan dengan internet, namun yang anehnya adalah wifi tidak aktif namun driver lengkap, saat diklik Network settings malah beralih ke VPN bukan langsung ke menu wifi, menu wifi juga sudah kurang dan tidak ada wifinya.

Setelah saya cari diinternet juga katanya bermasalah pada VPN yang sudah tua jadi itu yang menyebabkan windows menonaktifkan wifi. sebenarnya cara mengaktifkan wifi kembali sangatlah mudah tanpa harus menginstall software pihak ketiga cukup setel saja langsung bisa wifi dan berselancar di internet kembali. Untuk mengetahui caranya silahkan ikuti langkah-langkah dibawah ini.

1. Klik kanan pada icon windows kemudian pilih Device Manager

klik-kanan-icon-windows-pilih-device-manager
Gambar 1. klik kanan icon windows pilih device manager

2. Klik Network adapters pastikan driver wifi Anda aktif (Punya komputer saya seperti gambar dibawah ini)

Klik Network adapters dan pilih driver wifi Anda
Gambar 2. Klik Network adapters dan pilih driver wifi Anda

3. Klik kanan pada driver wifi anda dan pilih Properties

Pilih Properties pada klik kanan driver wifi Anda
Gambar 3. Pilih Properties

4. Pilih Power Management dan jangan content (lepas contengan) Allow the computer to turn off this device to save power, untuk membiarkan komputer kita agar jangan mematikan wifi kita sebarangan.

Pilih Power Management dan uncheck allow
Gambar 4. Pilih Power Management dan uncheck allow

5. Kemudian Restart komputer Anda dan komputer Anda sudah bisa koneksi internet/wifi

Restart dan Wifi telah aktif
Gambar 5. Restart dan Wifi telah aktif

Sekian semoga bermanfaat bagi yang bingung cara mengaktifkan wifi yang mati akibat update atau upgrade windows 10, terima kasih telah berkunjung jangan lupa baca juga artikel yang lainnya.

Cara Membuat Project Baru Pada Intel XDK

Membuat project baru pada intel xdk dibutuhkan koneksi internet untuk mendownload file library yang dibutuhkan dari internet baik cordova, phonegap, ionic, angular dan lain-lain. Membuat project baru pada intel xdk sangat mudah dan akan kita bahas dibawah ini, setelah pembuatan project selanjunnya cuma drag-drop komponen atau item kedalam desain area beserta dengan pengaturan disamping kanan yang umumnya terdiri dari pengaturan icon, link href (id page tujuan: #id_page), dan style.

Untuk membuat project baru, pastikan bahwa anda telah menginstall intel xdk, jika belum silahkan baca di Cara Install Intel XDK Pada PC (Windows) dan setelah itu ikuti langkah-langkah dibawah ini.

1. Jalankan intel xdk kemudian akan muncul splash seperti gambar dibawah ini.

buka intel xdk

2. Kemudian pilih Layout and User Interface, pilih List View App (atau terserah Anda), Conteng Use App Designer dan klik Continue

buat project baru pada intel xdk

3. Beri nama project Anda dengan nama apa saja dan tempat simpan project Anda diatas kemudian klik Create untuk membuat dan mengunduh file library dari internet.

beri nama project baru pada intel xdk

4. Akan masuk Desain yang terdiri dari Page (membuat halaman), Control (drag-drop komponen), Properties (pengaturan link, icon, judul, id), Style (untuk pengayaan) dan Code disamping kiri pojok atas atau edit html juga sama untuk code base atau edit kode.

disain layout aplikasi pada intel xdk

5. Menjalankan Aplikasi kita ke Emulator

emulator intel xdk

6. Menciptakan Apk atau aplikasi yang dapat berjalan pada Android, selain Android, Anda juga bisa membuat aplikasi IOS atau Window Phone.

build app android pada intel xdk

Selesai, terima kasih telah berkunjung, kalau ada pertanyaan silahkan komentar dibawah ini.

Cara Membuat Tabel dan Form Dengan jQuery Mobile

Seperti pada tutorial yang lalu yang membahas dasar beserta dengan pembuatan toolbar, list menu sidebar panel, dan listview beserta dengan search form dan button juga disertai dengan page, kali ini kita juga akan membuat page, toolbar, button dengan ditambah dengan table dan form, untuk membuat project ini silahkan ikuti langkah-langkah dibawah ini.

Perlu anda perhatikan bahwa dalam pembuatan project ini adalah bisa kembangkan hasil project dengan mengabungkan dengan bahasa pemrograman yang berbasis aksi atau manajemen data seperti php, javascript dan framework keduanya.

1. Pastikan anda telah membaca artikel sebelumnya – Cara Membuat Web Mobile Menggunakan jQuery Mobile

2. Buatlah file baru dengan nama apa saja, pada tutorial ini menggunakan index.html dan copy pastekan kode dibawah ini kedalam file tersebut.

<!DOCTYPE html> 
<html>
<head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

 <!-- Tempat page yang ber-id home, tambah dan lihat -->
 
</body>
</html>

3. Tempelkan kode dibawah ini kedalam tag <body> sebelum </body> untuk membuat page pertama yang berisi dengan tabel dan button icon toolbar yang mengarah ke page lainnya.

jQuery Mobile CRUD Table

<!-- Start of first page -->
 <div data-role="page" id="home">

  <div data-role="header" data-position="fixed">
   <h1>My App</h1>
   <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-right">
    <a href="#tambah" data-transition="pop" class="ui-btn ui-btn-icon-right ui-icon-plus">Tambah</a>
    <a href="#lihat" data-transition="slide" class="ui-btn ui-btn-icon-right ui-icon-check">Lihat</a>
    <a href="#" class="ui-btn ui-btn-icon-right ui-icon-delete">Keluar</a>
   </div>
  </div><!-- /header -->

  <div role="main" class="ui-content">
  
   <table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
    <thead>
      <tr class="ui-bar-d">
     <th data-priority="2">Rank</th>
     <th>Movie Title</th>
     <th data-priority="3">Year</th>
     <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
     <th data-priority="5">Reviews</th>
      </tr>
    </thead>
    <tbody>
      <tr>
     <th>1</th>
     <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
     <td>1941</td>
     <td>100%</td>
     <td>74</td>
      </tr>
      <tr>
     <th>2</th>
     <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
     <td>1942</td>
     <td>97%</td>
     <td>64</td>
      </tr>
      <tr>
     <th>3</th>
     <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
     <td>1972</td>
     <td>97%</td>
     <td>87</td>
      </tr>
      <tr>
     <th>4</th>
     <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
     <td>1939</td>
     <td>96%</td>
     <td>87</td>
      </tr>
      <tr>
     <th>5</th>
     <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
     <td>1962</td>
     <td>94%</td>
     <td>87</td>
      </tr>
      <tr>
     <th>6</th>
     <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
     <td>1964</td>
     <td>92%</td>
     <td>74</td>
      </tr>
      <tr>
     <th>7</th>
     <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
     <td>1967</td>
     <td>91%</td>
     <td>122</td>
      </tr>
      <tr>
     <th>8</th>
     <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
     <td>1939</td>
     <td>90%</td>
     <td>72</td>
      </tr>
      <tr>
     <th>9</th>
     <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
     <td>1952</td>
     <td>89%</td>
     <td>85</td>
      </tr>
      <tr>
     <th>10</th>
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
     <td>2010</td>
     <td>84%</td>
     <td>78</td>
      </tr>
    </tbody>
     </table>
   
  </div><!-- /content -->

  <div data-role="footer" data-position="fixed">
   <h2>Footer</h2>
  </div><!-- /footer -->
  
 </div><!-- /page -->

4. Tempelkan kode page yang ber-id tambah dibawah page pertama (id: home) yang berguna untuk membuat form area yang berguna menyimpan atau mengedit data.

jQuery Mobile CRUD Form

<!-- Start of second page -->
 <div data-role="page" id="tambah">

  <div data-role="header">
   <a href="#home" data-transition="fade" class="ui-btn ui-shadow ui-corner-all ui-icon-back ui-btn-icon-notext">Back</a>
   <h1>Tambah</h1>
  </div><!-- /header -->

  <div role="main" class="ui-content">
   
   <div class="ui-body ui-body-a ui-corner-all">
    <h3>Form Area (Tambah)</h3>
    <p>
     <form method="post">
      <p>
       <label for="text-basic">Text input:</label>
       <input name="text-basic" id="text-basic" value="" type="text">
      </p>
      <p>
       <label for="textarea">Textarea:</label>
       <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
      </p>
      <p>
       <label for="select-choice-a" class="select">Custom select menu:</label>
       <select name="select-choice-a" id="select-choice-a" data-native-menu="false">
        <option>Custom menu example</option>
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
       </select>
      </p>
      <fieldset data-role="controlgroup">
       <legend>Radio buttons, vertical controlgroup:</legend>
        <input name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" type="radio">
        <label for="radio-choice-1">Cat</label>
        <input name="radio-choice-1" id="radio-choice-2" value="choice-2" type="radio">
        <label for="radio-choice-2">Dog</label>
        <input name="radio-choice-1" id="radio-choice-3" value="choice-3" type="radio">
        <label for="radio-choice-3">Hamster</label>
        <input name="radio-choice-1" id="radio-choice-4" value="choice-4" type="radio">
        <label for="radio-choice-4">Lizard</label>
      </fieldset>
      <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b">Submit</button>
     </form>
    </p>
   </div>
   
  </div><!-- /content -->
  
 </div><!-- /page -->

5. Tempelkan kode page yang ber-id lihat dibawah page yang ber-id tambah yang berguna untuk menampilkan data-data tabel dalam bentuk lainnya.

jQuery Mobile CRUD Lihat

<!-- Start of third page -->
 <div data-role="page" id="lihat">

  <div data-role="header">
   <a href="#home" data-transition="fade" class="ui-btn ui-shadow ui-corner-all ui-icon-back ui-btn-icon-notext">Back</a>
   <h1>Lihat</h1>
  </div><!-- /header -->

  <div role="main" class="ui-content">
   
   <table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive">
     <thead>
    <tr>
      <th data-priority="1">Rank</th>
      <th data-priority="persist">Movie Title</th>
      <th data-priority="2">Year</th>
      <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th data-priority="4">Reviews</th>
    </tr>
     </thead>
     <tbody>
    <tr>
      <th>1</th>
      <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
      <td>1941</td>
      <td>100%</td>
      <td>74</td>
    </tr>
    <tr>
      <th>2</th>
      <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
      <td>1942</td>
      <td>97%</td>
      <td>64</td>
    </tr>
    <tr>
      <th>3</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
      <td>1972</td>
      <td>97%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>4</th>
      <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
      <td>1939</td>
      <td>96%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>5</th>
      <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
      <td>1962</td>
      <td>94%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>6</th>
      <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
      <td>1964</td>
      <td>92%</td>
      <td>74</td>
    </tr>
    <tr>
      <th>7</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
      <td>1967</td>
      <td>91%</td>
      <td>122</td>
    </tr>
    <tr>
      <th>8</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
      <td>1939</td>
      <td>90%</td>
      <td>72</td>
    </tr>
    <tr>
      <th>9</th>
      <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
      <td>1952</td>
      <td>89%</td>
      <td>85</td>
    </tr>
    <tr>
      <th>10</th>
      <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
      <td>2010</td>
      <td>84%</td>
      <td>78</td>
    </tr>
     </tbody>
   </table>
   
  </div><!-- /content -->
  
 </div><!-- /page -->

 

Cara Membuat Web Mobile Menggunakan jQuery Mobile

Apa itu jQuery Mobile ? jQuery Mobile adalah sebuah framework yang dibangun untuk membuat sebuah web (HTML5, CSS3 dan JavaScript) berjalan dan digunakan untuk perangkat mobile seperti smartphone ataupun tablet, jQuery Mobile dibuat oleh jQuery foundation yang bertujuan untuk memudahkan para developer web dalam membuat aplikasi mobile seperti Android, IOS, Windows Phone, Ubuntu Phone, Blackberry, dan Webos.

Menggunakan jQuery Mobile dalam hal disain lebih mudah dan lebih singkat penulisan kode dibandingkan dengan mendisain lewat sebuah activity yang mengharuskan kita menulis banyak kode, file dan variabel. Apa saja yang dibutuhkan dalam membuat aplikasi mobile menggunakan jQuery Mobile ini ? Anda cukup download jQuery Mobile disini kemudian ekstrak dan gunakan atau copy paste file yang berektensi .css, .js dan juga sertakan folder images kedalam sebuah folder baru, selanjutnya buatkan file index.html atau bisa ikuti langkah-langkah dibawah ini dan juga bisa akses dokumentasi dan demo jQuery Mobile.

1. Download jQuery Mobile, ekstrak file download dimana saja kemudian copy pastekan file .css, .js dan folder images kedalam sebuah folder baru untuk project kita, jangan lupa juga copy paste juga jquery.js, selanjutnya buatkan file index.html dan isikan kode dasar dari jquery mobile.

File jQuery Mobile

<!DOCTYPE html> 
<html>
<head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
 <script src="jquery.min.js"></script>
 <script src="jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
 ...content goes here...
</body>
</html>

2. Jika anda malas melakukan download anda bisa menggunakan cdn seperti jQuery CDN, cdnjs, Google CDN, Microsoft CDN, MaxCDN atau lainnya, untuk pemanggilan css dan js seperti kode dibawah ini cukup edit atau sesuaikan dengan kode yang diatas.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

3. Pembuatan page yang berguna untuk membuat halaman yang akan dieksekusi pada saat dijalankan yaitu halaman pertama kemudian jika diklik id halaman kedua maka akan muncul halaman dua yang dibuat dalam satu file saja yaitu index.html, cara pembuatannya yaitu gantikan …content goes here… yang ada pada kode diatas

<body>

 <!-- Start of first page -->
 <div data-role="page" id="foo">

  <div data-role="header">
   <h1>Foo</h1>
  </div><!-- /header -->

  <div role="main" class="ui-content">
   <p>I'm first in the source order so I'm shown as the page.</p>
   <p>View internal page called <a href="#bar">bar</a></p>
  </div><!-- /content -->

  <div data-role="footer">
   <h4>Page Footer</h4>
  </div><!-- /footer -->
 </div><!-- /page -->

 <!-- Start of second page -->
 <div data-role="page" id="bar">

  <div data-role="header">
   <h1>Bar</h1>
  </div><!-- /header -->

  <div role="main" class="ui-content">
   <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
   <p><a href="#foo">Back to foo</a></p>
  </div><!-- /content -->

  <div data-role="footer">
   <h4>Page Footer</h4>
  </div><!-- /footer -->
 </div><!-- /page -->

</body>

4. Pembuatan header dan footer atau dengan istilah lainnya adalah pembuatan toolbar widget, jika anda buka dokumentasi atau demo dari jQuery Mobile anda bisa buka menu Toolbar Widget dan bisa lihat toolbar yang mana yang anda suka begitu juga dengan selainnya, toolbar yang dibuat dengan posisi fixed dan cara pembuatannya gandikan header diatas dengan header dibawah ini dan footer cukup tambahkan atribut seperti data-role=”footer” data-position=”fixed”, untuk toolbar kesukaan saya seperti dibawah ini.

jQuery Mobile Toolbar

<div data-role="header" data-position="fixed">
 <a href="#mypanel1" class="ui-btn-left ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
 <h1>My App</h1>
 <a href="#mypanel2" class="ui-btn-right ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all">No text</a>
</div><!-- /header -->
  
<div data-role="footer" data-position="fixed">
 <h2>Footer</h2>
</div><!-- /footer -->

5. Pembuatan panel yang berguna untuk membuat list menu saat diklik pada tombol kedua icon pada toolbar header, selain list menu panel juga sering diisi form atau text info, cara menggunakannya cukup copy paste kode di bawah header dan footer didalam page.

jQuery Mobile Panel

<body>

 <div data-role="page" id="foo">

  <div data-role="header" data-position="fixed">
   <a href="#mypanel1" class="ui-btn-left ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
   <h1>My App</h1>
   <a href="#mypanel2" class="ui-btn-right ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all">No text</a>
  </div><!-- /header -->

  <div role="main" class="ui-content"></div><!-- /content -->

  <div data-role="footer" data-position="fixed"></div><!-- /footer -->
  
  <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="mypanel1">
   
   <ul data-role="listview">
    <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
     <li><a href="#panel-fixed-page2">Accordion</a></li>
     <li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
     <li><a href="#panel-fixed-page2">Autocomplete</a></li>
     <li><a href="#panel-fixed-page2">Buttons</a></li>
     <li><a href="#panel-fixed-page2">Checkboxes</a></li>
     <li><a href="#panel-fixed-page2">Collapsibles</a></li>
     <li><a href="#panel-fixed-page2">Controlgroup</a></li>
     <li><a href="#panel-fixed-page2">Dialogs</a></li>
     <li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
     <li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
     <li><a href="#panel-fixed-page2">Footer toolbar</a></li>
     <li><a href="#panel-fixed-page2">Form elements</a></li>
     <li><a href="#panel-fixed-page2">Grids</a></li>
     <li><a href="#panel-fixed-page2">Header toolbar</a></li>
     <li><a href="#panel-fixed-page2">Icons</a></li>
     <li><a href="#panel-fixed-page2">Links</a></li>
     <li><a href="#panel-fixed-page2">Listviews</a></li>
     <li><a href="#panel-fixed-page2">Loader overlay</a></li>
     <li><a href="#panel-fixed-page2">Navbar</a></li>
     <li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
     <li><a href="#panel-fixed-page2">Pages</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">Popup</a></li>
     <li><a href="#panel-fixed-page2">Radio buttons</a></li>
     <li><a href="#panel-fixed-page2">Select</a></li>
     <li><a href="#panel-fixed-page2">Slider, single</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
     <li><a href="#panel-fixed-page2">Transitions</a></li>
   </ul>

  </div><!-- /panel -->
  
  <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="mypanel2">
   
   <form class="userform">

    <h2>Login</h2>

    <label for="name">Username:</label>
    <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

    <label for="password">Password:</label>
    <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

    <div class="ui-grid-a">
     <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
     <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
    </div>
   </form>

  </div><!-- /panel -->
  
 </div><!-- /page -->

</body>

6. Pembuatan listview kedalam layout area dari jQuery Mobile beserta dengan search form dan juga pembuatan button dibawahnya beserta dengan grid, cara pembuatannya cukup dengan copy paste kode didalam atau cocokkan kedalam role=”main” class=”ui-content” seperti dibawah ini.

jQuery Mobile Listview dan Grids

<div role="main" class="ui-content">
  
 <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Cherry</a></li>
  <li><a href="#">Cranberry</a></li>
  <li><a href="#">Grape</a></li>
  <li><a href="#">Orange</a></li>
 </ul>
   
 <div class="ui-grid-b">
  <div class="ui-block-a"><a href="#" class="ui-shadow ui-btn ui-corner-all">Anchor</a></div>
  <div class="ui-block-b"><div class="button-wrap"><button class="ui-shadow ui-btn ui-corner-all">Button</button></div></div>
  <div class="ui-block-c"><input value="Input" type="button"></div>
 </div>
   
 <div class="ui-grid-d center">
  <div class="ui-block-a"><a class="ui-shadow ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext ui-btn-inline">Button</a></div>
  <div class="ui-block-b"><a class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a></div>
  <div class="ui-block-c"><a class="ui-shadow ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext ui-btn-inline">Button</a></div>
  <div class="ui-block-d"><a class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext ui-btn-inline">Button</a></div>
  <div class="ui-block-e"><a class="ui-shadow ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext ui-btn-inline">Button</a></div>
 </div>
   
</div><!-- /content -->

Cukup sekian tutorial kali ini kita akan lanjutkan pada artikel yang lainnya. Untuk kode yang penuh dalam pembuatan project jQuery Mobile dibawah ini

<!DOCTYPE html> 
<html>
<head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

 <!-- Start of first page -->
 <div data-role="page" id="foo">

  <div data-role="header" data-position="fixed">
   <a href="#mypanel1" class="ui-btn-left ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
   <h1>My App</h1>
   <a href="#mypanel2" class="ui-btn-right ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all">No text</a>
  </div><!-- /header -->

  <div role="main" class="ui-content">
  
   <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
   </ul>
   
   <div class="ui-grid-b">
    <div class="ui-block-a"><a href="#" class="ui-shadow ui-btn ui-corner-all">Anchor</a></div>
    <div class="ui-block-b"><div class="button-wrap"><button class="ui-shadow ui-btn ui-corner-all">Button</button></div></div>
    <div class="ui-block-c"><input value="Input" type="button"></div>
   </div>
   
   <div class="ui-grid-d center">
    <div class="ui-block-a"><a class="ui-shadow ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext ui-btn-inline">Button</a></div>
    <div class="ui-block-b"><a class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a></div>
    <div class="ui-block-c"><a class="ui-shadow ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext ui-btn-inline">Button</a></div>
    <div class="ui-block-d"><a class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext ui-btn-inline">Button</a></div>
    <div class="ui-block-e"><a class="ui-shadow ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext ui-btn-inline">Button</a></div>
   </div>
   
  </div><!-- /content -->

  <div data-role="footer" data-position="fixed">
   <h2>Footer</h2>
  </div><!-- /footer -->
  
  <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="mypanel1">
   
   <ul data-role="listview">
    <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
     <li><a href="#panel-fixed-page2">Accordion</a></li>
     <li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
     <li><a href="#panel-fixed-page2">Autocomplete</a></li>
     <li><a href="#panel-fixed-page2">Buttons</a></li>
     <li><a href="#panel-fixed-page2">Checkboxes</a></li>
     <li><a href="#panel-fixed-page2">Collapsibles</a></li>
     <li><a href="#panel-fixed-page2">Controlgroup</a></li>
     <li><a href="#panel-fixed-page2">Dialogs</a></li>
     <li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
     <li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
     <li><a href="#panel-fixed-page2">Footer toolbar</a></li>
     <li><a href="#panel-fixed-page2">Form elements</a></li>
     <li><a href="#panel-fixed-page2">Grids</a></li>
     <li><a href="#panel-fixed-page2">Header toolbar</a></li>
     <li><a href="#panel-fixed-page2">Icons</a></li>
     <li><a href="#panel-fixed-page2">Links</a></li>
     <li><a href="#panel-fixed-page2">Listviews</a></li>
     <li><a href="#panel-fixed-page2">Loader overlay</a></li>
     <li><a href="#panel-fixed-page2">Navbar</a></li>
     <li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
     <li><a href="#panel-fixed-page2">Pages</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">Popup</a></li>
     <li><a href="#panel-fixed-page2">Radio buttons</a></li>
     <li><a href="#panel-fixed-page2">Select</a></li>
     <li><a href="#panel-fixed-page2">Slider, single</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
     <li><a href="#panel-fixed-page2">Transitions</a></li>
   </ul>

  </div><!-- /panel -->
  
  <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="mypanel2">
   
   <form class="userform">

    <h2>Login</h2>

    <label for="name">Username:</label>
    <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

    <label for="password">Password:</label>
    <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

    <div class="ui-grid-a">
     <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
     <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
    </div>
   </form>

  </div><!-- /panel -->
  
 </div><!-- /page -->

 <!-- Start of second page -->
 <div data-role="page" id="bar">

  <div data-role="header">
   <h1>Bar</h1>
  </div><!-- /header -->

  <div role="main" class="ui-content">
   <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
   <p><a href="#foo">Back to foo</a></p>
  </div><!-- /content -->

  <div data-role="footer">
   <h4>Page Footer</h4>
  </div><!-- /footer -->
 </div><!-- /page -->

</body>
</html>