Membuat Aplikasi Android dengan Python dan Kivy | Upload dan Ubah Foto di Halaman Profil

 Hai Sobat Ngoding

gimana kabarnya? kalau kamu menemukan blog ini berarti tujuan kita sama yaitu Belajar Ngoding dengan Browsing.

saya mo lanjutin yang kemarin ya sob yang baru mampir silahkan cek Membuat Aplikasi Android dengan Python dan Kivy | Halaman Profil Member untuk Update Data dan Membuat Aplikasi Android dengan Python dan Kivy | Tutorial Ganti Password.

 Sekarang kita bahas lanjutannya yaitu

Membuat Aplikasi Android dengan Python dan Kivy | Upload dan Ubah Foto di Halaman Profil

dicatatan kali ini saya ga nambah file, cuma menambah fungsi di profil.py, daftar.py, profil.kv serta menambahkan kolom foto di tabel database SQLite.

di file profil.py saya menambahkan fungsi untuk menampilkan foto profil, fungsi ubah dan upload foto ke folder yang sudah ditentukan, lalu merubah nama foto berdasarkan username. Berikut susuna kodenya

profil.py

from kivy.app import App
from kivy.uix.label import Label
from kivy.lang import Builder
from kivymd.uix.dialog import MDDialog
from kivymd.app import MDApp
from kivymd.uix.screen import MDScreen
from kivymd.uix.label import MDLabel
from kivymd.uix.filemanager import MDFileManager
import shutil
import sqlite3
import bcrypt
import os

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

from screens.screens import *

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

    def on_pre_enter(self):
        app = MDApp.get_running_app()
        username = app.logged_user or ""
        self.ids.welcome_label.text = f"Hi {username}, mohon diperhatikan untuk perubahan data!"

        try:
            conn = sqlite3.connect(DB_PATH)
            c = conn.cursor()
            c.execute("SELECT nama, email, nohp, alamat, foto FROM member WHERE username = ?", (username,))#baru ditambahkan fotoo
            result = c.fetchone()
            conn.close()
            
            print("Data dari DB:", result)

            if result:
                self.ids.nama.text = str(result[0])
                self.ids.email.text = str(result[1])
                self.ids.nohp.text = str(result[2])
                self.ids.alamat.text = str(result[3])
                foto = result[4] if result[4] else "default.png" #baru ditambahkan jika member belum ada foto profil maka menggunakan foto default.png
                self.ids.foto_profil.source = f"assets/user_photos/{foto}" #baru ditambahkan url foto profil
        except Exception as e:
            print("Error:", e)

    def update_profil(self):
        nama = self.ids.nama.text.strip()
        email = self.ids.email.text.strip()
        nohp = self.ids.nohp.text.strip()
        alamat = self.ids.alamat.text.strip()
        username = MDApp.get_running_app().logged_user

        try:
            conn = sqlite3.connect(DB_PATH)
            c = conn.cursor()
            c.execute("""UPDATE member SET nama=?, email=?, nohp=?, alamat=? WHERE username=?""",
                      (nama, email, nohp, alamat, username))
            conn.commit()
            conn.close()

            self.dialog = MDDialog(text="Data berhasil diperbarui!", radius=[20, 7, 20, 7])
            self.dialog.open()
        except Exception as e:
            print("Error update:", e)
            self.dialog = MDDialog(
                text="Gagal memperbarui data!",
                radius=[20, 7, 20, 7]
            )
            self.dialog.open()
            
    def gantipassword(self):
        self.manager.current = 'gantipassword'
     
    #baru ditambahkan sd bawah
    def pilihfoto(self):
        self.file_manager = MDFileManager(
            select_path=self.simpan_foto,
            exit_manager=self.tutup_file_manager,
            preview=True
        )
        self.file_manager.show('/home')  # Ganti path awal sesuai OS kamu

    def tutup_file_manager(self, *args):
        self.file_manager.close()

    def simpan_foto(self, path):
        try:
            app = MDApp.get_running_app()
            username = app.logged_user
            if not username:
                return

            folder = os.path.join(BASE_DIR, '..', 'assets', 'user_photos')
            os.makedirs(folder, exist_ok=True)
            file_target = os.path.join(folder, f"{username}.png")
            shutil.copy(path, file_target)

            # Simpan ke database
            conn = sqlite3.connect(DB_PATH)
            c = conn.cursor()
            c.execute("UPDATE member SET foto=? WHERE username=?", (f"{username}.png", username))
            conn.commit()
            conn.close()
            
            from kivy.clock import Clock
            
            foto_path = os.path.abspath(f"assets/user_photos/{username}.png")
            
            def update_image(dt):
                self.ids.foto_profil.source = foto_path
                self.ids.foto_profil.reload()
                 
            Clock.schedule_once(update_image, 0.1)

            self.ids.foto_profil.source = f"/assets/user_photos/{username}.png"
            self.tutup_file_manager()
        except Exception as e:
            print("Gagal upload foto:", e)

