Sunday 9 October 2016

Android Studio: Membuat Form Login Sederhana dan Tutorialnya

Selamat pagi, hari ini updatenya pagi-pagi karena sekarang mungkin akan sibuk di kampus dan mungkin juga mencari materi baru untuk update di blog ini. Dalam pembuatan sebuah aplikasi, aplikasi apapun mau berbasis web, desktop ataupun mobile, agar aplikasi kita interaktif dan tidak membebani hanya satu halaman saja maka akan dibuat halaman lain untuk menampung informasi agar tidak berat disatu page saja. Ada juga yang memang harus menggunakan lebih dari satu halaman. Kali ini kita akan mempelajari :
  1. Autentivikasi sederhana menggunakan if, ini sangat sederhana karena belum menggunakan database.
  2. Memanggil activity lain dari activity yang aktif, dalam artian kita akan memanggil halaman lain jika kita memasukkan username dan password yang benar. Ini sangat penting sekali nantinya jika kita membuat aplikasi yang kompleks.
  3. Memparse data dari satu halaman ke halaman lainnya. Nanti jika user berhasil login, maka usernamenya akan terlihat dihalaman selanjutnya.
Seperti apa nantinya tampilan yang akan kita buat, berikut saya sertakan screenshootnya:


Seperti itulah nantinya tampilan aplikasi yang kita buat. Untuk penjelasan source codenya kita pelajari sama-sama di bawah ini:
Di tombol bawah ini saya sertakan link download full codenya dimana kalian tinggal import saja ke android studio.

Download

Langkah pertama, buatlah sebuah activity untuk membuat form loginnya. Buatlah layoutnya seperti dibawah ini:

Jika kalian kesusahan membuat dari Design langsung, buatlah dalam bentuk xml dengan klik text yang ada dikiri bawah pada gambar dan tambahkan sintaks seperti dibawah ini:

<LinearLayout    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:orientation="horizontal"    
android:background="@color/flat">

<EditText android:id="@+id/username"
android:layout_width="0dp"            
android:layout_weight="1"        
android:layout_height="wrap_content"        
android:hint="@string/username_id"        
android:layout_gravity="top" />

<EditText android:id="@+id/password"
android:layout_weight="1"       
android:layout_width="0dp"        
android:layout_height="wrap_content"        
android:inputType="textPassword"        
android:hint="@string/password"/>

<Button        android:layout_width="wrap_content"        
android:layout_height="wrap_content"        
android:text="@string/kirim"        
android:onClick="cobaLogin"/>

</LinearLayout>

Penjelasan codenya:
-EditText itu kita membuat field silakan kalian isi android:id supaya mudah nanti kita identifikasi pada Javanya.
-Button akan memiliki action, dimana saat button diklik akan ada validasi dari kedua text field yang kita buat. Jika username dan password benar maka akan membuka activity yang lain yang akan kita atur nanti. Yang berfungsi membuatkan action nanti yaitu android:onClick="cobaLogin"

Diatas kita sudah buat layoutnya, sekarang kita buatkan prosesnya namanya MainActivity.java
codenya seperti dibawah ini:


package com.example.maninback.login;

import android.content.Intent;
import android.provider.Settings;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {
public final static String EXTRA_MESSAGE = "com.example.maninback.MESSAGE";
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
/**fungsi ini akan dipanggil saat user menekan tombol login*/
            public void cobaLogin(View view){
Intent main = new Intent(this, com.example.maninback.login.main.class);
EditText username = (EditText) findViewById(R.id.username);
EditText pass = (EditText) findViewById(R.id.password);
String namauser = username.getText().toString();
String password = pass.getText().toString();
if(namauser.equals("admin") && password.equals("admin")){
main.putExtra(EXTRA_MESSAGE, namauser);
startActivity(main);
}
else{
AlertDialog gagal = new AlertDialog.Builder(MainActivity.this).create();
gagal.setTitle("Gagal");
gagal.setMessage("Pastikan Username dan Password benar");
gagal.show();
}
}
}
Untuk penjelasan codengnya:
-EXTRA_MESSAGE : berfungsi nantinya untuk menampung nilai username yang akan diteruskan ke activity lainnya.
-Yang menjadi penentu user boleh login atau atau tidak, kalian perhatikan function cobaLogin yang menjadi action button onClick yang tadi kita buat di desainnya.

Langkah selanjutnya adalah membuat activity empty lagi caranya:


Klik kanan di app>pilih new>pilih activity> Empty Activity.
Jika sudah silakan kalian buat layoutnya lagi, kita akan buat seperti dibawah ini:


Untuk desainnya dalam bentuk xml seperti dibawah ini:


<?xml version="1.0" encoding="utf-8"?>
<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.maninback.login.main">

<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"        
android:textAppearance="?android:attr/textAppearanceLarge"      
 android:text="Selamat Datang"       
 android:id="@+id/textView"      
  android:layout_alignParentTop="true"       
 android:layout_centerHorizontal="true"     
   android:layout_marginTop="121dp" />

<TextView android:layout_width="wrap_content"
 android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="" 
android:id="@+id/username"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true" />

<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"  
 android:textAppearance="?android:attr/textAppearanceSmall"
 android:text="BaliDev 2016"
 android:id="@+id/textView2"
 android:layout_alignParentBottom="true" 
android:layout_alignParentStart="true" />

</RelativeLayout>
Langkah selanjutnya tinggal kalian atur di file javanya seperti dibawah ini:


package com.example.maninback.login;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class main extends AppCompatActivity {

@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);

Intent tampil = getIntent();
String user = tampil.getStringExtra(MainActivity.EXTRA_MESSAGE);
TextView username = (TextView) findViewById(R.id.username);
username.setText(user);
}
}
Langkah selanjutnya kalian tinggal kalian edit manifestnya dan sesuaikan seperti yang bawah ini, ini cuma optional saja memang kalau salah satu activity tidak tampil saat tombol di klik.


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

<application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="BaliDev" android:supportsRtl="true" android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

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

</manifest>
Mungkin sekian tutorial sekarang ini, memang agak panjang dan memusingkan. Saya saat pertama membuat juga seperti itu. Jad saya sarankan kalian download project diatas terus kalian coba import dan run di gadget ataupun diemulator. Setelah kalian paham coba buat sesuai dengan yang kalian inginkan.

Baca juga artikel lainnya: