11,322 Views

Halo kawan, jumpa lagi bersama cuplis. Pada tutorial ini kita akan membahas bagaimana cara membuat aplikasi android User Login apps yang sederhana dan simpel tanpa menggunakan sebuah database.  yuk langsung kepoin aja^^.

Alur programnya seperti ini:

  1. Program dijalankan.
  2. Menampilkan 2 kolom input text (NIM & Password), dan Tombol Login atau Sign in dan Exit.
  3. Memasukkan Nim dan password kedalam kolom EditText / Input Text.
  4. Klik tombol Login – melakukan verifikasi apakah Nim dan password salah atau benar. Jika salah akan menampilkan keterangan “Nim atau Password Anda Salah!” dan jika benar akan langsung di bawa menuju layar activity Dashboard.
  5. Selesai.

Langkah-Langkah Membuat Aplikasi Login Form Sederhana Android Studio

1. Buatlah project baru dengan nama “Aplikasi Login Sederhana”

2. Kemudian Buat activity baru dengan cara Klik Kanan app > New > Activity > pilih Empty Activity > kemudian pada Activity name.

3. Setelah itu silahkan buka activity_main.xml, klik mode Text, lalu memasukkan listing kode berikut ke dalam file activity_main.xml.

<?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"
    android:background="@color/colorOldGreen"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editTextTextNIM"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:backgroundTint="@color/white"
        android:ems="10"
        android:hint="masukan nim"
        android:inputType="textEmailAddress"
        android:textColor="@color/white"
        android:textColorHint="@color/colorLightAsh"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:backgroundTint="@color/white"
        android:ems="10"
        android:hint="masukan password"
        android:inputType="textPassword"
        android:textColor="@color/white"
        android:textColorHint="@color/colorLightAsh"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

    <Button
        android:id="@+id/buttonLogin"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="24dp"
        android:text="@string/login"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="166dp"
        android:layout_marginEnd="16dp"
        android:text="@string/sign_in"
        android:textColor="@color/white"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="4dp"
        android:layout_marginEnd="16dp"
        android:text="@string/nim"
        android:textColor="@color/white"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="4dp"
        android:layout_marginEnd="16dp"
        android:text="@string/password"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextNIM" />

</androidx.constraintlayout.widget.ConstraintLayout>








Setelah memasukkan kode diatas, maka desain layout pada activity_main.xml akan menjadi seperti gambar dibawah ini.




4. Setelah selesai, sekarang buka activity_Dashboard.xml, lalu buat desain selamat datang atau sambutan bahwa kamu telah berhasil login seperti contoh berikut:




5. Setelah selesai mendesain tampilan aplikasi kita, sekarang kita buka MainActivity.kt dan masukkan listing kode di bawah ini:








package com.ur.apps2go

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.ur.apps2go.api.RetrofitClient
import com.ur.apps2go.model.LoginResponse
import kotlinx.android.synthetic.main.activity_main.*
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        buttonLogin.setOnClickListener {

            val nim = editTextTextNIM.text.toString().trim()
            val password = editTextTextPassword.text.toString().trim()

            if(nim.isEmpty()){
                editTextTextNIM.error = "Email required"
                editTextTextNIM.requestFocus()
                return@setOnClickListener
            }

            if(password.isEmpty()){
                editTextTextPassword.error = "Password required"
                editTextTextPassword.requestFocus()
                return@setOnClickListener
            }

            RetrofitClient.instance.userLogin(nim, password)
                    .enqueue(object: Callback<LoginResponse> {
                        override fun onFailure(call: Call<LoginResponse>, t:Throwable) {
                            Toast.makeText(applicationContext, t.message, Toast.LENGTH_LONG).show()
                        }

                        override fun onResponse(call: Call<LoginResponse>, response: Response<LoginResponse> ) {
                            if (!response.body()?.error!!) {
                                val intent = Intent(applicationContext, Dashboard::class.java)
                                intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK

                                startActivity(intent)
                            }else {
                                Toast.makeText(applicationContext, response.body()?.message, Toast.LENGTH_LONG).show()
                            }
                        }
                    })
        }
    }
}










