Membuat auto login di App Inventor Kodular

Pada postingan kali ini saya akan membahas bagaimana caranya membuat auto login di App Inventor Kodular. Auto login adalah sebuah fasilitas yang diberikan kepada pengguna untuk melakukan satu kali login saja ketika ingin menggunakan aplikasi.

Dengan adanya fasilitas auto login ini, tentunya akan mempermudah pengguna dalam menggunakan aplikasi, karena pengguna tidak perlu direpotkan dengan harus melakukan login kembali ketika membuka aplikasi.

Konsep auto login umunya seperti ini, ketika pengguna baru pertama kali membuka aplikasi maka halaman login akan muncul, setelah pengguna login maka pengguna akan masuk ke halaman utama aplikasi. Nah pada saat pengguna membuka aplikasi yang kedua kalinya, pengguna akan langsung masuk ke halaman utama aplikasi tanpa harus melakukan login kembali.

Lalu bagaimana cara menerapkanya di app inventor atau kodular?

cukup mudah kawan, Jadi kita harus menggunakan database TinyDB. Apa itu TinyDB? TinyDB adalah komponen yang ada di app inventor atau kodular yang digunakan untuk menyimpan data aplikasi kedalam perangkat smartphone android.

Nah TinyDB inilah yang akan menyimpan data login dari si pengguna dan dapat dijadikan patokan apakah si pengguna itu sudah pernah login atau belum ke sebuah aplikasi.

Apabila kamu baru pertama menggunakan komponen TinyDB saya sarankan untuk membaca tutorial sebelumnya tentang CRUD TinyDB App Inventor agar nanti kamu tidak bingung ketika mengikuti tutorial kali ini.

Cara membuat auto login di app inventor kodular

Oke pada tutorial kali ini saya membuat aplikasinya di Kodular. Jika kamu pengguna App Inventor itu tidak masalah karena Kodular dan App Inventor ini tidak jauh beda. Kemudian aplikasi yang dibuat kali ini akan terkoneksi dengan database MySQL yang mana akan berguna untuk menyimpan data-data pengguna dan mengecek apakah si pengguna yang melakukan login ini sudah terdaftar pada database atau tidak.

Pertama-tama yang perlu kamu lakukan adalah

Membuat database dan tabel user

Database diperlukan untuk menyimpan data akun pengguna aplikasi yang disertai email dan password. Kali ini saya menggunakan layanan 000webhost untuk membuat database gratis yang bisa diakses secara online. Data-data akun tersebut nantinya akan digunakan untuk melakukan aksi login dari aplikasi android.

kali ini saya anggap kamu sudah bisa membuat database dan tabel di 000wehost, jadi saya tidak perlu menjelaskannya lagi.

masuk ke phpmyadmin lalu buat database dan kemudian dilanjut membuat table dengan nama tabel “user”. Lalu buat kolom “id”, “email”, dan “password”. Kurang lebih tampilan tabelnya seperti ini.

kemudian jangan lupa insert data untuk membuat akun user. Seperti contoh pada gambar di atas saya hanya mengisi kolom email dan password sebagai admin, lalu untuk id nya itu sudah auto increment jadi langsung terisi otomatis.

Setelah selesai membuat akun login untuk user di database, selanjutnya adalah

Upload file php ke hosting

Agar aplikasi dapat terhubung dengan database, maka diperlukan sebuah file PHP. File PHP ini dapat berisi kode-kode program PHP yang memang khusus untuk mengelola komunikasi server dengan client.

Pertama-tama kamu buat folder terlebih dahulu di file manager 000webhost, untuk masuk ke file manager di 000webhost caranya setelah kamu login di 000webhost kamu klik menu Tools kemudian klik menu file manager lalu akan muncul button upload file. Klik button upload file maka kamu akan masuk ke halaman file manager.

Setelah masuk ke halaman file manager, masuk ke folder public html. kemudian buat folder baru dan berinama folder tersebut dengan nama auto login. Setelah itu buat file 2 file php baru yaitu koneksi.php dan login.php.

Berikut di bawah ini adalah isi dari file koneksi.php

<?php
$hostname = "localhost";
$user = "nama user";
$password = "password database";
$database = "nama database";

$koneksi=mysqli_connect($hostname,$user,$password,$database);

if ($koneksi->connect_error) {
	die('Database Not Connect. Error : ' . $koneksi->connect_error);
}

jangan lupa untuk merubah $hostname, $user, $password dan juga $database. Sesuaikan dengan host, user, password dan database yang ada di akun 000webhost mu.

Berikut di bawah ini adalah isi dari file login.php

<?php 
include "koneksi.php";

$email = $_POST['email'];
$password = $_POST['password'];

$query = mysqli_query($koneksi, "SELECT * FROM user WHERE email = '$email' AND password = '$password'");
$cek = mysqli_num_rows($query);
if ($cek > 0) {
    echo "berhasil";
} else {
    echo "gagal";
}

silahkan kamu copy-paste kode tersebut dan simpan ke hosting 000webhost. Kurang lebih tampilannya akan seperti ini jika kamu sudah selesai membuat file php-nya di file manager 000webhost.

kemudian selanjutnya klik kanan pada file login.php lalu klik view. Setelah tab baru terbuka abaikan pesan kesalahan PHP yang ada di halaman web, kamu cukup salin URL yang ada di bagian atas browser lalu simpan ke notepad. URL ini nanti akan digunakan di bagian komponen web pada saat kamu mulai membuat blok.

Buat desain aplikasi

Setalah selesai membuat database dan tabel, selanjutnya adalah mendesain aplikasinya, masuk ke Kodular lalu buat desain 2 halaman pada 1 screen. Halaman untuk login dan halaman untuk welcome, cara membuat 2 halaman pada 1 screen saya menggunakan komponen “vertical arrangement”.

Adapun desain yang saya buat seperti ini.

untuk bagian text-box -pass jangan lupa untuk merubah tipe inputnya menjadi tipe password. Pada tutorial ini saya belum merubahnya, jadi kamu harus merubah tipe inputannya. Supaya nanti ketika aplikasi sudah jadi pada saat pengguna mengisi text box password maka tulisan pada inputannya menjadi tidak terlihat.

Tambahan

Block program auto login app inventor kodular

Adapun blok program yang pertama yaitu blok program inisiasi

Selanjutnya adalah blok program auto loginnya

Pada komponen web.URL isi dengan data URL yang sebelumnya sudah kamu simpan di notepad.

setelah proses pembuatan blok programnya selesai jangan lupa untuk build aplikasinya. Untuk memastikan apakah aplikasi yang dibuat telah berfungsi dengan baik, maka berikut di bawah ini adalah cuplikan singkat dari aplikasi yang telah dibuat pada tutorial ini.

Cukup mudah bukan? kedepannya saya akan membuat tutorial auto login dengan batasan session dimana dalam jangka beberapa hari maka pengguna akan melakukan login kembali. Apabila ada pertanyaan silahkan tulis di komentar.