Membuat Aplikasi Android dengan Pyrhon dan Kivy | Halaman Login | Form Pendaftaran serta Autentikasi ke Halaman Member

 

Hai, para koder kece! 
Pernah kepikiran gak sih bikin aplikasi Android tapi gak mau ribet sama Java atau Kotlin yang bikin pusing? Nah, di artikel ini kita bakal ngulik cara bikin aplikasi Android cuma pakai Python dan Kivy.

Tenang aja, kita gak langsung lompat ke yang susah-susah. Kita mulai dari hal dasar dulu: bikin halaman login, form pendaftaran, dan pastinya autentikasi biar bisa masuk ke halaman member kayak aplikasi beneran!

Kalau kamu suka ngoding dan pengen nyobain bikin aplikasi sendiri, yuk lanjut baca sampai habis. Siap-siap jadi koder keren berikutnya! 

Siap, koder! 🎉 Yuk kita bedah bareng kode Python di atas dengan gaya santai biar makin paham.

---

🧠 Apa sih kode ini?

Kode ini adalah kerangka utama dari aplikasi Android yang kita bangun pakai Python + KivyMD. Di sini udah disiapin struktur buat halaman login, pendaftaran, dan halaman beranda. Pokoknya dasar dari aplikasi yang punya banyak halaman.

---

🔍 Penjelasan Baris per Baris

from kivymd.app import MDApp
from kivymd.uix.screenmanager import ScreenManager
from kivy.core.text import LabelBase
from kivy.core.window import Window

📦 Ini bagian import, alias ngambil fitur-fitur penting dari Kivy dan KivyMD.
Contohnya:

• MDApp itu kayak otaknya aplikasi.

• ScreenManager buat gonta-ganti halaman.

• LabelBase buat daftarin font custom.

• Window kita pakai buat atur ukuran tampilan.

Window.size = (500, 650)

🖥️ Di baris ini, kita atur ukuran jendela aplikasi saat dijalankan di komputer (buat preview). Ukurannya 500x650 piksel. Bisa kamu ubah kalau pengen tampilannya lebih kecil/besar.

from screens.screens import *

📁 Ini berarti kita punya file screens.py di folder screens/ yang isinya semua tampilan kayak halaman login, daftar, dll. Kode ini ngimpor semuanya biar bisa dipakai di sini.

---

🧱 Class: WindowManager

class WindowManager(ScreenManager):
	pass

Ini adalah custom ScreenManager alias manajer halaman. Dia yang bakal ngatur kita lagi di halaman mana: login kah? daftar kah? atau udah masuk beranda?

---

🚀 Class: LapakNgoding (Aplikasi Utama)

class LapakNgoding(MDApp):

Nah, ini dia inti dari aplikasi kita! Nama LapakNgoding bisa kamu ganti, tapi di sini kita pakai branding biar keren 😎.

	def build(self):
		self.logged_user = None

• build() itu method wajib di Kivy, buat nyiapin semua sebelum aplikasi dijalankan.

• logged_user = None artinya belum ada user yang login, nanti kita isi kalau login sukses.

		self.wm = WindowManager()
		screens =[
			Hallog(name="hallog"),
			Daftar(name="daftar"),
			Hallogadmin(name="hallogadmin"),
			Beranda(name='beranda'),
		]

• Kita bikin self.wm sebagai screen manager-nya.

• Lalu kita siapkan semua halaman/tampilan (screen) yang bakal dimasukin.
  ➤ Hallog, Daftar, dll itu class tampilan dari file screens.py.

		for screen in screens:
			self.wm.add_widget(screen)
		return self.wm

• Kita tambahin semua screen ke manager, lalu return self.wm supaya ditampilkan saat aplikasi dijalankan.

---

🔁 Logout Function

	def logout(self):
		self.wm.current = "hallog"

Kalau user klik logout, kita langsung arahkan balik ke halaman login (hallog). Simpel tapi penting banget.

---

🏁 Jalankan Aplikasinya

if __name__ == '__main__':
	LabelBase.register(name="Atma", fn_regular="kv/assets/fonts/Atma-Bold.ttf")
	LabelBase.register(name="Tagline", fn_regular="kv/assets/fonts/Ubuntu-LI.ttf")
	LabelBase.register(name="Line", fn_regular="kv/assets/fonts/Ubuntu-M.ttf")
	LapakNgoding().run()

• Ini bagian penutup yang wajib.

• Kita daftarin font biar tampilannya makin kece 😎

