Login dan Register

Dalam sebuah aplikasi android kita pasti banyak menjumpai perintah untuk login dan mendaftar akun. Hal ini berguna untuk memastikan identitas pengguna aplikasi. Dalam penyebutannya bagian login dan register ini disebut dengan bagian otentikasi user. Artikel ini akan memberikan tutorial kilat membuat login dan register yang menarik. Just do it again.

1. Login form berisi halaman awal untuk otentikasi user yang menggunakan aplikasi. Biasanya berisi form nama dan password yang telah terdaftar di database aplikasi. Bisa juga dengan one touch menggunakan akun google seperti gmail. Dan berikut langkah – langkah membuat form login.

a. Buat activity kosong (empty activity) beri nama LoginActivity

b. Buat tampilan UI-nya di activity_login.xml

<?xml version="1.0" encoding="utf-8"?&gt;
<androidx.constraintlayout.widget.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"
    android:background="@color/white"
    tools:context=".LoginActivity"&gt;

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:src="@drawable/excv"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" /&gt;

    <TextView
        android:id="@+id/jargon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:fontFamily="@font/englebert"
        android:text="Make your exclusive design with us"
        android:textColor="@color/black"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo" /&gt;

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/englebert"
        android:hint="Username"
        android:ems="15"
        android:textColor="@color/black"
        android:textColorHint="@color/black"
        android:textSize="12sp"
        android:layout_marginEnd="40dp"
        android:layout_marginStart="40dp"
        android:layout_marginTop="40dp"
        android:inputType="textEmailAddress"
        android:drawableStart="@drawable/hacker"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/jargon" /&gt;
    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/englebert"
        android:hint="Password"
        android:ems="15"
        android:inputType="textPassword"
        android:textColor="@color/black"
        android:textColorHint="@color/black"
        android:textSize="12sp"
        android:layout_marginEnd="40dp"
        android:layout_marginStart="40dp"
        android:layout_marginTop="15dp"
        android:drawableStart="@drawable/pincode"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/username"/&gt;

    <Button
        android:id="@+id/login_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/englebert"
        android:text="LOGIN"
        android:textSize="14sp"
        android:layout_marginTop="40dp"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/password" /&gt;

    <TextView
        android:id="@+id/register_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/englebert"
        android:text="Register Here"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_btn" /&gt;
</androidx.constraintlayout.widget.ConstraintLayout&gt;

c. Dalam artikel ini menggunakan metode retrofit untuk login dan register. Maka gradle akan ditambahkan dengan depencies Retrofit sebagai berikut :

=dependencies {
    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.1'
    implementation 'com.squareup.retrofit2:retrofit:2.9.0'
    implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}

d. Jangan lupa untuk di sync now untuk setiap perubahan di gradle.

e. Buat package baru beri nama api, untuk membuat package baru bisa dengan cara seperti ini

f. Kemudian buat class baru didalam package api dan beri nama ApiClient.java

g. Isi class ApiClient.java dengan program :

import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

public class ApiClient {
    private static final String BASE_URL = "your url’s php";
    private static Retrofit retrofit;
    
    public static Retrofit getRetrofit(){
        if (retrofit == null){
            retrofit = new Retrofit.Builder()
                    .baseUrl(BASE_URL)
                    .addConverterFactory(GsonConverterFactory.create())
                    .build();
        }
        return retrofit;
    }
}

h. Buat interface baru dan beri nama ApiInterface.java didalam package api.

i. Isi ApiInterface.java dengan program :

import retrofit2.http.Field;
import retrofit2.http.FormUrlEncoded;
import retrofit2.http.POST;

public interface ApiInterface {
    @FormUrlEncoded
    @POST("isi dengan nama file php login")
    Call<LoginData&gt; loginData(
            @Field("username") String username,
            @Field("password") String password
    );
}

j. Buat package baru lagi dan beri nama model

k. Kemudian dalam package model buat package lagi dengan nama login

l. Arahkan kursor ke package login dan klik new lalu cari New Generate POJO from JSON

m. Pastekan respon dari php login kalian di kolom kosong, check create setter dan create getter. Kemudianberikan nama DataLogin pada Root Object Name. kemudian klik saja Generate. Maka otomatis akan menambahkan file baru di package login.

n. Buat file java baru dalam package login beri nama file dengan LoginData dan isi dengan program berikut :

public class LoginData {
    private DataLogin data;
    private String message;
    private boolean status;

    public DataLogin getData() {
        return data;
    }

    public String getMessage() {
        return message;
    }

    public boolean isStatus() {
        return status;
    }
}

o. Pastikan sudah tidak ada error di antara file – file yang ada ok lanjut

p. Lanjut ke LoginActivity.java, buat program nya dengan

public class LoginActivity extends AppCompatActivity implements View.OnClickListener {

    EditText email, password;
    Button login;
    TextView tv_register;
    ApiInterface apiInterface;
    String Username, Password;

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

        email = findViewById(R.id.username);
        password = findViewById(R.id.password);
        tv_register = findViewById(R.id.register_tv);
        login = findViewById(R.id.login_btn);

