Tutorial Android 3 : Membuat Aplikasi Pertama - "Hello World!"

Seperti biasa ketika kita akan memulai mempelajari sebuah pemrograman yang pertama kita lakukan adalah membuat aplikasi hello world. Pembuatan aplikasi ini sangan berguna untuk mengetes android studio yang sebelumnya kita install sudah berhasil ataukah masih terdapat masalah, selain itu juga ketika kita pertama kali menjalankan aplikasi di Android Studio kita memerlukan emulator, oleh karena itu pada artikel ini kita akan mempelajari bagaimana membuat sebuah aplikasi hello world dan membuat sebuat emulator di Android Studio ini.

Untuk membuat aplikasi "Hello World!" ikutilah langkah berikut :
Pertama buka Android Studio, sampai muncul tampilan dibawah. Selanjutnya klik New Project

Isikan Application name dan Company domain sesuai yang anda inginkan. Karena kita disini akan membuat aplikasi Hello world, aplication name isikan dengan "HelloWorld" dan company domain isikan "androidatc.com" seperti gambar di bawah ini

Pastikan "Phone and Tablet" terceklis dan pilihlan Minimum SDK nya kemudian klik Next. Pada tahap ini kita melihat pilihan TV, Wear dan Glass, jika pada android studio kita sudah terinstall Android 5.0 Lollipop maka kita bisa membuat aplikasi untuk platform ketiga pilihan tadi.

Pada halaman ini pilihlah type activity yang akan kita buat, untuk aplikasi ini kita pilih "Blank Activity", kemudian Next.

Pada tahap ini isikan aktivity name, layout name, title dan menu resource name.

Setelah terisi klik Finish dan tunggu beberapa saat sampai muncul halaman seperti berikut :

Proses pembuatan project selesai dilakukan. Selanjutnya kita akan menjalankan aplikasi/project tersebut, tetapi ketika kita pertama kali membuat aplikasi / project kita harus membuat Android Virtual Device (AVD) atau sering disebut emulator. Kenapa kita mesti membuat AVD tersebut, itu karena membantu kita dalam menjalankan aplikasi yang sudah kita buat tanpa menggunakan perangkat hanphone langsung. Bagaimana kita membuat AVD tersebut, ikuti langkah berikut :

Klik icon AVD Manager di toolbar Android Studio

Kemuidan akan muncul halaman seperti berikut, dan klik tombol "Create Virtual Device"

Pada bagian "Select Hardware" pilihlah hadware yang akan kita gunakan untuk melakukan test terhadap aplikasi yang sudah kita buat tadi. Jika kita ingin membuat device lain selain yang tertera di list tersebut kliklah button "New Hardware Profil".

Pilih Nexus 6 kemudian klik Next. Selanjutnya pilihlah version OS Androidnya untuk dijalankan di emulator. Kita pilih saja versi Android 5 (Lollipop) kemudian klik Next.

 

Selanjutnya isikan nama AVD nya, disarankan menulis nama AVD ini sesuai dengan nama hardware dan versi OS nya, misalnya "Nexus 6 API 21". Setelah setelai klik tombol Finish sehingga muncul tampilan sperti ini :

Jalankanlah emulator yang tadi sudah kita buat, dengan cara klik icon play di kolom Action.

Tunggu beberapa saat sampai muncul emulator handphone androidnya seperti berikut :

Pembuatan AVD sudah kita lakukan dan emulator sudah berjalan, selanjutnya kita jalankan aplikasi "Hello world" yang sudah kita buat tadi dengan cara klik icon Run di toolbar Android Studio seperti berikut :

Setelah klik icon tersebut akan muncul tampilan seperti berikut :

Pilihlah device / emulator yang sedang berjalan kemudian klik OK. Tunggu beberapa saat sampai muncul tampilan di emulatornya seperti berikut :

Dengan munculnya seperti gambar tersebut maka aplikasi Hello World yang kita buat tadi berhasil dijalankan.

Baca Selengkapnya »

Tutorial Android 2 : Mengenal Dan Menggunakan Android SDK Manager di Android Studio

Android SDK Manager adalah alat yang dapat kita gunakan untuk men-download package-package yang berbeda untuk pembuatan aplikasi android seperti platform tools, Android SDK build tools, Android platform images dan komponen-komponen lainnya.Dengan android SDK ini kita bisa mendownload sebuah emulator untuk membantu kita dalam melakukan test aplikasi yang kita buat tanpa harus mencoba langsung menggunakan handphone android.