• Terakhir, LapakNgoding().run() buat ngejalanin aplikasinya.

---

Sekarang kita lanjut bedah kode halaman login (Hallog) biar kamu ngerti alurnya dengan gaya santai khas anak ngoding. Let's gooo! 🚀

---

🎯 Tujuan kode ini?

Kode ini adalah class Hallog, alias halaman login utama aplikasi kamu. Di sinilah user pertama kali masukin username dan password sebelum bisa lanjut ke halaman member.

---

📦 Import-an Penting

from kivymd.uix.screen import MDScreen
from kivy.lang import Builder
from kivymd.uix.dialog import MDDialog
from kivymd.app import MDApp
import sqlite3
import bcrypt
import os

• MDScreen: Tampilan halaman login-nya.

• Builder: Buat ngambil file .kv (tampilan visual-nya).

• MDDialog: Popup/alert buat kasih pesan ke user (misal: salah password).

• sqlite3: Buat konek ke database lokal SQLite.

• bcrypt: Buat ngecek password terenkripsi.

• os: Buat path database biar fleksibel.

---

📂 Path Database Dinamis

BASE_DIR = os.path.dirname(os.path.abspath(__file__))
DB_PATH = os.path.join(BASE_DIR, '..', 'LapakNgoding.db')

Ini biar path ke file database (LapakNgoding.db) nggak ngaco walau kamu pindahin file project. Jadi path-nya selalu fleksibel dan benar.

---

🧱 Class Hallog

class Hallog(MDScreen):
    def __init__(self, **kwargs):
        Builder.load_file("kv/hallog.kv")
        super().__init__(**kwargs)

Ini adalah class untuk tampilan halaman login.

• Builder.load_file(...): Ngambil tampilan dari file .kv (desain UI).

• super().__init__: Ngejalanin bawaan MDScreen.

---

🔐 Fungsi loginAcc()

Ini fungsi yang jalan pas user klik tombol Login. Kita breakdown isi dalamnya:

1. Ambil data input user

username = self.ids.username.text.strip()
password = self.ids.password.text.strip()

Ambil isi dari inputan form yang ada di file .kv. Disaring biar gak ada spasi gak penting.

2. Cek kosong gak?

if not username or not password:
    ...

Kalau kosong, langsung keluarin popup dialog:

"Username dan Password tidak boleh kosong!"

---

🔗 Akses Database

conn = sqlite3.connect(DB_PATH)
c = conn.cursor()
c.execute("SELECT username, password FROM member")
db = c.fetchall()
conn.close()

Kita konek ke SQLite, ambil semua username dan password dari tabel member, terus kita simpan datanya dalam bentuk list.

---

🔄 Bikin Dictionary dari Data

userdata = {uname: pwd for uname, pwd in db}

Kita ubah list tadi jadi dictionary kayak gini:

{ "zaky": b"$2b$12$..." }

Jadi gampang dicari berdasarkan username.

---

🔐 Validasi Password

if bcrypt.checkpw(password.encode(), hashed_pw):

Ini bagian paling penting:

• Password user di-hash pake bcrypt, jadi gak bisa dibandingin langsung.

• Kita cocokin password dari input dengan hash yang ada di database.

Kalau cocok:

MDApp.get_running_app().logged_user = username
self.manager.current = 'beranda'

➡️ Simpan user yang login, terus arahkan ke halaman beranda!

Kalau gak cocok? Muncul dialog:

❌ Password salah! Coba lagi.

Kalau username gak ada? Muncul dialog:

❌ Username tidak ditemukan.

---

🔥 Tangkap Error

except Exception as e:
    ...

Kalau ada error (misal file DB gak ada, format error, dll), munculin dialog error umum:

"Terjadi kesalahan saat login. Periksa koneksi atau database."

---

Sekarang kita bahas bagian halaman beranda (Beranda) yang jadi tujuan akhir kalau user berhasil login. Yuk kita kulik kode kamu bareng-bareng, tetep dengan gaya santai dan ringan buat dipahami 😎.

---

📌 Apa sih Beranda ini?

Beranda adalah halaman utama/member area yang dituju setelah login berhasil. Di sini, kita bisa kasih sambutan ke user yang login, tampilkan data user, atau bahkan fitur tambahan lainnya.

---

🔍 Penjelasan Kodenya

from kivy.app import App
from kivy.uix.label import Label
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.screen import MDScreen
from kivymd.uix.label import MDLabel
import sqlite3
import bcrypt

from screens.screens import *