lanjut ke daftar.py. di sini saya menambahkan di kode SQLite untuk CREATE TABLE foto dan INSERT. Berikut susunan kodenya

daftar.py

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

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

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

    def submit(self):
        username = self.ids.username.text
        nama = self.ids.nama.text
        email = self.ids.email.text
        nohp = self.ids.nohp.text
        alamat = self.ids.alamat.text
        password = self.ids.password.text
        passconf = self.ids.passconf.text

        # Koneksi ke database
        conn = sqlite3.connect(DB_PATH)
        c = conn.cursor()

        # Pastikan tabel 'member' sudah ada
        c.execute('''
            CREATE TABLE IF NOT EXISTS member (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                nama TEXT,
                email TEXT,
                nohp TEXT,
                alamat TEXT,
                password TEXT,
                username TEXT UNIQUE,
                foto TEXT #baru ditambahkan kolom foto
            )
        ''')

        c.execute("SELECT username FROM member")
        db = c.fetchall()
        daftar_user = [user[0] for user in db]

        if len(password) <= 7:
            self.dialog = MDDialog(
                text="Password terlalu pendek, minimal 8 karakter",
                radius=[20, 7, 20, 7],
            )
            self.dialog.open()
            return

        if username is None or len(username) < 3:
            self.dialog = MDDialog(
                text="Username minimal 3 karakter!",
                radius=[20, 7, 20, 7],
            )
            self.dialog.open()
            return

        if username in daftar_user:
            self.dialog = MDDialog(
                text="Username sudah terdaftar!",
                radius=[20, 7, 20, 7],
            )
            self.dialog.open()
            return

        if password != passconf:
            self.dialog = MDDialog(
                text="Password dan Konfirmasi tidak sama!",
                radius=[20, 7, 20, 7],
            )
            self.dialog.open()
            return

        # Enkripsi password dan simpan ke database
        hashed_password = bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt())
        c.execute('''
            INSERT INTO member (nama, email, nohp, alamat, password, username, foto) #baru ditambahkan foto
            VALUES (?, ?, ?, ?, ?, ?, ?)
        ''', (nama, email, nohp, alamat, hashed_password, username, "default.png"))

        conn.commit()
        conn.close()

        self.dialog = MDDialog(
            title="S E L A M A T",
            text="Kamu telah terdaftar, silakan login.",
            radius=[20, 7, 20, 7],
        )
        self.dialog.open()

dari daftar.py sekarang kita ke file profil.kv untuk menampilkan foto profil member. Berikut susunan kodenya

profil.kv

#:kivy 2.1

