Membuat Project Pertama Di Eclipse versi Android

yah ini tugas kuliah pertemuan pertama,maklum kalo masih kece. lumayan capek dah bikin tutorial sebanyak 3. mata sudah ngantuk badan sudah capek,rokok pun sudah tinggal 2batang,sungguh miris hidupku kali ini,yang penting semangat dah, oke postingan kali ini saya akan membuat sebuah project aplikasi sangatttt sederhana di android menggunakan eclipse. langsung saja buka aplikasi eclipse.cepet lo yaaa saya tunggu ni,

jika sudah dibuka,pilih menu file>new>Android Application Project . kenapa milih menu ini? ya dikarenakan kita mau bikin applikasi android,simple kan jawabannya?hehehehe

kemudian kita akan memberi nama aplikasi yg akan kita bikin di bagian Application name, loh loh yang lainnya kok tiba" nulis sendiri??ya iya lah itu sudah otomatis menggenerate namanya.jadi jangan kaget ya??hehehe

kalo sudah klik next.

kemudian kita akan mengkonfigurasi projectnya.langsung next aja deh kita settingannya default aja.

kalo yang ini sepertinya mensetting icon applikasi yang kita buat.sehubungan anda dan saya tidak memiliki icon langsung next aja deh.

saya bingung pada settingan ini,langsung next aja deh,hehehe blank kan artinya kosong,ya kita bikin project yang kosongan dulu deh.

beri nama activity dengan nama anda sendiri yah.gak tau nih fungsinya buat apaan.hehehe jika sudah klik finish.

project pertama anda sudah jadi,dan tidak ada fungsinya,,gimana cara jalaninnya nih?pakek emulator dong,,bagi yang sudah mensetting AVDnya langsung ikuti seperti gambar diatas,jika belum monggo disetting dulu nih tutorialnya Setting AVD Emulator Android Di Eclipse

tunggu hingga muncul gambar seperti diatas,wihhh sudah punya aplikasi android nihh ciee cieeee,,,,,

sekian tutorial kali ini,jika anda bingung itu menandakan bahwa anda sedang tersesat jadi ikuti petunjuk dari awal yah,,hehehe

jika ada kesalahan dalam posting saya mohon dimaklumi yah??soalnya saya juga masih belajar nih.

Setting AVD Emulator Android Di Eclipse

haiii pemirsa didunia maya,apa kabar??jumpa lagi dengan saya hengky susanto. topik kali ini yang saya akan jelaskan yaitu cara mensetting AVD(Android Virtual Device) di eclipse.caranya gak susah kok cukup ketik reg (spasi) hengky.hahaha

oke langsung saja buka applikasi eclipse tunggu beberapa saat tiiiiittt...

munculah jendela seperti ini, ini apaan sih kok mbulet??emang gitu kalee dari sananya.di menubar cari yang namanya windows kemudian pilih Android Virtual Device.

kosong kan?gak ada isinya kan? ya iya lah kita kan belum bikin.caranya bikin klik new.

selanjutnya akan muncul form seperti ini isi AVD name terserah anda, device pilih Nexus S ato yg lainnya, Target pilih Android 4.2.2 yang lainnya gak usah dirubah langsung klik oke

nah jika sudah ada isinya dan dicentang warna hijau berarti anda telah sukses membuat AVD(android Virtual Device).coba dijalankan dengan mengklik tombol start.

langsung aja klik launch aja gak usah disetting resolusinya.terserah anda mau disetting apa tidak.jika sudah diklik launch tunggu yaa...prosesnya lumayan lama.

taraaaaaaa, AVDnya sudah siap untuk digunakan selamat yaaa.

sekian posting saya,jika ada yang salah mohon dimaklumi,soalnya masih newbie(pemula).sampai jumpa postingan saya selanjutnya yaaa

Tutorial Instalasi Eclipse