📦 Ini bagian import seperti biasa:

• Builder: buat ambil tampilan dari file .kv

• MDApp, MDScreen, MDLabel: komponen dari KivyMD

• sqlite3, bcrypt: bisa aja dipakai nanti untuk fitur lanjutan di beranda (misalnya ambil data user)

---

🧱 Class: Beranda

class Beranda(MDScreen):
    def __init__(self, **kwargs):
        Builder.load_file("kv/beranda.kv")
        super().__init__(**kwargs)

• Kita bikin class Beranda turunan dari MDScreen → artinya ini adalah satu halaman penuh dalam aplikasi.

• Builder.load_file(...): ini ngeload desain layout beranda.kv. Jadi kalau kamu desain tombol, teks, dll di file .kv, akan ditampilkan di sini.

• super().__init__ itu buat ngasih akses fitur bawaan MDScreen.

---

✨ Fungsi on_pre_enter

def on_pre_enter(self):
    app = MDApp.get_running_app()
    username = app.logged_user or ""
    self.ids.welcome_label.text = f"Hi {username}, selamat datang kembali!"

Ini fungsi yang jalan tepat sebelum halaman Beranda ditampilkan ke layar.

Apa yang terjadi?

1. Ambil instance aplikasi: MDApp.get_running_app()

2. Ambil siapa yang lagi login (logged_user)

3. Tampilkan pesan sambutan:

   “Hi zaky, selamat datang kembali!”
   ke label yang punya id: welcome_label di file .kv

🎉 Jadi kalau kamu login sebagai rafi, maka muncul:

Hi rafi, selamat datang kembali!

---

🧩 Kesimpulan

✅ Beranda ini seperti ruang pribadi user.
User yang login bakal merasa "disambut", dan kamu bisa lanjut tambahin fitur di sini:

• Tombol logout

• Data profil

• Akses ke menu lain

---

Kalau kamu udah bikin file beranda.kv, pastikan di dalamnya ada komponen kayak gini:

MDLabel:
    id: welcome_label
    text: ""
    halign: "center"

Sekarang kita masuk ke bagian tampilan halaman login (hallog.kv) — ini yang bertanggung jawab bikin UI kamu keliatan keren dan enak dilihat.

Yuk kita bahas baris per baris dengan gaya santai biar makin paham dan bisa custom sendiri nantinya. 🛠️✨

---

🎨 Tujuan File hallog.kv

File ini berisi desain halaman login yang dihubungkan ke class Hallog dari Python kamu sebelumnya.

---

🧱 Struktur Dasar

#:kivy 2.1
<Hallog>:
    MDFloatLayout:

• #:kivy 2.1 ➜ Nandain kamu pakai Kivy versi 2.1

• <Hallog>: ➜ Ini ngedefine tampilan khusus untuk class Hallog

• MDFloatLayout ➜ Layout fleksibel yang bikin kamu bisa bebas atur posisi pakai pos_hint

---

🖼️ Logo dan Gambar

Image:
    source:"kv/assets/foto/lapakngodingtr.png"
    ...
Image:
    source:"kv/assets/foto/logoLapakngodin9.png"
    ...

• Gambar pertama mungkin semacam banner/tampilan utama.

• Gambar kedua kayaknya logonya.

• size_hint atur ukuran relatif, pos_hint atur posisi tengah atas.

---

🏷️ Label Judul & Tagline

MDLabel:
    text: "L a p a k  N g o d i n g"
    ...
MDLabel:
    text: "Belajar Ngoding dengan Browsing"
    ...

• Judul utama dan tagline aplikasi kamu.

• Font-nya udah di-custom pakai yang sebelumnya kamu register (Atma, Tagline).

• pos_hint atur ketinggian posisinya di layar.

---

🧑‍💻 Input Login

MDTextField:
    id: username
    hint_text: "Username"
    icon_left: "account"
    ...
MDTextField:
    id: password
    hint_text: "Password"
    password: True
    icon_left: "key-variant"
    ...

• Ini bagian penting: tempat user masukin username & password.

• Ada icon di kiri biar estetik, dan password: True buat nyembunyiin input (tanda bintang gitu).

---

🟢 Tombol "Login" & "Daftar"

MDRaisedButton:
    text:"L o g i n"
    on_press : root.loginAcc()
MDRaisedButton:
    text:"D a f t a r"
    on_release :
        root.manager.current = "daftar"

• Tombol "Login" akan jalanin fungsi loginAcc() dari Python (yang udah kamu bikin).