Menjalankan Android SDK Manager
Ketika kita pertamakali menjalankan Android Studio setelah selesai installasi akan muncul halaman seperti ini,

Untuk membuka android SDK Manager, kita pilih Configure sehingga muncul tampilan seperti berikut :

Centang / ceklis komponen yang ingin kita install ke Android Studio yang sudah kita install sebelumnya.

Jika kita sudah membuat sebuah project dan kita ingin membuka Android SDK Manager ini, pilih saja di menu Tools -> Android -> SDK Manager .
Atau dengan mengklik button di toolbar seperti gambar berikut :

Baca Selengkapnya »

Tutorial Android 1 : Memulai Pemrograman Android - Install Android Studio

Sebelum kita memulai membuat program android tahap yang paling pertama yang harus kita lakukan adalah melakukan istalasi android application develompent.
Pada tutorial pembuatan aplikasi android ini kita akan menggunakan Android Studio. Didalam penginstall android studio ini  akan memungkinkan mengistall juga komponen-komponen seperti berikut:

• Android Studio IDE
• Android SDK tools
• Android platform terakhir (Android 5.0 - Lollipop)
• Android 5.0 emulator (Aplikasi yang nanti akan dibuat bisa ditest atau dijalankan dengan emulator ini).

Komponen-komponen diatas wajib kita install pada komputer yang nanti akan digunakan dalam proses pembuatan aplikasi android. Kita tidak perlu menginstall satu persatu komponen tersebut, karena sudah langsung terinstall ketika kita menginstall Android Studio.


Untuk menginstall Android Studio, ikuti langkah berikut :
1. Download android studio pada link berikut : http://developer.android.com/sdk/

2. Setelah selesai melakukan download, jalankan file tersebut (android-studio-bundle-xx.xxxxxxx.exe), dan ikuti langkah-langkah penginstallanya sampai selesai.

Catatan :
Jika di komputer kita belum terinstall Java Development Kit (JDK), proses instalasi Android Studio tersebut tidak akan bisa dilanjutkan karena komponen tersebut wajib ada sebelum kita menginstall Android Studio. Untuk menginstall JDK tersebut bisa didownload di link berikut http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 

download jdk tersebut sesuai dengan OS yang kita gunakan kemudian lakukan pengistallan. Setelah selesai lakukan kembali proses installasi Android Studio tersebut.

Setelah selesai diinstall, buka folder tempat android studio diinstall, misalnya kita menginstall secara default berada pada C:\Program Files\Android\Android Studio\bin dan jalankan studio.exe (untuk 32bit) atau studio64.exe (untuk 64bit).

Setelah startup muncul tampilan installasi AndroidSDK seperti berikut :

Tunggulah proses ini sampai selesai, pada proses ini kita membutuhkan koneksi ke internet. untuk mendownload androidSDK nya
Setelah selesai proses tersebut, maka akan muncul tampilan seperti berikut :

Jika sudah muncul tampilan diatas, proses instalasi android studio berhasil dan selanjutnya kita bisa buat aplikasi android.

Baca Selengkapnya »

Menampilkan Hasil Perhitungan Secara Langsung Tanpa Klik Tombol Menggunakan Perintah Keyup JQuery

Pada kesempatan kali ini kita akan coba membuat suatu aplikasi sederhana untuk menampilkan hasil perhitungan tanpa harus mengklik tombol. Misalnya pada aplikasi penjualan kita memasukan nilai suatu barang yang harganya 25.000 kemudian barang tersebut ada diskonya sebesar 20%. Yang kita inginkan adalah nilai akhir / total yang harus dibayar itu secara otomatis langsung muncul tanpa harus klik tombol. Lihatlah gambar berikut,

Pada gambar diatas textbox "Yang Harus Dibayar" itu akan otomatis terisi setelah textbox "Diskon" terisi.

Dalam pembuatan aplikasi tersebut kita akan menggunakan perintah keyup pada JQuery. Berikut proses pembuatannya :

