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 »

Membuat Aplikasi Counter Pengunjung / Hit Counter Dengan PHP

Counter pengunjung sering kita temukan pada suatu website, tujuan adanya untuk mengetahui jumlah pengunjung yang sudah mengakses website tersebut.
Pada kesempatan ini akan dibuat counter pengunjung / Hit Counter yang sederhana menggunakan text. Pertama tama kita memerlukan sebuah file dengan nama "visit.txt", file ini berfungsi untuk menyimpan angka / jumlah pengunjung.
kemudian buatlah script php seperti berikut :

<html>
<head>
      <title>Membuat hit counter sederhana</title>
<head>
<body>
<?php
 $file = "visit.txt";
 $fp = fopen($file,"r+");
 $jumlah = fgets($fp, 255);
 fclose($fp);  
 $fp=fopen($file, "w");
 $jumlah = $jumlah + 1;
 fputs($fp, $jumlah);
 print("Sudah dikunjungi $jumlah kali");
 fclose($fp);
?>
</body>
</html>

Ketika dijalankan maka hasilnya seperti berikut

 

Semoga bermanfaat..

Baca Selengkapnya »