Fun With Kotlin Make Simple Register Form #1
#Simple Project #Kotlin Indonesia
Assalamu’alaikum Wr. Wb.
Hallo sobat Fun Kotlin semangat pagi pada kesempatan kali ini saya akan update postingan bagaimana membuat simple form Register pada kotlin yang lalu akan disimpan didalam database mysql atau sejenisnya pembahasan ini masih berhubungan minggu lalu yaitu masih berhubungan dengan mysql, Codeigniter dan lainnya jadi sobat Fun Kotlin pastikan sudah membaca postingan sebelumnya linknya ada di bawah ini hehehehe :D
jika sobat Fun Kotlin mempunyai web service yang sudah jadi kalian bisa gunakan itu untuk implentasinya, langsung saja kita mulai buat project nya ya ya cuss ah.
Kita masih menggunakan database minggu lalu yang telah kita buat disini saya menggunakan database dengan nama db_udacoding dan didalamnya ada table dengan nama tb_staff pada minggu lalu kita telah membuat beberapa field didalam tablenya kurang lebih seperti ini
Lalu kita tambahkan dua Field baru dengan nama staff_email dan staff_password maka kurang lebih strukturnya seperti ini :
Lalu kita masuk ke server Codeigniter kita kita edit file ServerApi nya dengan menambahkan function baru berikut ini :
//Fungsi Register Stafffunction registerStaff(){$nama = $this->input->post(‘nama’);$email = $this->input->post(‘email’);$password = $this->input->post(‘password’);$hp = $this->input->post(‘hp’);$alamat = $this->input->post(‘alamat’);$this->db->where(‘staff_email’,$email);$this->db->or_where(‘staff_hp’,$hp);$q = $this->db->get(‘tb_staff’);if($q -> num_rows() > 0){$data[‘message’] = ‘Email atau Hp sudah terdaftar, silahkan Sign In’;$data[‘status’] = 404;}else{$simpan[‘staff_name’] = $nama;$simpan[‘staff_email’] = $email;$simpan[‘staff_password’] = md5($password);$simpan[‘staff_hp’] = $hp;$simpan['staff_alamat'] = $alamat;$q = $this->db->insert(‘tb_staff’, $simpan);if($q){$data[‘message’] = ‘success’;$data[‘status’] = 200;} else {$data[‘message’] = ‘error’;$data[‘status’] = 404;}}echo json_encode($data);}
Maka kurang lebih keseluruhan scriptnya akan seperti ini:
Setelah itu kita coba kirimkan request ke server dengan postman seperti ini
Lalu kita buat project baru dengan nama Simple project kemudian kit tunggu dia sampai selesai buuild gradlenya kemudian ikuti langkah berikut ini :
- Kemudian kita buat packga baru dan file baru seperti gambar aturan dibawah ini
package network didalamnya ada dua 2 file bernama NetworkService(interface) dan NetworkConfig (object)
package register masukan file MainActivity ke dalam packae register lalu rename menjadi RegisterActivity lalu didalam packagenya buat 2 package baru dengan nama data dan presenter dan didalam package presenter buat du file dengan nama RegisterView (Interface) dan RegisterPresnter(class) maka kurang lebih seperti ini :
2. Kemuadian kita tambahkan library baru di dependencies yaitu library dibawah ini lalu jangan lupa sync now
//Todo Retrofit
implementation 'com.squareup.retrofit2:retrofit:2.6.1'
implementation 'com.squareup.retrofit2:converter-gson:2.6.1'
implementation("com.squareup.okhttp3:logging-interceptor:4.2.1")
//Todo Anko
implementation "org.jetbrains.anko:anko:$anko_version"
implementation "org.jetbrains.anko:anko-commons:$anko_version"
implementation 'com.google.android.material:material:1.0.0'3. setelah itu kita buat file baru dengan nama ResultRegister didalam package data lalu edit file tersebut dengan mengetikan code berikut ini
import com.google.gson.annotations.SerializedName
data class ResultRegister(
@field:SerializedName("message")
val message: String? = null,
@field:SerializedName("status")
val status: Int? = null
)4. Kemudian kita edit file NetworkConfig dengan mengetikan source code berikut ini :
import com.example.simpleproject.register.RegisterActivity
import okhttp3.OkHttpClient
import okhttp3.logging.HttpLoggingInterceptor
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
object NetworkConfig {
fun getInterceptor() : OkHttpClient {
val logging = HttpLoggingInterceptor()
logging.level = HttpLoggingInterceptor.Level.BODY
val okHttpClient = OkHttpClient.Builder()
.addInterceptor(logging)
.build()
return okHttpClient
}
//Retrofit
fun getRetrofit(): Retrofit {
return Retrofit.Builder()
.baseUrl("http://192.168.10.232/server_udacoding/index.php/ServerApi/")
.client(getInterceptor())
.addConverterFactory(GsonConverterFactory.create())
.build()
}
fun getService() = getRetrofit().create(NetworkService::class.java)
}5. Edit juga file NetworkService dengan mengetikan source code berikut ini :
import com.example.simpleproject.register.data.ResultRegister
import retrofit2.Call
import retrofit2.http.Field
import retrofit2.http.FormUrlEncoded
import retrofit2.http.POST
interface NetworkService {
@FormUrlEncoded
@POST("registerStaff")
fun register(@Field("nama") nama : String?,
@Field("email") email : String?,
@Field("hp") hp : String?,
@Field("password") password : String?,
@Field("alamat") alamat : String?) : Call<ResultRegister>
}6. Setelah itu kita edit file RegisterView dengan mengetikan source code berikut ini :
interface RegisterView {
fun onSuccessRegister(msg : String?)
fun onFailedRegister(msg: String?)
}7. Kemudian pada file RegisterPresnter kita edit dengan mengetikan code berikut ini :
import com.example.daganganjeh.network.NetworkConfig
import com.example.daganganjeh.register.data.ResultRegister
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response
class RegisterPresenter (val registerView: RegisterView){
fun register( nama : String?, email : String?,
hp : String?, password : String?){
NetworkConfig.service()
.register(nama,email,hp,password)
.enqueue(object : Callback<ResultRegister>{
override fun onFailure(call: Call<ResultRegister>, t: Throwable) {
registerView.onFailedRegister(t.localizedMessage)
}
override fun onResponse(
call: Call<ResultRegister>,
response: Response<ResultRegister>
) {
if (response.body()?.status == 200){
registerView.onSuccessRegister(response.body()?.message)
} else{
registerView.onFailedRegister(response.body()?.message)
}
}
})
}
}8. Kita edit layoutnya activity_main.xml dengan mengetikan code berikut ini :
9. Kita buat file resource baru di bagian drawable dengan nama bg_button.xml lalu kita edit dengan mengetikan code berikut ini:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorPrimary"/>
<corners android:radius="8dp"/>
</shape>10. Lalu kita masuk kedalam RegisterActivity kita edit file tersebut dengan mengetikan source code dibawah ini :
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.simpleproject.R
import com.example.simpleproject.register.presenter.RegisterPresenter
import com.example.simpleproject.register.presenter.RegisterView
import kotlinx.android.synthetic.main.activity_main.*
import org.jetbrains.anko.alert
import org.jetbrains.anko.sdk27.coroutines.onClick
class RegisterActivity : AppCompatActivity(), RegisterView {
private lateinit var presenter : RegisterPresenter
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
presenter = RegisterPresenter(this)
btnRegister.onClick {
val nama = registerName.text.toString()
val email = registerEmail.text.toString()
val hp = registerHp.text.toString()
val password = registerPassword.text.toString()
val alamat = registerAlamat.text.toString()
presenter.register(nama, email, hp, password, alamat)
}
}
override fun onSuccess(msg: String?) {
alert {
title = "Information Register"
message = "Success Register"
}.show()
}
override fun onFailed(msg: String?) {
alert {
title = "Information Register"
message = msg.toString()
}.show()
}
}11. Jangan lupa kita berikan uses-permission internet di bagian manifest nya dengan menambagkah code berikut ini
<uses-permission android:name="android.permission.INTERNET"/>Lalu coba kita run maka hasilnya kurang lebih seperti ini :