1. Buatlah tag HTML seperti berikut,
<table border="0" cellpadding="5" align="center">
  <form action="" method="post">
     <tr>
        <td>Harga :</td> 
        <td><input type="text" name="harga" id="harga" /></td>
     </tr> 
     <tr>
        <td>Diskon :</td> 
        <td><input type="text" name="diskon" id="diskon" /></td>
     </tr>
     <tr>
        <td>Yang Harus Dibayar :</td> 
        <td><input type="text" name="totBayar" id="totBayar" disabled /></td>
     </tr>  </form>
</table>



2. Buatlah sintak JQuerynya seperti berikut,
<script type="text/javascript">
  $(document).ready(function(){
      $("#diskon").keyup(function(){
        var harga  = parseInt($("#harga").val());
        var diskon  = parseInt($("#diskon").val());
        var total = harga - (harga*(diskon/100));
        $("#totBayar").val(total);
      });
  });
</script>

3. Jangan lupa sertakan library jquery.
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>

4. Berikut sintak keseluruhannya,
<html>
<head>
  <title>Contoh Perhitungan Langsung</title> 
 <script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#diskon").keyup(function(){
        var harga  = parseInt($("#harga").val());
        var diskon  = parseInt($("#diskon").val());
        var total = harga - (harga*(diskon/100));
        $("#totBayar").val(total);
      });
    });
  </script>
</head>
<body>
<table border="0" cellpadding="5" align="center">
  <form action="" method="post">
     <tr>
        <td>Harga :</td> 
        <td><input type="text" name="harga" id="harga" /></td>
     </tr> 
     <tr>
        <td>Diskon :</td> 
        <td><input type="text" name="diskon" id="diskon" /></td>
     </tr>
     <tr>
        <td>Yang Harus Dibayar :</td> 
        <td><input type="text" name="totBayar" id="totBayar" disabled /></td>
     </tr>  </form>
</table> </body>
</html>

5. Simpan dengan nama penjualan.html
6. Jalankan file penjualan.html tersebut pada browser yang kita inginkan.

Untuk lebih jelas bisa lihat pada link berikut

Semoga bermanfaat..

Baca Selengkapnya »

Membuat Menu Dropdown Dengan CSS

Dalam sebuah aplikasi berbasis web atau website kita sangat membutuhkan yang namanya menu, karena dengan adanya menu di aplikasi yang kita buat dapat memudahkan user / pengguna untuk pergi ke halaman yang diinginkan.

Pada kesempatan kali ini kita akan mencoba membuat contoh pembuatan menu dropdown yang sederhana dengan bantuan CSS. Pertama buatlah tag list HTML seperti berikut

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Berita</a></li>
 <li><a href="#">Pengumuman</a></li>
 <li><a href="#">Buku Tamu</a></li>
  <li><a href="#">Tentang Kami</a></li>
</ul>

Pada kode diatas akan terbentuk 5 buah menu. Jika kita menginginkan submenu atau anak dari menu diatas kita tambahkan tag list baru di dalam list yang tadi kita buat, seperti berikut,

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Berita</a>
     <ul>
          <li><a href="#">Mancanegara</a></li>
          <li><a href="#">Nasional</a></li>
          <li><a href="#">Olahraga</a></li>
     </ul>
 </li>
 <li><a href="#">Pengumuman</a></li>
 <li><a href="#">Buku Tamu</a></li>
  <li><a href="#">Tentang Kami</a></li>
</ul>

Setelah kode html tadi kita buat, saatnya kita menambahkan CSS untuk membuat list tadi menjadi menu yang kita inginkan. Sebagai contoh tuliskan sintak CSS seperti berikut

#menu{

   padding: 0;

}

#menu li{

  float: left;
  background: #4679BD;
  border: 1px solid #939C8A;
  list-style-type: none;

}

#menu li ul{

   display: none;

}

 #menu li a{

    text-decoration: none;

    display: block;

    padding: 10px;

    color: #edffec;

    font-family: tahoma;

}

#menu li a:hover{

   background: black;

}

#menu li:hover ul{

   display: block;

   position: absolute;

}

#menu li:hover li{

   float: none;

}

#menu li ul{

   padding: 0px;

}

Setelah dibuatkan CSS nya seperti diatas, maka hasilnya akan seperti gambar berikut,

Untuk lebih jelas bisa lihat contoh pada link berikut

Baca Selengkapnya »