BELAJAR PYTHON - KIVY : MEMBUAT APLIKASI POS KAFE / WARUNG / RUMAH MAKAN

SESI 01 : MEMBUAT FORM MENU

Kita akan membuat aplikasi poin of sales (POS) untuk kafe, warung, rumah makan, restoran. Dimana kita rancang dengan menggunakan bahasa pemrograman PYTHON dan framework KIVY dengan editor penulisan pakai Visual Studio Code (VSCode)  atau dengan yang lainnya juga boleh, agar hasilnya bisa berjalan di multiflatform yaitu desktop, mobile baik android maupun ios, dengan tehnik cepat saja simple agar mudah dipahami..

Disesi yang pertama ini kita berharap hasilnya akan seperti dalam tampilab dibawah ini:

Kita buat folder kerja untuk palikasi ini misalnya kita kasih nama MyResto lalu didalamnya kita juga buat folder untuk menampung material gambar2 yang kita butuhkan dengan nama folder image adapun material yang kita butuhkan adalah ini: 

1. nama file:  menu-pos.png    

2. nama file:  menu-brg.png 

3. nama file:  menu-stok.png 

4. nama file:  menu-report.png 

Selanjutknya kita buat file program sebagai pengontrol seluruh aplikasi ini dengan menggunakan file python, kita kasih nama main.py,  di baris paling atas kita panggil modul2 kivy yang di butuhkan :

from kivy.lang import Builder	à	Agar kita bisa memanggil/include file berjenis kivy (.kv)
from kivy.core.window import Window	à	Untuk mengatur ukuran windows saat ditampilkan dalam percobaan
from kivy.uix.screenmanager import Screen	à	Untuk mengatur pengontrol halaman-halaman/layar
from kivymd.app import MDApp	à	Karena kita bangung aplikasi denga kivyMD
Window.size = (400,600)	à	Set ukuran tampilan agar dipercobaan tampak seperti ukuran HP,  tapi nanti klo dibuil jadi apk/aab perintah ini di buang saja.
Builder.load_file('menuutama.kv')	à	Untuk memanggil file kivy (menuutama.kv) agar bisa dieksekusi oleh python, yang akan mengatur tampilan form kita

dibaris berikutnya kita buat class ( dalam python class secara gampangnya adalan  objec python atau wadah python yang digunakan untuk mengontrol setiap halaman/layar/page, yang di dalamnya nantinya ada lagi properties/method (def ) yang di gunakan untuk mengontrol setiap object/item2 yang ada modul halaman atau layar ):

class MenuUtama(Screen):                 pass	à	Untuk mengontrol object/modul/halaman/page MenuUtama Pass : artinya di file python ini blm ada perintah apapun karena perintah atau item2nya ada di file modul (menuutama.kv) yang kita panggil diatas
class MyResto(MDApp):                     def build(self):                                 return MenuUtama()	à	Untuk mengontrol object/modul/halaman/page utama atau root/akar dari program aplikasi ini.   Object item pengontrol yang isinya adalah unjalankan class MenuUtama
MyResto().run()	à	Mulai menjalankan aplikasinya

secara lengkapnya script/program file main.py :

from kivy.lang import Builder

from kivy.core.window import Window

from kivy.uix.screenmanager import Screen

from kivymd.app import MDApp

Window.size = (400,600)

Builder.load_file('menuutama.kv')

class MenuUtama(Screen):

    pass

class MyResto(MDApp):

    def build(self):

        return MenuUtama()

   

MyResto().run()

Selanjutnya kita membuat file kivy sebagai pengontrol halaman menu utama ini kita kasih nama file sesuaiyng kita panggil di file pythin diatas yaitu : menuutama.kv :

