Sunday, 9 June 2019

Tutorial Belajar Android : Cara Membuat Splash Screen di Android Studio

Cara Membuat Splash Screen di Android 3.3.2

Splash Screen merupakan tampilan pembuka saat aplikasi android di jalankan, jadi Splash Screen ini akan  pertama kali muncul pada layar smartphone kita sebelum kita masuk ke menu utama atau halaman login. Kegunaan Splash Screen umum nya untuk menampilkan informasi berupa nama aplikasi dan logo perusahaan dari aplikasi yang dibuat agar terlihat menarik dan profesional atau sebagai halaman tunggu untuk proses data hingga semua proses selesai di load.



Sekarang kita akan mulai cara membuat Splash Screen.

1. langkah pertama buat project baru dengan meng klik Start a new Android Studio project.



2. Pilih Empty Activity dan Next



3. Pada kolom Name isi dengan MySplashScreen atau boleh apa saja berdasarkan keinginan pembuat aplikasi. Pada bagian Minimum API level adalah sebagai batasan aplikasi yang akan dibuat nantinya akan berjalan dengan minimum level API (versi android) berapa. Dan setelah itu klik Finish.


4. 1.    Pada MainActivity.java tulis code seperti ini

package com.example.mysplashscreen;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView splashImage;
    private static int splashTimeOut=5000;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        splashImage=(ImageView)findViewById(R.id.splash_id);


        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Intent i = new Intent(MainActivity.this,Main2Activity.class);
                startActivity(i);
                finish();
            }
        },splashTimeOut);


        Animation splashAnimation = AnimationUtils.loadAnimation(this,R.anim.splashanimation);
        splashImage.startAnimation(splashAnimation);
    }
}

5. Membuat new empty Activity , disini saya menamakan secara default Main2Activity dan akan terbentuk file xml nya di res – layout dengan nama  activity_main2.xml .

6. Pada bagian res – layout – activity_main.xml , tuliskan code seperti ini

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/splashground">

    <ImageView
        android:id="@+id/splash_id"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:src="@mipmap/splash_screen2" />

</android.support.constraint.ConstraintLayout>

7. Selanjut nya pada bagian res – layout – activity_main2.xml , tuliskan code seperti ini

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main2Activity">


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Selamat Datang !"
        android:textSize="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

8.  Di folder res klik kanan – new – Android Resource Directory , pilih Resource type dan Directory name menjadi anim.




9. Buat file baru di folder anim, klik kanan (di folder anim) – new – Animation Resource File. Isi File name dengan nama splashanimation dan ketikan kode  berikut.


<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="3000">
</alpha>

10. Copy gambar (image) yang ingin di jadikan sebagai splash screen di folder res – mipmap dengan cara klik kanan (di folder mipmap) paste.




11.  Pada file colors.xml tambahkan code berikut
 <color name="splashground">#bfbdbe</color>

12. Di bagian androidManifest.xml tambahkan code berikut android:theme="@style/AppTheme.NoActionBar"  dibawah android:name=".Main2Activity"
 Hasil nya akan menjadi seperti ini :
<activity
     android:name=".Main2Activity"
     android:theme="@style/AppTheme.NoActionBar">
</activity>

13. Di bagian grandle tambahkan  dependencies  seperti ini  
implementation 'com.android.support:design:28.0.0'


Friday, 7 June 2019

Tutorial Belajar Android : Cara Install Android Studio Version 3.3.2 di Windows 10


Cara Menginstal Android Studio 32 bit di Windows 10


Untuk membuat aplikasi android, seorang developer umum nya menggunakan tools / software android studio. Android Studio sendiri memiliki beberapa paket installer : Windows (32 dan 64 bit),  Linux dan MacOS. Untuk kali ini kita akan coba menginstall Android Studio 32 bit di Windows 10.



  • Download file JDK (Java Development Kit) disini dan pilih installer windows x86. File JDK ini dibutuhkan untuk membuat code program java.
  • Download Andoid Studio di https://developer.android.com/studio , pilih bagian download option, pilih windows (32 bit).
  • Ekstrak hasil download android studio , setelah masuk ke dalam direktori yang di ektrak / bin, disitu terdapat file android-studio.exe,  klik dua kali untuk membukanya.