• Tombol "Daftar" langsung pindah ke halaman pendaftaran.

---

🔐 Tombol "Login Admin"

MDRaisedButton:
    text:"Login Administrator"
    md_bg_color: ("#a42343")
    on_release :
        root.manager.current = "hallogadmin"

• Buat admin masuk lewat halaman khusus (hallogadmin).

• Warna merah biar beda dan menonjol.

---

🔗 Tombol Login Sosial Media

MDRaisedButton:
    text:"Login dengan Google"
    md_bg_color: ("#23f2eb")

MDRaisedButton:
    text:"Login dengan Facebook"
    md_bg_color: ("#38b6ff")

• Ini keren banget buat masa depan! Tapi perlu integrasi khusus.

• Sekarang sih tampilannya aja dulu — fungsinya bisa kamu tambahin nanti.

---

🔁 Label "Lupa Password"

MDLabel:
    text: "Lupa Password?"
    ...

• Cuma label doang, belum ada action.

• Tapi kamu bisa ubah jadi tombol atau kasih on_touch_down: biar nanti bisa redirect ke reset password.

---

Ini adalah bagian terakhir dari rangkaian project aplikasi Android pakai Python & Kivy — yaitu tampilan untuk halaman beranda dan admin.

Yuk kita kupas dulu, lalu kita bungkus semua jadi kesimpulan dan penutup yang kece!

---

🧾 Penjelasan Kode Beranda & Hallogadmin (KV file)

<Beranda, Hallogadmin>:

🧠 Artinya: Desain layout ini akan digunakan oleh dua halaman sekaligus, yaitu Beranda (user biasa) dan Hallogadmin (admin).

🎨 Tampilan Visual

MDFloatLayout:
    md_bg_color: ("#d3ede6")

• Warna latar soft hijau muda, bikin adem.

• Semua elemen ditata dengan MDFloatLayout.

---

🖼️ Logo dan Branding

Image: source: lapakngodingtr.png & logoLapakngodin9.png
MDLabel: text: "Lapak Ngoding"

• Dua gambar: satu logo utama, satu ilustrasi branding.

• Label besar buat nama aplikasi.

• Subjudul: "Belajar Ngoding dengan Browsing" → tagline-nya kamu banget.

---

🧑‍💻 Sambutan Pengguna

MDLabel:
    id: welcome_label
    text: ''

• Label ini akan diisi dinamis dari Python (on_pre_enter) untuk menyapa user:

  Hi zaky, selamat datang kembali!

---

📦 Toolbar (App Bar)

MDTopAppBar:
    left_action_items: [["home", lambda x: app.callback(x)]]
    right_action_items: [["logout", lambda x: app.logout()]]

• Ada tombol home dan logout di kanan.

• Desainnya clean dan profesional.

• logout() akan balikin user ke halaman login.

---

✅ Kesimpulan

Dari keseluruhan project yang udah kita bikin, bisa disimpulkan begini:

🧩 1. main.py — Struktur Inti Aplikasi

• Menyusun semua halaman (screen) aplikasi.

• Ngehandle navigasi dan status login user.

🔐 2. Hallog.py — Login User

• Halaman untuk login.

• Validasi data dari database pakai bcrypt.

• Ada popup dialog kalau gagal.

🏠 3. Beranda.py — Halaman Member

• Tampil setelah login berhasil.

• Ada sambutan personal pakai username.

• Siap dikembangkan ke fitur-fitur lainnya.

🎨 4. *.kv Files — Desain UI

• Tersusun rapi dan responsif.

• Sudah pakai font custom, ikon, layout yang ramah pengguna.

• Ada fitur login admin, login sosial, dan navigasi intuitif.

---

Itu dia, koder-koder kece, satu paket komplit bikin aplikasi Android sederhana dengan Python & Kivy! 🎉

Kita baru aja ngelewatin step penting mulai dari login user, autentikasi, hingga masuk ke halaman member yang stylish dan siap dikembangkan.

🛠️ Penasaran buat lanjutan fiturnya? Kamu bisa tambahin:

• Sistem pendaftaran (Daftar)

• Reset password

• Penyimpanan data user (profil, catatan, dll)

• Fitur admin dashboard

Jangan ragu buat eksplor dan eksperimen. Karena...

Lapak Ngoding bukan cuma tempat belajar, tapi tempat berkembang bareng!

Sampai jumpa di project selanjutnya, dan terus semangat ngoding! 💪🔥

Jakarta, waktu malam minggu gabut.