6. Kemudian buka AndroidManifest.xml dan masukkan listing kode di bawah ini:








<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.ur.apps2go">
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:usesCleartextTraffic="true"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Apps2Go">
        <activity android:name=".Dashboard"></activity>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>










7. Kemudian Buat packace baru yaitu model terus membuat class baru dengan cara Klik Kanan model > New > class > pilih data class > kemudian kasih nama Loginresponse, masukkan listing kode di bawah ini:








package com.ur.apps2go.model

data class LoginResponse (val error: Boolean, val message:String)










8. Kemudian Buat packace baru yaitu API terus membuat class baru dengan cara Klik Kanan model > New > class > pilih Interfase > kemudian kasih nama API, masukkan listing kode di bawah ini:








package com.ur.apps2go.api

import com.ur.apps2go.model.LoginResponse
import retrofit2.Call
import retrofit2.http.Field
import retrofit2.http.FormUrlEncoded
import retrofit2.http.POST

interface Api {
    @FormUrlEncoded
    @POST(  "userlogin")
    fun userLogin(
        @Field( value = "email")email:String,
        @Field( value = "password")password:String
    ): Call<LoginResponse>

}








9. Kemudian Buat class baru di dalam packace API dengan cara Klik Kanan model > New > class > pilih Object > kemudian kasih nama Retrofit Client, masukkan listing kode di bawah ini:








package com.ur.apps2go.api

import com.ur.apps2go.BuildConfig
import okhttp3.OkHttpClient
import okhttp3.logging.HttpLoggingInterceptor
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

object RetrofitClient {
    private const val BASE_URL = "http://34.101.73.253:8081"

    private val okHttpClient = OkHttpClient.Builder()
            .addInterceptor (HttpLoggingInterceptor().apply {
                level = if (BuildConfig.DEBUG) HttpLoggingInterceptor.Level.BODY else HttpLoggingInterceptor.Level.BODY
            })
            .addInterceptor { chain ->
                val original = chain.request()

                val requestBuilder = original.newBuilder()
                        .method(original.method(), original.body())

                val request = requestBuilder.build()
                chain.proceed(request)
            }.build()


    val instance: Api by lazy{
        val retrofit =Retrofit.Builder()
                .baseUrl(BASE_URL)
                .addConverterFactory(GsonConverterFactory.create())
                .client(okHttpClient)
                .build()

        retrofit.create(Api::class.java)
    }
}








10. Kemudian yang terakhir buka build.gradle(:app) dan masukkan listing kode di bawah ini:








plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-android-extensions'
}

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.3"

    defaultConfig {
        applicationId "com.ur.apps2go"
        minSdkVersion 27
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
}

dependencies {

    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.2'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    implementation 'androidx.annotation:annotation:1.1.0'
    implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.2.0'
    implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    implementation 'com.squareup.retrofit2:retrofit:2.5.0'
    implementation 'com.squareup.retrofit2:converter-gson:2.5.0'
    implementation 'com.squareup.okhttp3:logging-interceptor:3.8.0'

}








Simpan project Anda dan jalankan Aplikasi Anda dengan cara klik tombol Run atau melalui menu Run > Run ‘app’ kemudian memilih perangkat yang Anda gunakan. Anda bisa menggunakan Android Virtual Device (AVD) atau menggunakan ponsel Anda melalui USB untuk Run app Anda.


DEMO APLIKASI


Setelah aplikasi di jalankan, hasilnya akan seperti gambar screenshot dibawah ini:








Selesai. Kamu juga bisa membuat desain sesuai versi kamu, atau bisa juga mengganti tulisan keterangan sesuai dengan yang kamu inginkan. Bagaimana? Sudah paham kan?


Sekian tutorial tentang Membuat Aplikasi Login User Sederhana di Android Studio. Silahkan di coba dan jika ada pertanyaan, silahkan tanyakan melalui kolom komentar.





				 Post Views: 12,065