Rangkum Materi Video- Tugas XII (PXIII, PXIV)
04.31
By
Go.blog
Nama : Putra Aji Mulia
NIM : 18.01.013.099
Mata Kuliah : Pemrograman Mobile
Dosen : Herfandi, A.Md.,S.Kom.,M.Kom
Tugas : Merangkum materi yang disampaikan
pada video:
“Biding Input and Button”
“Mengkaitkan Input dan Tombol”
Pada kali ini kita akan membuat sebuah cara untuk mengikat atau mengkaitkan antara input dari pengguna dan button atau tombol dimana nantinya hasil input yang dimasukkan akan muncul pada kolom konsol atau command ketika button di klik. Kodingan yang digunakan pada praktek ini yaitu kodingan yang telah dibuat sebelumnya (kodingan user input with text field) yang dimana kodingan tersebut menggunakan metode builder. Berikut penjelasannya.
1. Pada materi sebelumnya, kita telah mmebuat kodingan dan hasil kodingan seperti ini:
- Kodingan
from kivymd.app import MDApp
from kivymd.uix.screen
import Screen
from kivy.lang
import Builder
username_input = """
MDTextField:
hint_text: "Enter username"
helper_text: "or click on forgot
username"
helper_text_mode:
"on_focus"
icon_right: "android"
icon_right_color: app.theme_cls.primary_color
pos_hint:{'center_x': 0.5,
'center_y': 0.5}
size_hint_x:None
width:300
"""
class DemoApp(MDApp):
def
build(self):
self.theme_cls.primary_palette="Green"
screen = Screen()
username = Builder.load_string(helpers.username_input)
screen.add_widget(username)
return
DemoApp().run()
- hasil kodingan
2.
2. dari kodingan tersebut hanya terdiri dari satu file project, yang dimana semua elemen disatuk didalamnya salah satunya elemen fungsi string (Fungsi input) yang nantinya akan dipanggil saat dijalankan. Yang dimaksud emelen fungsi string (input) adalah sebagai berikut:
username_input = """
MDTextField:
hint_text: "Enter username"
helper_text: "or click on forgot username"
helper_text_mode: "on_focus"
icon_right: "android"
icon_right_color: app.theme_cls.primary_color
pos_hint:{'center_x': 0.5, 'center_y': 0.5}
size_hint_x:None
width:300
"""
dari elemen diatas akan kita buat sebuah file python baru yang kita namai dengan “helpers” yang nantinya akan kita panggil dengan fungsi import atau from:
3. Setelah elemen fungsi string dipisahkan, kita tambahkan fungsi import untuk memanggil isi file helpers kedalam kodingan yang sedang kita buat dengan cara menambahkan “import helpers”:
from kivymd.app import MDApp
from kivymd.uix.screen import Screen
from kivy.lang import Builder
import helpers #Bagian yang ditambahkan
4. Dan selanjutnya kita import dari kivimd untu tampilan button. Karena kita akan membuat button atau tombol:
from kivymd.app import MDApp
from kivymd.uix.screen import Screen
from kivy.lang import Builder
import helpers
from kivymd.uix.button import MDRectangleFlatButton #Fungsi button
5. Setelah itu kita akan masuk pada class yang sudah ada. Dan kita akan menambahan button yang nantinya akan ditampilkan pada screen:
self.username = Builder.load_string(helpers.username_input)
button = MDRectangleFlatButton(text='Show',
pos_hint={'center_x': 0.5, 'center_y':0.4},
on_release=self.show_data) #aturanbutton
penjelasan dari kodingan yang ada diatas adalah membuat isi class yang berfungsi untuk menampung data tampilan button dimana button tersebut telah diatur isi text button, posisi dari text yang ada, dan aksi yang akan dilakukan button ketika diakses, seperti : ( text='Show', pos_hint={'center_x': 0.5, 'center_y':0.4}, on_release=self.show_data)
6. Kemudian kita tambahkan fungsi add_widget yang berfungsi menambahkan button ke screen dengan cara ketik:
screen.add_widget(self.username)
mengapa ada self. Didepan username ? karena button ini harus terkoneksi dengan input yang akan diambil dan ditampilkan kedalam kolom command atau konsol.
7. Dibawah return screen, harus ditambahkan definisi dari class yang kita namakan show_data yang diaman berisi perintah untuk menampilkan (print) hasil dari input. Jangan lupa untuk selalu memperhatikan identasi yang ada :
screen.add_widget(self.username)
screen.add_widget(button)
return screen
def show_data(self,obj):
print(self.username.text)
8. Langkah terakhir yaitu dengan memberi perintah untuk menampilkan output hasil kodingan yang telah dibuat:
DemoApp().run()
9. Tampilan dari kodingan yang telah kita buat adalah seperti ini :
10.
10. ketika kita menginput data maka hasil yang akan keluar akan seperti ni :
dimana hasil dari input yang kita ketik akan muncul dan tampil kedalam kolom command atau kolom konsol dengan cara menekan button yang ada. Dan jumlah hasil yang muncul pada konsol akan menyesuaikan dengan berapa kali kita mengklik button yang ada.
11. Maka kodingan akhir dari materi ini adalah sebagai berikut:
- Main.py
from kivymd.app import MDApp
from kivymd.uix.screen import Screen
from kivy.lang import Builder
import helpers
from kivymd.uix.button import MDRectangleFlatButton
class DemoApp(MDApp):
def build(self):
self.theme_cls.primary_palette = "Green"
screen = Screen()
self.username = Builder.load_string(helpers.username_input)
button = MDRectangleFlatButton(text='Show',
pos_hint={'center_x': 0.5, 'center_y': 0.4},
on_release=self.show_data)
screen.add_widget(self.username)
screen.add_widget(button)
return screen
def show_data(self,obj):
print(self.username.text)
DemoApp().run()
- helpers.py
username_input = """
MDTextField:
hint_text: "Enter username"
helper_text: "or click on forgot username"
helper_text_mode: "on_focus"
icon_right: "android"
icon_right_color: app.theme_cls.primary_color
pos_hint:{'center_x': 0.5, 'center_y': 0.5}
size_hint_x:None
width:300
"""
Read more
