Rangkum Materi Video - Tugas XI (PX,XII,XIII)

 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 dengan link dibawah

LINK

 

“User Input With Text Field” 

“Inputan pengguna dengan Bidang text”

Pada kali ini, akan membahas mengenai bagaimana cara mengambil inputan dari user dengan bidang text input. Ada 2 cara yang bisa digunakan dalam membuat elemen input ini, pertama dengan menggunakan kode yang telah selesai dibuat label dan tombol atau buttons dan yang kedua adalah dengan menggunakan metode builder yang dimana kita menambahkan bebrapa baris elemen strings dan KIVI akan otomatis mengenali string yang ada dan membuat elemen baru.

            Pada kali ini kita akan membuat tampilan kolom input bagi pengguna dimana didalamnya terdapat elemen kolom input dan icon seperti gambar dibawah ini.

Cara pertama yang akan kita gunakan adalah dengan metode yang sudah ada yaitu menggunakan kode sederhana yang sudah ada, tetapi metode ini tidak memiliki banyak fungsi. Berikut caranya:

        1.      Import file kivimd yang dibutuhkan seperti dibawah ini.

from kivymd.app import MDApp
from kivymd.uix.screen import Screen
import helpers
from kivy.lang import Builder

        2.      Setelah itu dilanjutkan dengan membuat kelas dan pendefinisian dari kelas yang kita buat.

class DemoApp(MDApp):



    def build(self):

        screen= Screen()

        username=MDTextField(text='Enter username'

                             pos_hint={'center_x':0.5,'center_y': 0.5

                                       size_hint_x=None})

        3.      Dilanjutkan dengan memberikan fungsi untuk menampilkan kelas yang sudah dibuat pada layar

screen.add_widget(username)

return screen

        4.      Setelah itu beri perintah untuk menjalankan program yang sudah dibuat

DemoApp().run()

        5.      Maka tampilan yang di hasilkan akan seperti berikut ini:

 

        6.      Maka kodingannya akna menjadi seperti ini:

from kivymd.app import MDApp
from kivymd.uix.screen import Screen
from kivymd.uix.textfield import MDTextField

class DemoApp(MDApp):
    def build(self):
        screen = Screen()
        username = MDTextField(text='Enter username',pos_hint={'center_x': 0.5, 'center_y': 0.5}, size_hint_x=None, width=300)

        screen.add_widget(username)
        return screen


DemoApp().run()

        

        Sekarang kita akan mencoba metode yang kedua dengan menggunakan Builder. Dengan metode ini, kita dapat memberikan fungsi yang beragam pada kodingan Python kita. Berikut caranya:

1.      Kita akan membuat sebuah fungsi import, dimana kita harus mengimport file builder dari folder kivy dengan cara:

from kivymd.app import MDApp

from kivymd.uix.screen import Screen

from kivy.lang import Builder

2.      Kemudian dilanjutkan dengan membuat elemen string yang akan dipanggil oleh kelas yang kita buat dengan cara menambahkan username_helpers=” ” “ dan diikuti dengan perintah yang akan digunakan dalam tampilan. Seperti ukuran tulisan hint, logo yang akan digunakan, ukuran huruf dan lain sebagainya.

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

"""

3.      Setelah itu, buat nama class serta definisi dari class yang kita buat , sehingga tujuan class yang dibuat akan lebih jelas:

class DemoApp(MDApp):

    def build(self):

        self.theme_cls.primary_palette="Green"

        screen = Screen()



        username = Builder.load_string(helpers.username_input)

4.      Beri perintah untuk menampilkan fungsi tampilan dengan cara:

screen.add_widget(username)

return

5.      Setelah itu beri perintah untuk menjalankan program yang sudah dibuat:

DemoApp().run()

 

6.      Maka tampilan yang dihasilkan ketika kodingan yang sudah kita buat di jalankan atau run seperti gambar berikut:

7.      Maka kodingannya akan menjadi seperti ini:

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()