<Profil>:

    MDFloatLayout:
        md_bg_color: ("#d3ede6")

        Image:
            source: "kv/assets/foto/lapakngodingtr.png"
            size_hint: 0.5, 0.5
            pos_hint: {"center_x": 0.70, "center_y": 0.87}

        Image:
            source: "kv/assets/foto/logoLapakngodin9.png"
            size_hint: 0.2, 0.2
            pos_hint: {"center_x": 0.13, "center_y": 0.90}

        MDLabel:
            text: "L a p a k  N g o d i n g"
            halign: "center"
            font_size: "30sp"
            font_name: "Atma"
            pos_hint: {"center_x": 0.60, "center_y": 0.95}

        MDLabel:
            text: "Belajar Ngoding dengan Browsing"
            halign: "center"
            font_size: "16sp"
            font_name: "Tagline"
            pos_hint: {"center_x": 0.60, "center_y": 0.90}
            color: ("#808080")

        MDLabel:
            id: welcome_label
            text: ''
            halign: "center"
            font_size: "18sp"
            font_name: "Tagline"
            pos_hint: {"center_x": 0.50, "center_y": 0.80}
            color: ("#808080")

        MDLabel:
            text: "Profil Saya"
            font_style: "H5"
            halign: "center"
            pos_hint: {"center_x": 0.6, "center_y": 0.75}
        
        #baru ditambahkan
        Image:
            id: foto_profil
            source: "kv/assets/user_photos/default.png"
            size_hint: 0.2, 0.2
            allow_stretch: True
            keep_ratio: True
            pos_hint: {"center_x": 0.13, "center_y": 0.68}
        
        #baru ditambahkan
        MDRaisedButton:
            text: "Ubah Foto"
            pos_hint: {"center_x": 0.13, "center_y": 0.60}
            on_release: root.pilihfoto()

        MDTextField:
            id: nama
            hint_text: "Nama Lengkap"
            mode: "rectangle"
            icon_left: "account"
            size_hint: 0.70, 0.09
            pos_hint: {"center_x": 0.6, "center_y": 0.69}

        MDTextField:
            id: email
            hint_text: "Email aktif"
            mode: "rectangle"
            icon_left: "email-check-outline"
            size_hint: 0.70, 0.09
            pos_hint: {"center_x": 0.6, "center_y": 0.59}

        MDTextField:
            id: nohp
            hint_text: "No HP"
            mode: "rectangle"
            icon_left: "cellphone-basic"
            size_hint: 0.70, 0.09
            pos_hint: {"center_x": 0.6, "center_y": 0.49}

        MDTextField:
            id: alamat
            hint_text: "Alamat"
            mode: "rectangle"
            icon_left: "city-variant"
            size_hint: 0.70, 0.09
            pos_hint: {"center_x": 0.6, "center_y": 0.39}

        MDRaisedButton:
            text: "Simpan"
            font_size: "16sp"
            font_name: "Atma"
            size_hint: 0.30, 0.07
            pos_hint: {"center_x": 0.40, "center_y": 0.29}
            md_bg_color: ("#23a484")
            on_release: root.update_profil()
            
        MDRaisedButton:
            text: "Ganti Password"
            font_size: "16sp"
            font_name: "Atma"
            size_hint: 0.30, 0.07
            pos_hint: {"center_x": 0.75, "center_y": 0.29}
            md_bg_color: ("#23a484")
            on_release: root.gantipassword()

        MDTopAppBar:
            md_bg_color: ("#23a484")
            use_overflow: True
            left_action_items:
                [["home", lambda x: app.callback(x), "Home", "Home"]]
            right_action_items:
                [["logout", lambda x: app.logout(), "Logout", "Logout"]]

terakhir dan harus, wajib, kudu dilakukan yaitu membuat kolom foto di database lapakngoding.db di tabel member. Karena jika tidak ditambahkan pasti error.

oke, sudah selesai. jalankan aplikasi dari main.py dan booom lihat hasilnya

terdapat foto profil di bagian kiri di bawa header sejajar dengan data lengkap member.

ingat jangan menilai orang dari tampilan luarnya. karena bungkus GUDANG GARAM isinya ROKOK bukan GARAM. fajar sad Boy

Jakarta, setelah hujan-hujanan naik motor Cileungsi - Jakarta