BelajarPython - assalamualaikum wr. wb.
Jumpa lagi nih temen - temen... Apda kesempatan kali ini saya ingin menjelaskan lebih lanjut mengenai grid layout pada pyton nih... Nah postingan kali ini merupakan postingan yang melanjutkan atau memperjelas dari postingan saya sebelumnya.. Yaitu menengenai macam - macam dari layout pada window bahasa pemrograman python.. Nah jika kalian tertarik untuk membaca postingan yang saya maksud tadi, kalian bisa MEMBACANYA DISINI.
Nah sekarang, yuk langsung saja kita lanjutkan postingan kita kali ini yang sebelumnya sempat tertunda tadi... Jadi, sepert yang sudah saya katakan tadi, kali ini saya akan mencoba untuk memperjelas mengenai macam - maca layout yang akan saya fokus kan kepada “Grid Layout”. Nah seperti apakah yang akan saya bahasa pada positngan kali ini ? Untuk mengetahuinya, yuk langsung saja kita bahas dan simak sama - sama postingan kali ini... Let’s check it out temen - temen...
Nah itu dia temen - temen code programnya... Bisa kita lihat pada program di atas... Terdapat kata “row” dan “colom” yang menjadi lokasi dari widget nya... Nah sudah jelaskan apa yang saya maksud tadi ? Nah, lalu seperti apakah tampilan dari program di atas ketika kita jalan kan ? Yuk langsung saja kita simak sama - sama hasilnya pada program di bawah ini...
Nah itu dia temen - temen hasil tampilan dari program di atas... Gimana ? Udah paham belum ? Ya saya harap kalian sudah dapat memahaminya dengan mudah ya.. Hehe
Nah itu dia temen temen contoh dari program untuk merubah dua baris menjadi satu field atau satu baris... Ya.. Bisa kita lihat pada program di atas.. Khusunya pada penempatan “Button3” disana ada kata - kata “rowspan = 2”. Nah itu lah perintah yang bisa kita gunakan untuk menjadikan 2 buah baris menjadi satu baris.. Nah untuk lebih jelasnya mengenai apa yang sudah saya katakan tadi, yuk langsung saja kita lihat contoh tampilan yang akan di hasilkan dari program di atas tersebut...
Nah itu dia contoh screenshoot dari hasil code program di atas... Bisa kita lihat ya pada screenshoot di atas.. Tombol3 atau “button3” tidak sejajar.. Itu karena, “button3” menggunakan 2 buah baris yang di jadikan satu baris.. Nah udah paham kan apa maksud dari kata - kata saya tadi ? Ya saya yakin kalian sudah paham ya...
Nah untuk bisa kita lihat ya pada program di atas.. Pada penempatan “tombol1” disana ada kata - kata “columnspan=2” nah code program tersebutlah yang bertugas untuk menjadikan dua buah kolom menjadi 1 field atau satu kolom... Nah untuk lebih menjelaskan kata - kata saya tadi, yuk langsung saja kita simak sama - sama hasil tampilan dari code program di atas.. Silahkan disimak pada gambar di bawah ini ya...
Nah itu dia temen - temen hasil code programnya.. Bisa kita bandingkan ya dengan screenshoot yang pertama di atas... Pada button1 sekarang sudah mengisi 2 buah kolom yang sudah dijadikan satu buah kolom... Hal ini dibuktikan dengan dua buah tulisan “label1” dan “label2” yang menjadi sejajar.. Untuk memperjelas kata - kata saya tadi, silahkan kalian bandingkan screenshoot yang pertama dengan screenshoot yang ke dua...
Nah untuk lebih memperjelas lagi mengenai apa yang sudah saya jelaskan tadi, yuk langsung saja kia simak sama - sama code programnya.. Yang kemudian di lanjutkan dengan contoh hasil GUI nya yang tentunya akan menjelaskan apa yang dimaksud dengan dinamis ini.. Yuk langsung saja kita simak code programnya di bawah ini...
Nah itu dia temen - temen code programnya.. Nah bisa kita lihat disana ya.. Ada satu buah bari code program yang code nya seperti ini “root.columnconfigure(c, weight=1)” nah code program ini merupakan code program yang mengkonfigurisakan sebuah colom agar dapat mengikuti windownya... nah untuk lebih jelasnya, yuk silahkan kita lihat hasil GUI dari code program di atas pada gambar di bawah ini...
Nah bisa kita lihat pada screenshoot no.1 di atas... itulah tampilan pertama yang akan tampil ketika kita menjalankan program di atas.. Dan pada no. 2 merupakan tampilan ketika windownya saya perkecil.. nah apabila window nya kita perbesar, maka tampilannya akan seperti pada nomer 3.
Gimana ? Sudah terlihatkan kalau dia dinamis ? Jadi tiap kolomnya akan mengikuti stiap perubahan yang dilakukan oleh window.. Walaupun, tombolnya tidak mengisi penuh semua kolom nya... Tapi sudah jelaskan apa yang di sebut dengan dinamis ? Ya saya yakin kalian dapat memahaminya..
Nah lalu seperti apakah hasil nya jika code “root.columnconfigure(c, weight=1)“ kita hapus ? Yuk silahkan di cek pada gambar di bawah ini...
Nah itu dia tampilan yang akan dihasilkan ketika kita menghilangkan code program “root.columnconfigure(c, weight=1)“ ini. Bisa kita lihat ya perbedaannya.. Tampilannya akan menjadi statis dan tidak mengikuti windownya..
Nah itu dia temen - temen code programnya... Bisa dilihatkan apa perbedaannya dari program sebelumnya ? Ya saya menambahakan code “sticky=E+W”. Code tersebut lah yang bertugas untuk membuat widgetnya menjadi dinamis.. Nah untuk membuktikan berhasil atau tidaknya, yuk silah kan kita lihat pada gambar di bawah ini...
Nah itu dia tampilannya temen - temen.. Bisa kita lihat pada screenshoot no. 1 merupakan sebuah screenshoot dari hasil running dari program pertama kali.. Dan pada no. 2 adalah hasil screenshoot ketika windownya saya perkecil.. Dan pada no. 3, merpakan hasil dimana window nya saya perbesar.. Nah sudah terlihat kan pada screenshoot no. 3 tersebut... Dimana tombolnya akan ikut dinamis ketika windownya saya perbesar...
Nah itu dia temen - temen postingan saya kali ini yang membahas mengenai Grid layout.. Semoga apa yang sudah saya bahas diatas dapat membuat kalian paham dan bisa juga membperaktekkannya ya.. Oya jika belum paham, kalian bisa membacanya lagi dengan perlahan... Namun, jika memang sudah tidak bisa dipahami, atau ada penjelasan yang kurang jelas, atau memang ada yang ingin kalian tanyakan, kalian bisa menanyakannya pada kolom komentar yang ada di bawah postingan ini ya... Insyaallah saya akan menjawabnya sebisa mungkin.. Hehe
Oke sampai disini dulu ya temen - temen postingan saya kali ini.. Semoga postingan ini dapat membuat kalian paham dan mendapatkan pengalaman serta ilmu baru ya.. Terimakasih sudah berkunjung ke blog saya dan sudah membaca postingan saya hingga akhir.. Oya mohon maaf ya atas kekurangan yang adad pada blog ini maupun di postingan ini.. Jika kalian berkenan, kalian bisa sampaikan pendapat atau kritik dan saran mengenai blog ini pada kolom komentar yang ada di bawah ini atau juga bisa melalui laman hubungi kami yang sudah saya sediakan di blog ini... Oke terimakasih ya... Sampai jumpa di postingan saya yang lainnya.. Sekian dulu...
Wassalamualaikum wr. wb.
Jumpa lagi nih temen - temen... Apda kesempatan kali ini saya ingin menjelaskan lebih lanjut mengenai grid layout pada pyton nih... Nah postingan kali ini merupakan postingan yang melanjutkan atau memperjelas dari postingan saya sebelumnya.. Yaitu menengenai macam - macam dari layout pada window bahasa pemrograman python.. Nah jika kalian tertarik untuk membaca postingan yang saya maksud tadi, kalian bisa MEMBACANYA DISINI.
Nah sekarang, yuk langsung saja kita lanjutkan postingan kita kali ini yang sebelumnya sempat tertunda tadi... Jadi, sepert yang sudah saya katakan tadi, kali ini saya akan mencoba untuk memperjelas mengenai macam - maca layout yang akan saya fokus kan kepada “Grid Layout”. Nah seperti apakah yang akan saya bahasa pada positngan kali ini ? Untuk mengetahuinya, yuk langsung saja kita bahas dan simak sama - sama postingan kali ini... Let’s check it out temen - temen...
Contoh tampilan dari Grid layout pada layout window python.
Nah sebelum saya mengedit Grid layout ini, saya kan terlebih dahulu mengenai apa yang di maksud dengan Grid layout ini... Jadi grid layout ini, merupakan layout yang dapat di analogikan sebagai sebuah tebel. Dimana sebuah tabel memiliki row atau baris serta kolom. Nah grid layout pun demikian.. Untuk meletakkan sebuah widget, kita harus menggunakan lokasi dengan menyebutkan row atau baris dan kolom nya. Nah untuk lebih jelasnya, yuk kita simak code program di bawah ini...from tkinter import *
warna = ['red','green','orange','white','yellow','blue']
r = 0
for c in warna:
Label(text=c, relief=RIDGE,width=15).grid(row=r,column=0)
Entry(bg=c, relief=SUNKEN,width=10).grid(row=r,column=1)
r = r + 1
mainloop()
Nah itu dia temen - temen code programnya... Bisa kita lihat pada program di atas... Terdapat kata “row” dan “colom” yang menjadi lokasi dari widget nya... Nah sudah jelaskan apa yang saya maksud tadi ? Nah, lalu seperti apakah tampilan dari program di atas ketika kita jalan kan ? Yuk langsung saja kita simak sama - sama hasilnya pada program di bawah ini...
Nah itu dia temen - temen hasil tampilan dari program di atas... Gimana ? Udah paham belum ? Ya saya harap kalian sudah dapat memahaminya dengan mudah ya.. Hehe
Cara menjadikan 2 kolom menjadi satu field pada grid layout di tkinter.
Nah pertama tama, saya akan mengajak kalian untuk membuat atau merubah 2 buah baris menjadi satu baris... Jadi nantinya, tampilan yang akan menemmpati baris yang ini, posisinya tidak akan sejajar... Nah seperti apakah program untuk membuat tampilan sepert tadi ? Yuk langsung saja kita lihat dan simak sama - sama code programnya di bawah ini...import tkinter as tk root = tk.Tk() Button1 = tk.Button(root,text="Button1") Button2 = tk.Button(root,text="Button2") Button3 = tk.Button(root,text="Button3") Label1 = tk.Label(root,text="Label1") Label2 = tk.Label(root,text="Label2") Label3 = tk.Label(root,text="Label3") Button1.grid(row=0,column=0) Button2.grid(row=0,column=2) Button3.grid(row=0,column=4,rowspan=2) Label1.grid(row=1,column=0) Label2.grid(row=1,column=1) Label3.grid(row=1,column=2) root.mainloop()
Nah itu dia temen temen contoh dari program untuk merubah dua baris menjadi satu field atau satu baris... Ya.. Bisa kita lihat pada program di atas.. Khusunya pada penempatan “Button3” disana ada kata - kata “rowspan = 2”. Nah itu lah perintah yang bisa kita gunakan untuk menjadikan 2 buah baris menjadi satu baris.. Nah untuk lebih jelasnya mengenai apa yang sudah saya katakan tadi, yuk langsung saja kita lihat contoh tampilan yang akan di hasilkan dari program di atas tersebut...
Nah itu dia contoh screenshoot dari hasil code program di atas... Bisa kita lihat ya pada screenshoot di atas.. Tombol3 atau “button3” tidak sejajar.. Itu karena, “button3” menggunakan 2 buah baris yang di jadikan satu baris.. Nah udah paham kan apa maksud dari kata - kata saya tadi ? Ya saya yakin kalian sudah paham ya...
Cara menjadikan 2 kolom menjadi satu field pada grid layout di tkinter.
Nah setelah kita mengedit baris nya, maka selanjutnya sekarang selanjut nya saya akan mencoba untuk menggabungkan 2 buah row/baris menjadi satu field. nah jadi sudah tau kan yang saya maksud tadi ? Jadi tidak harus saya jelaskan tadi ya ? Kalau belum jelas silahkan baca lagi penjelasan yang sebelum nya ya.. Oke langsung saja ya kita simak sama - sama contoh code programnya di bawah ini...import tkinter as tk root = tk.Tk() Button1 = tk.Button(root,text="Button1") Button2 = tk.Button(root,text="Button2") Button3 = tk.Button(root,text="Button3") Label1 = tk.Label(root,text="Label1") Label2 = tk.Label(root,text="Label2") Label3 = tk.Label(root,text="Label3") Button1.grid(row=0,column=0,columnspan=2) Button2.grid(row=0,column=2) Button3.grid(row=0,column=4,rowspan=2) Label1.grid(row=1,column=0) Label2.grid(row=1,column=1) Label3.grid(row=1,column=2) root.mainloop()
Nah untuk bisa kita lihat ya pada program di atas.. Pada penempatan “tombol1” disana ada kata - kata “columnspan=2” nah code program tersebutlah yang bertugas untuk menjadikan dua buah kolom menjadi 1 field atau satu kolom... Nah untuk lebih menjelaskan kata - kata saya tadi, yuk langsung saja kita simak sama - sama hasil tampilan dari code program di atas.. Silahkan disimak pada gambar di bawah ini ya...
Nah itu dia temen - temen hasil code programnya.. Bisa kita bandingkan ya dengan screenshoot yang pertama di atas... Pada button1 sekarang sudah mengisi 2 buah kolom yang sudah dijadikan satu buah kolom... Hal ini dibuktikan dengan dua buah tulisan “label1” dan “label2” yang menjadi sejajar.. Untuk memperjelas kata - kata saya tadi, silahkan kalian bandingkan screenshoot yang pertama dengan screenshoot yang ke dua...
Cara membuat tampilan dinamis pada grid layout di python.
Nah selanjutnya, saya kan mencoba untuk membuat sebuah tombol menjadi dinamis. Nah sudah taukah kalian yang di maksud dengan dinamis ini ? Jadi dinamis ini merupakan fungsi yang akan membuat kolomnya tetap mengikuti window nya.. Jadi, jika kita perbesar windownya, maka kolom nya akan semakin memperbesar.. Dan jika windownya kita perkecil, maka kolomnya juga akan mengecil..Nah untuk lebih memperjelas lagi mengenai apa yang sudah saya jelaskan tadi, yuk langsung saja kia simak sama - sama code programnya.. Yang kemudian di lanjutkan dengan contoh hasil GUI nya yang tentunya akan menjelaskan apa yang dimaksud dengan dinamis ini.. Yuk langsung saja kita simak code programnya di bawah ini...
from tkinter import *
root = Tk()
for c in range(5):
root.columnconfigure(c, weight=1)
tombol = Button(root, text="Tombol")
tombol.grid(row=0,column=c)
mainloop()
Nah itu dia temen - temen code programnya.. Nah bisa kita lihat disana ya.. Ada satu buah bari code program yang code nya seperti ini “root.columnconfigure(c, weight=1)” nah code program ini merupakan code program yang mengkonfigurisakan sebuah colom agar dapat mengikuti windownya... nah untuk lebih jelasnya, yuk silahkan kita lihat hasil GUI dari code program di atas pada gambar di bawah ini...
Nah bisa kita lihat pada screenshoot no.1 di atas... itulah tampilan pertama yang akan tampil ketika kita menjalankan program di atas.. Dan pada no. 2 merupakan tampilan ketika windownya saya perkecil.. nah apabila window nya kita perbesar, maka tampilannya akan seperti pada nomer 3.
Gimana ? Sudah terlihatkan kalau dia dinamis ? Jadi tiap kolomnya akan mengikuti stiap perubahan yang dilakukan oleh window.. Walaupun, tombolnya tidak mengisi penuh semua kolom nya... Tapi sudah jelaskan apa yang di sebut dengan dinamis ? Ya saya yakin kalian dapat memahaminya..
Nah lalu seperti apakah hasil nya jika code “root.columnconfigure(c, weight=1)“ kita hapus ? Yuk silahkan di cek pada gambar di bawah ini...
Nah itu dia tampilan yang akan dihasilkan ketika kita menghilangkan code program “root.columnconfigure(c, weight=1)“ ini. Bisa kita lihat ya perbedaannya.. Tampilannya akan menjadi statis dan tidak mengikuti windownya..
Cara agar widget juga ikutan dinamis pada grid layout di python.
Nah setelah kita membuat kolomnya menjadi dinamis, sekarang selnjutnya say akan mencoba untuk membuat widgetnya juga ikutan dinamis.. Dan pada kesempatan ini, saya juga akan menggunakan tombol sebagai widgetnya.. nah seperti apakah code program untuk membuat tombol menjadi dinamis juga ? Yuk langsung saja code programnya di bawah ini..from tkinter import *
root = Tk()
for c in range(5):
root.columnconfigure(c, weight=1)
tombol = Button(root, text="Tombol")
tombol.grid(row=0,column=c, sticky=E+W)
mainloop()
Nah itu dia temen - temen code programnya... Bisa dilihatkan apa perbedaannya dari program sebelumnya ? Ya saya menambahakan code “sticky=E+W”. Code tersebut lah yang bertugas untuk membuat widgetnya menjadi dinamis.. Nah untuk membuktikan berhasil atau tidaknya, yuk silah kan kita lihat pada gambar di bawah ini...
Nah itu dia tampilannya temen - temen.. Bisa kita lihat pada screenshoot no. 1 merupakan sebuah screenshoot dari hasil running dari program pertama kali.. Dan pada no. 2 adalah hasil screenshoot ketika windownya saya perkecil.. Dan pada no. 3, merpakan hasil dimana window nya saya perbesar.. Nah sudah terlihat kan pada screenshoot no. 3 tersebut... Dimana tombolnya akan ikut dinamis ketika windownya saya perbesar...
Nah itu dia temen - temen postingan saya kali ini yang membahas mengenai Grid layout.. Semoga apa yang sudah saya bahas diatas dapat membuat kalian paham dan bisa juga membperaktekkannya ya.. Oya jika belum paham, kalian bisa membacanya lagi dengan perlahan... Namun, jika memang sudah tidak bisa dipahami, atau ada penjelasan yang kurang jelas, atau memang ada yang ingin kalian tanyakan, kalian bisa menanyakannya pada kolom komentar yang ada di bawah postingan ini ya... Insyaallah saya akan menjawabnya sebisa mungkin.. Hehe
Oke sampai disini dulu ya temen - temen postingan saya kali ini.. Semoga postingan ini dapat membuat kalian paham dan mendapatkan pengalaman serta ilmu baru ya.. Terimakasih sudah berkunjung ke blog saya dan sudah membaca postingan saya hingga akhir.. Oya mohon maaf ya atas kekurangan yang adad pada blog ini maupun di postingan ini.. Jika kalian berkenan, kalian bisa sampaikan pendapat atau kritik dan saran mengenai blog ini pada kolom komentar yang ada di bawah ini atau juga bisa melalui laman hubungi kami yang sudah saya sediakan di blog ini... Oke terimakasih ya... Sampai jumpa di postingan saya yang lainnya.. Sekian dulu...
Wassalamualaikum wr. wb.
ConversionConversion EmoticonEmoticon