Jika berhasil maka akan tampil halaman welcome dari android studio seperti ini.




Tutorial Belajar HTML : Menambahkan Gambar (Image) di HTML

Cara menambahkan Gambar di HTML

Konten pada halaman HTML sangatlah beragam, terkadang untuk membuat artikel pada halaman web kita agar mudah dipahami pembaca kita tidak hanya menyajikan nya berupa teks saja dan membutuh untuk menambahkan gambar (image) pada halaman web kita. HTML telah mendukung banyak format gambar, seperti GIF, PNG, JPG, JPEG, WMF, PCX, BMP, TIFF dan lain-lain. Namun, format gambar yang paling banyak digunakan biasanya berupa PNG dan JPG/ JPEG karena dikenali oleh kebanyakan browser. Untuk menampilkan gambar (image) pada halaman web kita menggunakan Tag  <img> dan atribut src.

Pada contoh berikut ini saya menggunakan gambar camera.jpg berada satu folder dengan file html.



































Hasil pada saat file latihan.html dijalankan













Tutorial Belajar HTML : Membuat Form HTML

Membuat Form Sederhana di HTML

Document HTML tidak terlepas dari pembuatan form. Mulai dari form login, form registrasi (form pendaftaran), form kontak, form input data customer dan masih banyak lagi form-form lainnya. Dalam sebuah form bisa jadi memiliki banyak sekali kontrol (form control) yang digunakan seperti input box, combo box (select), checkbox, textarea, radio button dan yang mana masing-masing kontrol memiliki kegunaan yang berbeda.
Pembuatan Form pada dokumen HTML di awali dengan Tag <form> dan berakhir dengan Tag </form> dan diantara Tag inilah kontrol akan diletakan. Berikut ini adalah Struktur dasar form :

<form action=”simpan.php” method=”post”>
    ......
</form>

Tag <input>                     
Tag ini di tujukan unuk melakukan inputan (masukan). Jenis-jenis dari Tag input adalah :

-          <input type=”text” />
Inputan ini berbentuk textbox dan digunakan untuk memasukan teks / kalimat pendek.

-          <input type=”password” />
Inputan ini berbentuk textbox sama seperti type text, perbedaan nya adalah teks yang di inputkan disamarkan isi nya biasannya berupa bintang atau bulatan hitam. Input Type password biasanya  digunakan hanya untuk inputan password (form login).

-          <input type=”checkbox” />
Inputan ini berbentuk checklist (centang). Biasanya di gunakan untuk pilihan-pilihan yang lebih dari satu atau data yang bersifat optional.

-          <input type=”radio” />
Berbeda dengan checkbox inputan ini hanya memungkinkan penggunanya memilih satu dari sekian banyak pilihan. Input type radio biasa nya digunakan untuk melakukan pilihan yang spesifik seperti pilihan untuk agama, gender(jenis kelamin), atau pun soal dengan jawaban pilihan ganda.

-          <input type=”submit” />
Inputan ini berbentuk tombol (button) dan digunakan untuk melakukan proses form.

Tag <select>
Biasa disebut juga sebagai dropdown atau combo box. Secara terminologi (penggunaan) sama seperti input type radio karena Tag ini hanya memungkinkan penggunanya memilih satu dari sekian banyak pilihan hanya saja karena ruang dari desain web yang terbatas penggunaan Tag select menjadi pilihan untuk para developer web untuk membuat suatu daftar input pilihan. Contoh penggunaan Tag select adalah sebagai berikut:

<select>
       <option>Pilihan</option>
       <option value=”nilai1”>Pilihan 1</option>
       <option value=”nilai2”>Pilihan 2</option>
       <option value=”nilai3”>Pilihan 3</option>    
       <option value=”nilai4”>Pilihan 4</option>
       <option value=”nilai5”>Pilihan 5</option>
