Anang Hajiana Blog: Projek Kelas Digital - Membuat halaman login Android

Pada kali ini kita akan membuat halaman login. untuk apa halaman login? seperti kita ketahui bahwa halaman login berfungsi agar pengguna melakukan otentikasi akun untuk dapat mengakes fitur lainnya dalam aplikasi. Halaman login adalah sebuah formulir yang dimana pengguna harus mengisi formulir tersebut untuk melakukan otentikasi apakah nama pengguna dan password/kata kunci yang diinput sudah benar dan terdaftar, jika sudah benar dan terdaftar maka pengguna akan diarahkan pada halaman dashboard sehingga dapat mengakses fitur lainnya.

Pada pembahasan ini diharapkan kamu sudah memahami bahasa pemrograman Java. Agar lebih mudah memahaminya. Baik mari kita praktekan sambil nyalakan musik agar lebih enjoy.

1. Buka Android Studio Anda (Disini Saya menggunakan Android Studio versi 4.1.2)

2. Create New Project

3. Pilih Tab Phone and Tablet > Pilih Empty Activity > Klik tombol Next

4. Kita namakan project ini KelasDigital, Untuk packagenya silakan ganti nama "anang" menjadi nama Kamu, misal com.aden.kelasdigital > klik tombol "Finish" 

Note : tunggu loading hingga selesai maka pastikan laptop atau komputer Kamu terhubung ke Internet agar loading berjalan lancar

Jika sukses maka akan tampil seperti ini.

5. Inject dependency Retrofit, OKHTTP, dan GSON pada gradle app

Copy script berikut ke dependency:

implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.okhttp3:logging-interceptor:4.2.1'
implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
implementation 'com.google.code.gson:gson:2.7'

Lalu klik "Sync Now". Tunggu hingga proses selesai ya

6. Klik Menu File > New > Activity > Pilih Empty Activity

7. Activity Name diganti "LoginActivity" > Klik tombol "Finish"

8. Buka activity_login.xml > Pilih tab Code

9. Replace kode berikut ini ke activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".LoginActivity"
    android:orientation="vertical"
    android:gravity="center_vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nama Pengguna"/>

    <EditText
        android:id="@+id/etUserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Password"/>

    <EditText
        android:id="@+id/etPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"/>

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"/>

    <ProgressBar
        android:id="@+id/pb"
        android:visibility="gone"
        android:layout_marginTop="10dp"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

10. Buat package baru. namakan "entity" 

11. Buat Class Login pada package entity

* Jika ingin membuat Interface tinggal klik Interface

12. Isi dengan kode berikut ini :

import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;

public class Login {
    @SerializedName("status")
    @Expose
    private Integer status;
    @SerializedName("message")
    @Expose
    private String message;
    @SerializedName("token")
    @Expose
    private String token;

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public String getToken() {
        return token;
    }

    public void setToken(String token) {
        this.token = token;
    }
}

13. Buat Class "Constant". Berikut isi kodenya

public class Constant {
    public static final String BASE_URL = "http://192.168.43.163:8081/";
}

Note : Silakan sesuaikan IP dan PORT php spark-nya

14. Buat Class "ApiClient". Berikut isi kodenya

import okhttp3.OkHttpClient;
import okhttp3.logging.HttpLoggingInterceptor;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

public class ApiClient {
    public static Retrofit getClient(){
        HttpLoggingInterceptor interceptor = new HttpLoggingInterceptor();
        interceptor.level(HttpLoggingInterceptor.Level.BODY);
        OkHttpClient client = new OkHttpClient.Builder().addInterceptor(interceptor).build();

        return new Retrofit.Builder()
                .baseUrl(Constant.BASE_URL)
                .client(client)
                .addConverterFactory(GsonConverterFactory.create())
                .build();

    }
}

15. Buat Interface "LoginService" 

Berikut isi kodenya :

import com.anang.kelasdigital.entity.Login;

import java.util.HashMap;

import retrofit2.http.Body;
import retrofit2.http.POST;
import retrofit2.Call;

public interface LoginService {
    @POST("api/user/login")
    Call<Login> login(@Body HashMap<String,Object> request);
}

16. Buat Class "SessionManager". Berikut kodenya :

import android.content.Context;
import android.content.SharedPreferences;

public class SessionManager {
    public static final String MYPREFERENCES = "MyPrefs" ;
    public static final String TOKEN = "TokenKey";
    public static final String UUID = "uuidKey";
    private SharedPreferences sharedpreferences;
    private Context context;

    public SessionManager(Context context) {
        this.context = context;
        sharedpreferences = context.getSharedPreferences(MYPREFERENCES, Context.MODE_PRIVATE);;
    }

    public void store(String key, String val){
        SharedPreferences.Editor editor = sharedpreferences.edit();
        editor.putString(key, val);
        editor.commit();
    }

    public  void clear(){
        SharedPreferences.Editor editor = sharedpreferences.edit();
        editor.clear();
        editor.commit();
    }