        login.setOnClickListener(this);
        tv_register.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.login_btn:
                Username = email.getText().toString();
                Password = password.getText().toString();
                letslogin(Username, Password);
                break;
            case R.id.register_tv:
                startActivity(new Intent(this, RegisterActivity.class));
                finish();
                break;
        }
    }

    private void letslogin(String username, String password) {
        apiInterface = ApiClient.getRetrofit().create(ApiInterface.class);
        Call<LoginData&gt; loginCall = apiInterface.loginData(username, password);

        loginCall.enqueue(new Callback<LoginData&gt;() {
            @Override
            public void onResponse(retrofit2.Call<LoginData&gt; call, Response<LoginData&gt; response) {
                if (response.body() != null &amp;&amp; response.isSuccessful() &amp;&amp; response.body().isStatus()) {
                    Toast.makeText(LoginActivity.this, response.body().getDataLogin().getUsername(), Toast.LENGTH_SHORT).show();
                    Intent intent = new Intent(LoginActivity.this, MainActivity.class);
                    intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
                    startActivity(intent);
                    finish();
                } else {
                    Toast.makeText(LoginActivity.this, response.body().getMessage(), Toast.LENGTH_SHORT).show();
                }
            }

            @Override
            public void onFailure(retrofit2.Call<LoginData&gt; call, Throwable t) {
                Toast.makeText(LoginActivity.this, t.getLocalizedMessage(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Halaman LoginActivity telah selesai

2. Register form berisi form nama, email, dan data lain yang dibutuhkan untuk mendaftarkan data kita ke database aplikasi. Berikut langkah – langkahnya :

a. Buat UI tampilan activity_register.xml

<?xml version="1.0" encoding="utf-8"?&gt;
<androidx.constraintlayout.widget.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"
    android:background="@color/white"
    tools:context=".RegisterActivity"&gt;

    <EditText
        android:id="@+id/nama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="40dp"
        android:layout_marginTop="150dp"
        android:layout_marginEnd="40dp"
        android:drawableStart="@drawable/hacker"
        android:fontFamily="@font/englebert"
        android:hint="Nama"
        android:inputType="textEmailAddress"
        android:textColor="@color/black"
        android:textColorHint="@color/black"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" /&gt;

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        android:drawableStart="@drawable/hacker"
        android:fontFamily="@font/englebert"
        android:layout_marginTop="20dp"
        android:hint="Username"
        android:inputType="textEmailAddress"
        android:textColor="@color/black"
        android:textColorHint="@color/black"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/nama"/&gt;

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/englebert"
        android:hint="Password"
        android:inputType="textPassword"
        android:textColor="@color/black"
        android:textColorHint="@color/black"
        android:textSize="12sp"
        android:layout_marginEnd="40dp"
        android:layout_marginStart="40dp"
        android:layout_marginTop="15dp"
        android:drawableStart="@drawable/pincode"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/username"/&gt;

    <Button
        android:id="@+id/login_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/englebert"
        android:text="REGISTER"
        android:textSize="14sp"
        android:layout_marginTop="40dp"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/password" /&gt;

    <TextView
        android:id="@+id/register_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/englebert"
        android:text="Login Here"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_btn" /&gt;	
</androidx.constraintlayout.widget.ConstraintLayout&gt;

b. Tambahkan kode berikut di ApiInterface.java

@FormUrlEncoded
    @POST("isi dengan nama file php register")
    Call<RegisterData&gt; registerData(
            @Field("username") String username,
            @Field("nama") String nama,
            @Field("password") String password,
    );

c. Buat package baru dalam package model dan beri nama register

d. Buat class baru dalam package register beri nama RegisterData.java dan lakukan generate POJO seperti langkah pada login

e. Kemudian buat class baru lagi didalam package register dengan nama DataRegister.java

f. Pastikan semua baik – baik saja ya, alias tidak ada eror.

g. Lanjut ke RegisterActivity.java beri program pada class ini dengan :

public class RegisterActivity extends AppCompatActivity implements View.OnClickListener{

    EditText Email, Password, Name;
    TextView tvlogin;
    Button daftar;
    String username, password, nama, alamat;
    ApiInterface apiInterface;

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

        Email = findViewById(R.id.username);
        Name = findViewById(R.id.nama);
        Password = findViewById(R.id.password);
        daftar = findViewById(R.id.reg_btn);
        tvlogin = findViewById(R.id.login_tv);

        daftar.setOnClickListener(this);
        tvlogin.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.reg_btn:
                nama = Name.getText().toString();
                username = Email.getText().toString();
                password = Password.getText().toString();
                register(nama, username, password);
                break;
            case R.id.login_tv:
                Intent intent = new Intent(this, LoginActivity.class);
                startActivity(intent);
                finish();
                break;
        }
    }

    private void register(String nama, String username, String password) {
        apiInterface = ApiClient.getRetrofit().create(ApiInterface.class);
        Call<RegisterData&gt; call =apiInterface.registerData(nama, username, password);
        call.enqueue(new Callback<RegisterData&gt;() {
            @Override
            public void onResponse(Call<RegisterData&gt; call, Response<RegisterData&gt; response) {
                if (response.body() !=null &amp;&amp; response.isSuccessful() &amp;&amp; response.body().isSuccess()){
                    Toast.makeText(RegisterActivity.this, response.body().getMessage(), Toast.LENGTH_SHORT).show();
                    Intent intent = new Intent(RegisterActivity.this, LoginActivity.class);
                    startActivity(intent);
                    finish();
                } else{
                    Toast.makeText(RegisterActivity.this, response.body().getMessage(), Toast.LENGTH_SHORT).show();
                }
            }

            @Override
            public void onFailure(Call<RegisterData&gt; call, Throwable t) {
                Toast.makeText(RegisterActivity.this,t.getLocalizedMessage(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

h. Jalankan program dan lihat hasilnya.

Bagaimana berhasil tidak? Sekian artikel kali ini, sampai jumpa di artikel selanjutnya.