</select>

Pada Tag select pada saat sebuah form di proses atribut value yang akan di kirimkan data nya. misal kita melakukan pilihan pada Pilihan 2 maka data yang terkirim adalah nilai2.


Tag <textarea>
Tag textarea mirip seperti model input type text, hanya saja pada textarea memiliki cols dan rows untuk mengatur panjang dan lebar nya inputan ini. Dan inilah yang  memungkinkan  textarea untuk memuat banyak text / kalimat. Contoh penggunaan Tag select adalah sebagai berikut:

<textarea cols="100" rows="10"></textarea>


Berikut ini adalah contoh pembuatan form.

<!doctype html>
<html>
   <head>
      <title>Selamat Datang</title>
   </head>
   <body>
       <form action="simpan.php" method="post">
              <b>Nama Lengkap</b><br />
              <input type="text" name="nama" /><br /><br />
             
              <b>Jenis Kelamin</b><br />
              <input name="jk" type="radio" value="L">Laki-Laki
              <input name="jk" type="radio" value="P">Perempuan
              <br /><br />
             
              <b>Pendidikan</b><br />
              <select name="pendididkan">
                     <option>Pilih Pendidikan Terakhir</option>
                     <option value="sd">Sekolah Dasar</option>
                     <option value="sltp">Sekolah Menengah Pertama</option>
                     <option value="sma">Sekolah Menengah Atas</option>
                     <option value="d3">Diploma</option>
                     <option value="s1">Sarjana</option>
                     <option value="s2">Magister</option>
                     <option value="s3">Doktor</option>
              </select><br /><br />

              <b>Tuliskan Biografi singkat anda</b><br />
              <textarea cols="80" rows="15"></textarea>
              <br /><br />
             
              <input type="submit" name="submit" value="simpan">
       </form>
   </body>
</html>
Sebenarnya pada contoh form di atas masih sangat jauh dari standar pembuatan form , masih banyak yang harus di perbaiki dari tampilan dan juga proses, tapi karena ini hanya sekedar pengenalan pembuatan form maka materi ini saya cukupkan sampai disini. pada artikel berikutnya akan sama-sama kita buat form yang lebih menarik lagi.

Tutorial Belajar HTML : Struktur Dasar HTML

Memahami Struktur Dasar HTML


Penting untuk diketahui bahwa dalam pemembuat dokumen HTML harus lah mengikuti standar yang ada yaitu mulai dari Tag DTD (DOCTYPE), Tag html, Tag head, Tag title, dan Tag body. Struktur dasar ini biasanya selalu ada dalam setiap dokumen HTML. Berikut ini adalah contoh dari struktur dasar HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Selamat Datang</title>
  </head>
  <body>
Pengenalan Bahasa HTML
  </body>
</html>

Tag < !doctype  html>
Tag inilah yang berfungsi untuk memberitahu kepada browser bahwa dokumen yang akan diproses adalah HTML. DTD (DOCTYPE) adalah singkatan dari Document Type Declaration.

Tag <html>
Tag inilah yang akan menampung seluruh halaman web dan semua kode html harus berada di dalam tag ini. Mulai dari <html> sampai  dengan </html> 

Tag <head>
Tag ini biasamya berisi metadata, kode css ataupun javascript. Namun biasanya javascript di letakan sebelum Tag </body> untuk mencagah telambat nya loading halaman web.

Tag <title>
Tag ini, teks akan di tampilkan di tab bar / title bar.

Tag <body>
Tag ini berisi konten yang akan di tampilkan di browser berupa teks, gambar ataupun video. Sebagian besar source code yang kita buat akan diletakan pada bagian ini. Tag ini, teks akan di tampilkan di tab bar / title bar. Tag <body> Tag ini berisi konten yang akan di tampilkan di browser berupa teks, gambar ataupun video. Sebagian besar source code yang kita buat akan diletakan pada bagian ini.

