TUGAS UJIAN TENGAH SEMESTER

PEMROGRAMAN PERANGKAT MOBILE

“Pembuatan Aplikasi Login Form Menggunakan Android Studio”

Disusun Oleh :

Hamdan Zakaria Ahada

20010161P
Tekhnik Informatika B
Universitas Dehasen Bengkulu
2022
Langkah-Langkah Membuat Aplikasi Login Form Sederhana Android Studio

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

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

3. Langkah 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. Langkah 4
Setelah selesai, sekarang buka activity_Dashboard.xml, lalu buat desain selamat datang atau
sambutan bahwa kamu telah berhasil login seperti contoh berikut:

5. Langkah 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. Langkah 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. Langkah 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. Langkah 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. Langkah 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. Langkah 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 kita dan jalankan Aplikasi kita dengan cara klik tombol Run atau melalui
menu Run > Run ‘app’ kemudian memilih perangkat yang Anda gunakan. kita 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. Kita juga bisa membuat desain sesuai versi kita sendiri, atau bisa juga mengganti tulisan
keterangan sesuai dengan yang kita inginkan.