    public String get(String key, String valDefault){
        return sharedpreferences.getString(key, valDefault);
    }
}

Okay, Jika dilihat strukturnya maka akan seharusnya package dan class yang Kamu buat saat ini akan terlihat seperti gambar berikut :

17. Baik, sekarang kita koding bagian LoginActivity. Double click saja lalu isi kode berikut :

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.anang.kelasdigital.entity.Login;

import java.util.HashMap;

import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;

public class LoginActivity extends AppCompatActivity {

    private LoginService loginService;

    private EditText etUserName, etPassword;
    private Button btnLogin;
    private ProgressBar progressBar;

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

        //init
        loginService = ApiClient.getClient().create(LoginService.class);

        etUserName = findViewById(R.id.etUserName);
        etPassword = findViewById(R.id.etPassword);
        btnLogin = findViewById(R.id.btnLogin);
        progressBar = findViewById(R.id.pb);

        sessionManager = new SessionManager(LoginActivity.this);

        //listener
        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                progressBar.setVisibility(View.VISIBLE);
                actionLogin();
            }
        });
    }

    private void actionLogin(){
        HashMap<String, Object> reqBodyMap = new HashMap<>();

        reqBodyMap.put("uuid", sessionManager.get(SessionManager.UUID, null));
        reqBodyMap.put("user_name", etUserName.getText().toString());
        reqBodyMap.put("password", etPassword.getText().toString());

        Call<Login> callLogin = loginService.login(reqBodyMap);
        callLogin.enqueue(new Callback<Login>() {
            @Override
            public void onResponse(Call<Login> call, Response<Login> response) {
                progressBar.setVisibility(View.GONE);
                if(response.body().getStatus() == 200){
                    //set session
                    sessionManager.store(SessionManager.TOKEN, response.body().getToken());

                    // starting new activity.
                    Intent i = new Intent(LoginActivity.this, MainActivity.class);
                    startActivity(i);
                    finish();
                }else{
                    Toast.makeText(getApplicationContext(),response.body().getMessage(), Toast.LENGTH_SHORT).show();
                }
            }

            @Override
            public void onFailure(Call<Login> call, Throwable t) {
                progressBar.setVisibility(View.GONE);
                Toast.makeText(getApplicationContext(),t.getMessage(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Note : Pada import bagian atas kode yang ada nama "anang" silakan diganti atau sesuaikan saja

Kali ini mari kita buat tombol logout Pada MainActivity. 

18. Buka activity_main.xml lalu isi kode berikut :

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnLogout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Logout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</androidx.constraintlayout.widget.ConstraintLayout>

19. Buka class "MainActivity" lalu isi kode berikut :

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import java.util.UUID;

public class MainActivity extends AppCompatActivity {

    private SessionManager sessionManager;

    private Button btnLogout;

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

        //init
        sessionManager = new SessionManager(MainActivity.this);

        btnLogout = findViewById(R.id.btnLogout);

        if(sessionManager.get(SessionManager.TOKEN, null) == null){
            Intent intent = new Intent(MainActivity.this, LoginActivity.class);
            startActivity(intent);
            finish();
        }

        //uuid
        if(sessionManager.get(SessionManager.UUID, null) == null){
            String id = UUID.randomUUID().toString();
            sessionManager.store(SessionManager.UUID, id);
        }

        //listener
        btnLogout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //clear data session
                sessionManager.clear();
                //go to LoginActivity
                Intent intent = new Intent(MainActivity.this, LoginActivity.class);
                startActivity(intent);
                finish();
            }
        });
    }
}

Oke saat ini Kamu sudah berhasil menyiapkan bagian front end atau Androidnya untuk uji coba nya silakan Sambungkan HP ke PC atau Laptop Kamu dengan USB dan jangan lupa aktifkan debug Androidnya agar terbaca oleh Android Studionya lalu Run dengan cara Pilih Menu Run > Run App atau tekan keyboard shift + F10. Jika berhasil maka Aplikasi akan terinstall di HP Kamu.

Disini penulis sudah menyiapkan Back End nya yang berupa API dan databasenya jadi kamu tinggal download DISINI. 

Lalu extract saja. Lalu import database-nya. Letak database ada pada folder "db"

Untuk running Back End nya buka command line > masuk ke folder dimana Kamu extract pakai perintah cd "path/kelasdigital" > lalu gunakan script berikut untuk run/start

> php spark serve --host 192.168.43.163

Note : untuk --host nya sesuaikan dengan IP Kamu saja ya

Jika berhasil di running maka akan tampil seperti ini :

Silakan buka aplikasi test login, 

username : anang

password : anang

jika ingin ubah password dan username silakan ke tabel t_user. 

Note : enkripsi password menggunakan sha256

Download source code android

Terima kasih, mohon maaf atas segala kekurangan konten ini. Silakan untuk kritik dan saran sangat diterima.