<MenuUtama>:  

    MDBoxLayout:                                        

        size_hint: 1,.1                                

        pos_hint: {'x':0,'y':.9}

        md_bg_color: rgba(0, 250, 0, 150)

        MDLabel:

            text: 'My Resto'

            halign: "center"

            color: rgba(0, 0, 255, 255)

            font_size: '30dp'

    MDBoxLayout:

        size_hint: .4,.3

        pos_hint: {'x':.1,'y':.5}

        md_bg_color:rgba(0, 255, 255, 150)

        radius: [10,10,10,10]

        line_color: rgba(0, 0, 0, 255)

        orientation: 'vertical'

        padding: '10dp'

        FitImage:

            source: 'image/menu-pos.png'

           

        MDRectangleFlatIconButton:

            #icon cari di google:https://pictogrammers.com/library/mdi/

            icon: "cart-variant"

            text:'Poin Of Sales'

            text_color: rgba(0, 0, 0, 255)

            user_font_size: '20dp'

            md_bg_color:rgba(255, 255, 0, 255)

            size_hint_x: 1

            pos_hint: {"center_x": .5}

    MDBoxLayout:

        size_hint: .4,.3

        pos_hint: {'x':.5,'y':.5}

        md_bg_color:rgba(0, 255, 255, 150)

        radius: [10,10,10,10]

        line_color: rgba(0, 0, 0, 255)

        orientation: 'vertical'

        padding: '10dp'

        FitImage:

            source: 'image/menu-brg.png'

        MDRectangleFlatIconButton:

            icon: "food-turkey"

            text:'Master Barang'

            text_color: rgba(0, 0, 0, 255)

            user_font_size: '20dp'

            md_bg_color:rgba(255, 255, 0, 255)

            size_hint_x: 1

            pos_hint: {"center_x": .5}

    MDBoxLayout:

        size_hint: .4,.3

        pos_hint: {'x':.1,'y':.2}

        md_bg_color:rgba(0, 255, 255, 150)

        radius: [10,10,10,10]

        line_color: rgba(0, 0, 0, 255)

        orientation: 'vertical'

        padding: '10dp'

        FitImage:

            source: 'image/menu-stok.png'

        MDRectangleFlatIconButton:

            icon: "list-status"

            text:'Status Barang'

            text_color: rgba(0, 0, 0, 255)

            user_font_size: '20dp'

            md_bg_color:rgba(255, 255, 0, 255)

            size_hint_x: 1

            pos_hint: {"center_x": .5}

    MDBoxLayout:

        size_hint: .4,.3

        pos_hint: {'x':.5,'y':.2}

        md_bg_color:rgba(0, 255, 255, 150)

        radius: [10,10,10,10]

        line_color: rgba(0, 0, 0, 255)

        orientation: 'vertical'

        padding: '10dp'

        FitImage:

            source: 'image/menu-report.png'

        MDRectangleFlatIconButton:

            icon: "finance"

            text:'Laporan'

            text_color: rgba(0, 0, 0, 255)

            user_font_size: '20dp'

            md_bg_color:rgba(255, 255, 0, 255)

            size_hint_x: 1

            pos_hint: {"center_x": .5}

    MDBoxLayout:

        size_hint: 1,.1

        pos_hint: {'x':0,'y':0}

        md_bg_color: rgba(0, 0, 255, 255)

keterangan / penjelasan singkat dari perintah diatas adalah :

BoxLayout Properties pengaturnya : ·         size_hint:0 .4, 0.3       ·         pos_hint: {'x':.1,'y':.5}     ·         md_bg_color: rgba(0, 255, 255, 150)         ·         radius: [10,10,10,10]     ·         line_color: rgba(0, 0, 0, 255) ·         orientation: 'vertical'     ·         padding: '10dp'     ·         FitImage: source: 'image/menu-pos.png'     ·         MDRectangleFlatIconButton: icon: "cart-variant" text:'Poin Of Sales' text_color: rgba(0, 0, 0, 255) user_font_size: '20dp' md_bg_color:rgba(255, 255, 0, 255) size_hint_x: 1 pos_hint: {"center_x": .5}

à   à       à     à         à       à       à     à       à

Untuk membuat objek kotak di layar   Untuk menentukan ukuran kotanya (sumbu x/ lebar : 40% dan sumbu y/tinggi: 30%) catatan ukuran layar di python adalah 1=100%   Untuk menentukan posisi/letak di layar dihitung mulai dari bawah (0=baris bawah  dan 1=baris apling atas)   Untuk memberikan warna dasar kotak dengan ukuran RGB, ntuk mengetahui kode2 warna search di google : color picker : nah pilih warna maka nanti ada kode yg RGB, CMYK, HEX dll, pilih aja kode yang rgb   Untuk meberikan efek agar pojok kotak di lengkungkan 10% (ataskiri, ataskanan, bawahkanan, bawahkiri)   Untuk meberikan warga garis tepinya kotaknya Untuk mengatur agar di dalam kota object/item2 di tata secara vertikan ( dari atas kebawah)   Untuk mengatur jarak antar pinggir garis kota dengan obeject/item berjarak 10 dotpixel   Untuk meletakkan gambar Alamat file gambar berada     meletakkan object/item tombol (button) jenis icon yg dimunculkan teks yang tertera di tombol tersebut warna teksnya ukuran huruf textnya warna dasar buttonnya ukuran buttonnya letak buttonya

Setelah semua file sudah kita simpan, kita bisa mencoba menjalankan programnya ( file python : main.py ).

Demikian sesi pertama yang kita buat dengan harapan agar mudah dipahami, karena kita masih sama2 masih belajar kalau ada kesalahan saya mohon maaf dan semoga bermanfaat. 

Daftar Part/Sesi  Selengkapnya :

[ Home ]