Selamat malam pengunjung setia blog saya. saya akan curhat sedikit ketika saya membuat postingan ini, ketika itu saya ada acara makan-makan bersama teman-teman eh keinget kalo tugas saya belum dikerjakan, dengan peralatan dan bahan terbatas segera saya menggunakan laptop teman saya yang sebelumnya saya inget kalo menginstal eclipse harus ada JDK(Java Development Kit) sedangkan dilaptop dan diflashdisk saya tidak ada,kemudian saya telpon teman saya yang masih berada dikampus tercinta Universitas Muhammadiyah Jember , kemudian tanpa basi-basi saya langsung gas poll kesana. ehh kok malah curhat -_-" .

oke langsung saja deh gak usah pakek lama-lama download JDK versi baru disini . jika sudah didownload buka aplikasinya,disini saya menggunakan JDK versi 7.15

kemudian muncul gambar seperti dibawah ini langsung aja klik next

disini pengguna/anda akan memilih fitur apa aja yg akan dipilih,langsung klik next

disini dipersilahkan user memilih tempat instalasi JDK,jika ingin dirubah klik change,saya sarankan langsung dinext aja.biar gak ribet dibelakang,hehehe

tunggu beberapa saat proses instalasi sedang berlangsung kurang lebih 3-5menit,yang sabar yahhh.hehehe

Taraaa,  proses instalasi JDK sudah selesai.

Mungkin ada pertanyaan dibenak anda untuk apa sih JDK??Java Development Kit (JDK) adalah lingkungan pemrograman untuk menulis program2 aplikasi dan applet java, JDK terdiri dari lingkungan eksekusi program yang berada diatas Operating System, sebagaimana dibutuhkan oleh para programmer untuk meng-compile, membenahi bug(s) yang ada, dan menjalankan tambahan2 dari program intinya (applets) yang ditulis dengan menggunakan Bahasa pemrograman Java.

yukk langsung kita masuk pada instalasi eclipse :

buka lokasi penyimpanan instaler eclipse,kemudian klik kanan extract here,jika selesai langsung ketahap selanjutnya

buka folder hasil dari extract tadi,kemudian cari file yang bernama eclipse.exe kemudian doubleklik eclipse.exe untuk membuka aplikasi eclipse

kemudian muncul jendela seperti ini, ini difungsikan untuk mensetting lokasi  tempat penyimpanan project yang akan anda buat

selanjutnya tools eclipse sudah siap untuk digunakan :D
sekian posting saya kali ini,mohon maaf jika ada kekurangan. :D

CSS (Cascading Style Sheet)

1. TUJUAN

• Memahami konsep dasar CSS dan penggunaannya pada web.
• Memahami konsep dasar Twitter Bootstrap dan penggunaannya sebagai templating pada website.
• Memahami dasar JavaScript dan penggunaannya pada web.
• Memahami dasar jQuery dan penggunaannya.

     2.  DASAR TEORI

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

    3. TUGAS

• Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama)
• Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.
• Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS berarti juga TIDAK ADA NILAI)
• Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman

    4. PEMBAHASAN

copy sourcecode dibawah ini disimpan kedalam notepad++ dengan extensi index.php dan simpan kedalam folder C:\xampp\htdocs\hengky .

<html>
 <head>
  <style type="text/css">
   table{
    border-colapse:colapse;
    border:1px solid black;
   }
   
   #menu{
    height:40px;
    width:960px;
    background:url(bg-nav.jpg) repeat-x;
   }
   
   #menu table{
    border:none;
   }
   
   #menu a{
    color:white;
    text-decoration:none;
   }
   
   #menu a:hover{
    background-color:white;
    color:black;
   }
   
   #menu td{
    height:40px;
    text-align:center;
    vertical-align:middle;
    color:#fff;
    font: bold 14px Candara, Arial, Tahoma;
   }
   
   #isi{
    padding: 10 10 10 10;
   }
   
   #isi p{
    color:black;
    font: 11px Candara, Arial, Tahoma;
    padding-bottom:5px;
   }
   
   #isi img{
    boder: 1px solid black;
    width: 80px;
    height: 100px;
   }
   
   .table-menu{
    vertical-align: top;
    border-colapse: colapse;
    border: 1px solid black;
    background-color: #0066cc;
   }
   
   .footer{
    background-color:yellow;
   }
  </style>
 </head>
 
 <body>
  <table width="70%" align="center">
   <tr>
    <td colspan=2><img src="header.jpg"></td>
   </tr>
   <tr>
    <td colspan=2>
     <div id="menu">
      <table width="100%">
       <tr>
        <td align="center"><a href="">Depan</a></td>
        <td align="center">Profil</td>
        <td align="center">Produk</td>
        <td align="center">Kontak</td>
        <td align="center">Forum</td>
       </tr>
      </table>
     </div>
    </td>
   </tr>
   <tr>
    <td width="70%">
     <div id="isi">
      <h1 style="color:blue; font:bold 16px Candara, Arial, Tahoma;"> Ayo Minum Susu</h1>
      <img src="susu.jpg"/>
      <p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina. 
      Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat.
      Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia.
      Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>
      <p>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh.
      Dalam segelas susu terdapat antara lain:
      <ul>
       <li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>
       <li>Zat besi, mempertahankan kulit tetap bersinar.</li>
       <li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li>
       <li>Kalsium, menguatkan tulang.</li>
       <li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li>
       <li>Yodium, meningkatkan kerja otak cepat.</li>
       <li>Seng, menyembuhkan luka dengan cepat.</li>
       <li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>
      </ul>
      </p>
     </div>
    </td>
    <td width="30%" class="table-menu"></td>
   </tr>
   <tr>
    <td colspan=2 height=50 class="footer">
     <p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"></p>
    </td>
   </tr>
  </table>
 </body>
</html>

jalankan xampp pilih start pada bagian apache.kemudian jalankan browser dengan alamat localhost/hengky kemudian dengan otomatis muncul seperti berikut.

A. Mengubah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama) dengan cara menambahkan sintax css dibawah ini  diatas sintax </style>

#isi ul{
    color:black;
    font: 11px Candara, Arial, Tahoma;
    padding-bottom:5px;
   }

Simpan dan refresh web browser tadi. setelah selesai maka isi list akan sama dengan paragraf pertama dengan font dan size yang sama.

B. Mengubah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.dengan cara mengubah sintax html seperti berikut :

        <td align="center"><a href="">Depan</a></td>
        <td align="center"><a href="">Profil</a></td>
        <td align="center"><a href="">Produk</a></td>
        <td align="center"><a href="">Kontak</a></td>
        <td align="center"><a href="">Forum</a></td>
       </tr>

Simpan dan refresh web browser.kemudian arahkan cursor ke dalam tulisan produk, kontak, forum, profil.maka akan menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.

C. mengisi bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda.dengan cara mengubah sintax html berikut ini

 <td width="30%" class="table-menu"> Daftar ARTIKEL
    <div id="artikel">
    <ul>
     <li><a href="">KESEHATAN</a></li>
     <li><a href="">KECANTIKAN</a></</li>
     <li><a href="">TIPS</a></</li>
     <li><a href="">OTHER</a></</li>
    </ul>
    </td>

Kemudian tambahkan code css berikut ini

#artikel ul{
 font: bold 16px Ravie;
 }
#artikel a{
 color:red;
 text-decoration:none;
 }
   
#artikel a:hover{
 background-color:Grey;
 color:black;
 }

simpan dan refresh browser maka akan menampilkan tulisan disebelah kanan seperti berikut.

D. Menambahkan teks/ tulisan yang proporsional di bagian header halaman.dengan cara menambahkan sourcecode berikut kedalam sintax <head> </head>.

<table width="70%" align="center">
   <tr>
    <td colspan=2 style="background-color:black">
     <marquee behavior="alternate"> 
      <marquee>
       <h1>
        <p style="color:red; font:Ravie;">SELAMAT DATANG DI WEB KAMI</p>
       </h1>
      </marquee>
     </marquee>
    </td>

kemudian simpan dan refresh browser maka di header halaman akan memunculkan sebuah header dengan tulisan SELAMAT DATANG DI WEB KAMI dengan efek marquee.

5. KESIMPULAN

• Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web  untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
• CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.
• Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.