Tutorial Belajar HTML : Pemahaman Tag, Elemen dan Atribut HTML


Tag dan Elemen pada HTML

Pada artikel sebelumnya kita telah mengenal apa itu Tag HTML dan secara umum Tag HTML memiliki pasangan-pasangan yaitu <tag_awal> ..... </tag_akhir> yang membedakan antara keduanya adalah tanda forward slash (/). Dan Elemen itu sendiri di baca dari awal Tag hingga akhir Tag dan pada Tag itu sendiri.

Berikut ini adalah contoh mengenai gambaran elemen.


Pada bagian elemen html terdiri dari elemen head dan elemen body, pada bagian elemen head terdiri dari elemen title, pada bagian elemen body terdiri dari elemen body itu sendiri, dan pada bagian elemen title terdiri dari elemen title itu sendiri.


Atribut pada HTML

Kita telah mempelajari  Tag dan Elemen pada HTML, sekarang kita mempelajari atribut. Apa itu Atribut ? atribut merupakan informasi tambahan pada suatu Tag HTML yang juga bagian dari elemen, atribut bisa berupa align, href, id, class, style dan lain-lain. Atribut di tulis dengan format nama_atribu=”nilai_atribut” dan atribut bisa di gunakan lebih dari satu.

Pada contoh di bawah ini Tag <p> memiliki atribu align
<p align=”right”>Tulisan ini akan tampil di sebelah kanan</p>

Pada contoh di bawah ini Tag <a> memiliki atribu href
<a href="http://www.linkweb.com">Belajar HTML Dasar</a>

Pada contoh di bawah ini Tag <p> memiliki atribut align dan atribut style
<p align=”center” style=”color:#FF0000;”>Tulisan ini akan tampil di tengah dan berwarna merah</p>





Tutorial Belajar HTML : Pemahaman Dasar Bahasa HTML

Bila kamu ingin menjadi seorang Web Developer, HTML merupakan bahasa yang harus kamu pelajari dan kamu kuasai. Kepanjangan dari HTML itu sendiri adalah Hypertext Markup Language jadi HTML adalah Bahasa yang di gunakan untuk mengatur tampilan halaman web menggunakan Tag-Tag (penanda) dan memungkinkan untuk berpindah antara halaman. 

Cara Membuat File HTML


File HTML merupakan file yang ber ekstensi .htm atau .html. File ini disimpan dalam sebuah web server dan dapat dilihat menggunakan media browser seperti Google Chrome, Mozilla Firefox, Opera dan lain-lain. Atau kita bisa juga mengakses file HTML tanpa web server yaitu dengan cara membukanya langsung dengan media browser.
















Contoh Penulisan HTML

Berikut ini adalah contoh kode dari struktur HTML yang akan menampilkan sebuah pesan Pengenalan Bahasa HTML pada web browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Selamat Datang</title>
  </head>
  <body>
Pengenalan Bahasa HTML
  </body>

</html>

Dari contoh kode tersebut dapat kita artikan bahwa :
Tag <!DOCTYPE html> berarti type dokumen yang di tentukan adalah HTML.
Tag <html>  untuk membuat dokument HTML.
Tag <head> berfungsi untuk membuat head/kepala dokument.
Tag <title> ditampilkan sebagai judul dokument (terletak pada tab browser).
Tag <body> untuk menampilkan isi halaman website.

Pada contoh berikutnya Kita bisa menambah Tag Tag lain yang di sematkan pada Tag <body>.....</body>

<!doctype html>
<html>
  <head>
    <title>Selamat Datang</title>
  </head>
  <body>
Pengenalan Bahasa HTML<br>
<b>Tulisan ini akan terlihat lebih tebal</b><br>
<i>Tulisan ini akan terlihat miring</i><br>
<i><b>Tulisan ini akan terlihat lebih tebal dan miring</b></i><br>
<i><b>Tulisan ini akan terlihat lebih tebal dan miring dan <u>dibagian ini ada underline</u></b></i><br>
  </body>
</html>