SESI 02 : MEMBUAT FORM LIST MASTER BARANG
Assalamualaikum warahmatullohi wabarohatuh, salam sukses mari kita lanjutkan coding kita, disesi yang ke 2 (bagian ke dua) ini kita akan membuat halaman untuk menampilkan data atau list master barang, rencana tampilan seperti ini.
Langkah pertama, kita membuat dahulu rancangan tampilan untuk item barangnya., disini kita butuh modul kivi berjenis floatlayout. Floatlayout ini berbeda dengan boxlayout yang sudah kita pakai untuk membuat kotak dimenu utama.
BoxLayout digunakan untuk meletakkan objek-objek didalam layout ini atau gampangnya di dalam kotak, tapi ditata/ditampilkan secara berurutan dan penuh satu kotak, baik secara vertikal maupun horizontal.
Sedangkan FloatLayout digunakan untuk meletakkan objek-objek didalam layout ini atau box ini, peletakan objek-objeknya bebas bahkan bisa bertumpuk tumpuk.
Rancangan tampilan item barang seprti ini :
File: main.py kita butuh modul dan class baru :
# untuk memanggil modul floatlayout
from kivy.uix.screenmanager import ScreenManager,Screen
from kivy.properties import StringProperty
from kivymd.uix.floatlayout import MDFloatLayout
# dan buat class baru pengendali
class BarangItem(MDFloatLayout):
class MenuBarang(Screen):
File kivy baru yang harus kita buat
# untuk mengatur tampilan item barang
barang_item.kv
# untuk mengatur pengontrol menu master barang
barang.kv
Di file main.py pada class utama ( MyResto ) pada fungsi/method def build di ubah dengan perintah pengendali layar ( manajemen screen ) seperti ini :
class MyResto(MDApp):
def build(self):
sm = ScreenManager()
sm.add_widget(MenuUtama(name='MenuUtama'))
sm.add_widget(MenuBarang(name='MenuBarang'))
return sm
Disini tidak saya terangkan secara rinci tiap tiap script atau perintah, silahkan ikuti video nya saja yang lebih rinci dan jelas. Adapu source coding lengkapnya sebagai berikut :
File pythin: main.py
from kivy.lang import Builder
from kivy.core.window import Window
from kivy.uix.screenmanager import ScreenManager,Screen
from kivy.properties import StringProperty
from kivymd.app import MDApp
from kivymd.uix.floatlayout import MDFloatLayout
Window.size = (400,600)
Builder.load_file('menu.kv')
Builder.load_file('barang.kv')
Builder.load_file('barang_item.kv')
# jenis nama item harga lokasi gambar status
daftarbarang=[['1','Food No. 01','25000','image/food01.png','Kososng'],
['1','Food No. 02','25000','image/food02.png','Kososng'],
['1','Food No. 03','20000','image/food03.png','Kososng'],
['2','Drink No. 01','7000','image/drink01.png','Kososng'],
['3','Snack No. 01','15000','image/snack01.png','Kososng'],
]
class MenuUtama(Screen):
def buka_menubarang(self):
self.manager.transition.direction = 'left'
self.manager.current = 'MenuBarang'
class BarangItem(MDFloatLayout):
jenis = StringProperty ("Item Food")
nama = StringProperty ("Food No: 01")
harga = StringProperty ('10000')
gambar = StringProperty ("image/food01.png")
class MenuBarang(Screen):
def on_pre_enter(self):
self.ids.gridbarang.clear_widgets()
self.tampil_barang()
def tampil_barang(self):
jmldata=len(daftarbarang)
for i in range(jmldata):
item=BarangItem()
if daftarbarang[i][0]=='1': item.jenis='Item Food'
if daftarbarang[i][0]=='2': item.jenis='Item Drink'
if daftarbarang[i][0]=='3': item.jenis='Item Snack'
item.nama=daftarbarang[i][1]
item.harga=daftarbarang[i][2]
item.gambar=daftarbarang[i][3]
self.ids.gridbarang.add_widget(item)
return self
class MyResto(MDApp):
def build(self):
sm = ScreenManager()
sm.add_widget(MenuUtama(name='MenuUtama'))
sm.add_widget(MenuBarang(name='MenuBarang'))
return sm
MyResto().run()
Catatan untuk data list file gambar diisi bebas ya yang dipunyai saja. yang ini :
daftarbarang=[['1','Food No. 01','25000','image/food01.png','Kososng'],
['1','Food No. 02','25000','image/food02.png','Kososng'],
['1','Food No. 03','20000','image/food03.png','Kososng'],
['2','Drink No. 01','7000','image/drink01.png','Kososng'],
['3','Snack No. 01','15000','image/snack01.png','Kososng'],
]
File kivy : menu.kv kita ubah seperti ini :
<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':.05,'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}
MDBoxLayout:
size_hint: .4,.3
pos_hint: {'x':.55,'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}
on_release: root.buka_menubarang()
MDBoxLayout:
size_hint: .4,.3
pos_hint: {'x':.05,'y':.15}
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':.55,'y':.15}
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)
File kivy baru : barang.kv ( mengatur menu master barang )
<MenuBarang>:
MDBoxLayout:
size_hint: 1,.1
pos_hint: {'x':0,'y':.9}
md_bg_color: rgba(250, 250, 0, 150)
MDLabel:
text: 'DAFTAR ITEM'
halign: "center"
color: rgba(0, 0, 255, 255)
font_size: '30dp'
MDBoxLayout:
size_hint: 1,.9
pos_hint: {'x':0,'y':0}
ScrollView:
id: layarbarang
size_hint_x: self.size_hint_x
size_hint_y: self.size_hint_y
do_scroll_x: False
MDGridLayout:
id: gridbarang
cols: 2
row_default_height: 200
row_force_default: True
adaptive_height: True
padding: dp(30), dp(30)
spacing: dp(30)
MDIconButton:
icon: "plus"
md_bg_color: rgba(0, 0, 250, 255)
pos_hint: {'x':.85,'y':.03}
MDIconButton:
icon: "select-group"
md_bg_color: rgba(0, 0, 250, 255)
pos_hint: {'x':.03,'y':.03}
on_release:
root.manager.transition.direction = 'left'
root.manager.current = 'MenuUtama'
File kivy bar : barang_item.kv ( rancangan tampilan per item )
<BarangItem>:
size_hint: .4,.3
line_color: rgba(0, 0, 0, 255)
MDBoxLayout:
size_hint: 1,.2
pos_hint: {'x':0,'y':.8}
md_bg_color: rgba(134, 250, 10, 255)
MDLabel:
text: root.jenis
bold: True
halign: "center"
MDBoxLayout:
size_hint: 1,.2
pos_hint: {'x':0,'y':0}
orientation: 'vertical'
padding:"5sp"
MDLabel:
text: root.nama
font_size:"12sp"
bold: True
MDLabel:
text: root.harga
font_size:"10sp"
MDBoxLayout:
size_hint:1,.6
pos_hint:{'x':0,'y':.2}
Image:
source:root.gambar
Demikian sesi kedua ini yang kita buat dengan harapan agar mudah dipahami, karena kita masih sama2 masih belajar kalau ada kesalahan saya mohon maaf dan semoga bermanfaat.
Komentar
Posting Komentar