PyQt6 Course For Beginners [Python GUI Framework PyQt ]

hi friends i'm paralyzed and welcome to my pi qd6 course for beginners now i already have a lot of videos on pyqt especially on piquet5 and as you know there are different versions of iqt and recent years we had pi qd4 after that by qd5 and now it's time for pi qd6 now you can see that if you see the documentation on and the river bank computing so pikett has a set of python bindings for the qt companies and qt application frameworks and runs on all platforms supported by qt including windows mac os linux ios and android so python supports qt version 6. uh pyqt5 supports qt version 5 and pyqt 4 supports qt version 4. and the bindings and the bindings are implemented as set of python modules and contains our 1000 classes now uh as you know that there are different choices that for gui development in python programming language so for example we have uh pi qt we have uh tkinters it's built in python uh wx python it is a free library for building uh gui applications and also we have tv so these are the most popular uh frameworks that are used for building gui applications and python programming language uh so now the pyqt is the most popular and it's uh more powerful so uh now if you see uh in here about license as you know that it's not free and you can see that this is the for pique d6 and it's a set of python bindings for version six of the qt application framework from the qt company and uh as you know that qt is a set of c plus plus libraries now if you're familiar with the c plus plus and qt five uh framework now if you want to create gui applications in c plus plus then you can use eqt5 and you can create your own uh gui applications using uh c plus plus using c plus plus with uh qd5 and the pi kit if your pi qt is uh the bindings uh for the python programming language that you can use and now with the license you can see that it is a dual license on all platforms under the uh rave urban commercial license and the gpl v3 and also if you want to purchase then also you can get a commercial license and this is the commercial license but because for the educational purpose we are going to just use the free version now let's talk about the installation and you can see that the release date and it's march 10 2020 and you can just use this comment uh pep installed by qd6 and it will be installed so i have already installed it and uh this is my pi charm id i'm using pycharm id you can just download my charm id and now we want to create our first window in pyqd6 so first we need to import so from pique d6 dot uh qt widgets we are going to import so we want to import oh sorry this is uh from so from uh we want to import q application and also we are going to import q widget okay so first we're going to create a basic window and after that we'll talk about the features of the window like giving an icon giving the title setting the height and the weight of the window we will talk about that so now also we want to import sys like this and after that we are going to create our queue application so when you want to create your first window uh for example you want to create your window you need to create the object of the queue application and here you can pass for example you can access.arcv dot rgv so when you want to use for example common prompt or command line utility uh then you can pass dot arc v in here now it's not related to pi qt it's related to python and if you don't want to use you can just leave it blank like this and there's no problem and it will work uh now up after doing this now we want to create uh we need to create the object of q widget now there are three different types of uh uh the window that you can use uh we will talk about that for example we have a queue widget we have a q main window and we have q dialog now q dialog is like a dialog window so if you want to create a dialog window then you can use queue dialog and this is the q widget and also we have q main window for example if you want to create a window that there should be for example menu bar menu items status bars uh then you need to use queue main window so in here we want to create a simple queue widget window and i can just say window and i can say cue widget so after doing this we need to show our window and there is a method called show and that's related to queue widget so we can just say window dot show like this okay and after that we can just start our loop and also we want to exit our app so we can just say app.execute now one of the important uh difference between pyqt 6 and 5 is this that in pikeit 6 you can use like this for example dot execute and now in here we can just use like this cell and there's no problem it will work and now you can see that we have our first window and by qt6 uh now in here if i use like this and if i run this you can see that i am receiving errands it's selling that q application object has not reviewed this execute now we can change this to this and now it is working and there is no problem so right now it's just a basic window and there's uh not any feature for example like i can like title and some more features also we want to convert our this code to object oriented code for example we are going to create a main class that extends from the queue widget and after that we can create the object of that class okay so now let me just create a new python file in here and let me just create a new python file and let me call it for example window class you can call it whatever you want you can just give it the name so we need some imports and let me just copy this code from here and paste it in here and after that we want to create our main class so this is class window now this class extends from q widget so you can give q main window or queue dialog but we mostly we will use q widget and also q main window and after that and so now it means that we have class window and this class extends from q widget now when you are extending from a class then our draft class can access to all attributes and methods of the main class so i will show you now that what i mean so now uh uh you should be familiar with the object-oriented programming and python and there will be no problems so like this is my init method and after that super dot in it like this okay now these stuffs are not related to python the uh to pi qt it's related to python programming language now if you're familiar with object oriented programming with a class inheritance with the for example how you can use constructor uh like this so now so this is my class window now up i want to create so first i need to create uh my uh application object and uh after that uh so i can just say q application so this time i'm going to just leave it blank like this so and instead of using says.org v ah now we can create the object of our window like this and after doing this you need to show the window as we have done in here so you can see that in here we have extended so we have created object of q widget and after that we have used window.show now in here because we are extending from the queue widget and this is the object of our window now we can just say window dot show like this okay and at the end we can just say says dot exit and we can just say app.execute like this so now let's just run our window so you can see that we have the same window with no icon and no functionality so the first thing is that i want to add a window title so because i'm extending uh from q widget now i can access to the for example set window title method using the self so i can just say self dot set window title you can see now these are not related to the window these are related to the q widget class because we're extending now we can access to this so i can just set window title and i can just say for example pi qt window like this okay so now if i run this you can see that i have the title in here so now i want to add an icon so i've already added an icon and my so i can just say so dot set window and you can see window icon and we need to import queue icon from qt gui so import so i can just say from dot q t gui uh import q icon and in here i can just say q icon and you need to give the name of the icon so it's qty.png uh i have already added this icon now let me just run this so you can see that we have icon in here uh you can set a fixed width and height for the window for example i can just say so dot set fixed height now for example up you can give it a 200 and sell the set fixed width and 200 so you can see that now we have a fixed width and height and i cannot make the window bigger like this okay so you can see that the this option is uh disabled in here because right now we are using a fixed size uh also you can set the main geometry for example the x and y position and with the item of the window so i can just say cell dot set geometry so we can give the x and y position and also you can give the width and height for example i can just give it 500 by 300 and 400 by 300 and this is the x and y position this is the width and height now let's just run this and you can see that we have a 400 by 300 window and i can make it bigger like this so also you can set the style sheet or for example you can change your background color and there are two ways uh so the first way is that you can just say self dot set style sheet and i can just say background color for example red so now you can see we have a red background color window uh the second way is that you can use qt stylesheet in here for example i can create style sheet and what i want to do is to add a background color so back ground color and i can for example give it red and after that what i want to do is to set this and i can just say self dot set style sheet and i can set the style sheet in here so now if you see we have the same result in here and there is no problem now let's talk about qt designer so right now we can see that we have created our first window using codes using some codes now it's good to use a designer for example if you have a complex application then there should be something like a designer that you can design your goo application in and there so fortunately for pyqt we have qt designer but by default it's not installed in pyqd five or iqtv6 now uh you need to install another library so that's called uh pyqt5 tools now even though you can see that it still its release for the pyqt55 tools but right now it's spyq5 and there's no problem you can use it with pyqd6 now you can just copy this and install this so you can see the installation and i've already installed it and after installation now let's just open our pycharm id now in your terminal so you can just open your terminal in here and you can just say pi qt5 designer so you can use dot exe or just like this so after that hit enter so now let's just wait okay now you can see that we have the qt designer in here and you can create your window for example i want to use cue uh the widget and after that click on the create so this is our window and now uh you can see that there are some options and these are the widgets right now we haven't talked about the widgets for example a button or some things so right now it's just a simple window and so you can see the width and height of the window the maximum size the base size the font for example for the window and you can see the window title and i can just say for example qt designer window and you can see that it's changed in here and also you can see that there are different options that you can use for example you can give colors to the window i can just right click and change the style sheet click on the change style sheet and i can just say cue widget and i can say background the color and add color let me just choose this color and the color code and i can just add it in here and i can apply okay now you can see the color has changed now there are two ways that you can use this qt designer design so the first way is that you can directly if you see in here it is a ui file now if i save this like this you can see that it is a ui file now there are two ways the first way is that you can just load this ui file so this is the first way the second way is you can convert your this dot ui file to python file we will do so first let me just do the loading so first i want to load this ui file now i can just save this so this is my folder and in here i want to save this and let me just call it my window.here you can just give it whatever name or for example you can give it uh window.ui so you can see the extension is dot ui file and after that click on save so now in here uh okay now in here you can see that we have our window.ui so this is the window.uifi now we want to load this as i have already created a loadwindow.pi now in here we need some import so first i'm going to from qt widgets i want to import q application and q widget and also i i need to import uic because we are going to use uic for loading of our ui file and also we can just use importances so now let's just create our class i'm going to just call it class ui and we can extend from q widget and i can just hit different super dot in it okay now after this this is the place that we want to load our ui file now we can use uic i can just say uic dot load ui so we can use this uh yeah this load ui and in here uh so first is you need to give the name of the so that's window.ui then file name and after that we can just say self now we can create our app q application so i can just say queue application and you can just use for example says.org v or you can leave it blank and we can just save window or create the object of the this ui file and after doing this we need to show the window window dot show and at the end we can uh say says dot exit so we want to exit after exiting we want to close our apps and after that we can just say app.execute so this is the for example the loop of the window so now let's just run our app now you can see that it's working and we have our window that we have created in the designer we have that window and uh and here so you can see that this is our window so this was the first way that we have done now let's just talk about the second way so the second way is that we can convert our this window.ui file to dot pi file and we can use a py uic module for this now so now you can do that so you can just open your terminal and the pie chart and after that we can just say pyuic6 and after that we need to give the filename so that is window dot ui and that's oh it means the output and after that you need to give the output name so i can just give it my or so first we need to change directory so we can just say yt thoughts because our window dot ui is uh located in this directory so now i can just say and uh now you can give the name of the ui so that is window dot ui and this is our output and i can just say my window dot pi so the output should be mywindow.play and after that hit enter okay now it is converted now let's check uh okay now you can see that we have our mywindow.pi if you see that this is generated and created by this ui generated and this is uh some warning and now we can run this and if i run this so now you can see that we have the same window in here all right guys now this video we're going to learn that how we can create widgets like for example buttons we want to create button and also we want to create a label so now this is my simple code for the window and i have just a simple window and the title icon and now we are going to create our so first i need to import uh first i'm going to import cue push button and after that i want to import q label not q layout but q label so after doing this now uh you can directly create your push button in here but we're going to create a new method in here and i'm going to just call it create widgets you can call it whatever you want uh so we can create uh the object of our cue push button so you can use cue push button for creating of the button so we can just say cue push button and after that we need to give the text and also the parent so it's optional and now we can just say for example click me and self the parent itself now if i run this up you will not see anything because we need to call our cell dot create widgets in here and now you will see a button ah you can see that we have a click me button in here uh so right now if you see we have our button in here now we want to just move this right now we haven't learned about the layout management and we will talk about that in the later part of the video so for right now we want to move this button we can use btn dot move and in here you need to give the x and y position so uh i can give it hundred hundred now let me just run this so you can see that we have the android is the x position and the y position and we have our button in here from x and y up also you can set the geometry so let me just comment this uh for example if you want to make uh give a width and height for the button then you can use set geometry so we can just say set geometry uh you can give the x and y position and the width and height of the button for example hundred hundred so now you can see we have a bigger size of uh button in here uh you can just set uh also you can add an icon uh so before i can we want to set style sheet for the button and i can just say set style sheet and background color and i can give it red and if you'll see we have a red color button in here and let's just add uh an icon for the button so btn set icon and now we need to import q i can from a switch simple already in here so from pyqt6q.qtq we are going to import q icon and then here i can just say q icon and i have already added an icon in my working directory it's a png now let's just run this now you can see that we have a nice icon in here like this so now let's create our label and we can just say label and we're going to use q label class like this and then here you can give the text of the label for example i want to give it my label like this and the parent itself and now we can move this so label dot move and it should be hundred by two hundred let's just check um now you can see we have my label in here and we can set the style sheet for the label label dot set style sheet and we can give a color of green and you will see that our label text is changed also you can set the font font size for the label and we can just say label dot set font and we need to import q font from qt gui so we can just say q font and now let's just use this so q font and i can give times new roman and we can give the size for example 15. so now you can see we have our button and label in here in this part we're going to learn about signaling slots now signaling slots are one of the best features in pi qt and they are used for communication between some objects now a signal is emitted when a particular event occurs and a slot is called when it's connected signal is emitted now i'm using my previous example so it was button and label we have a nice button and also we have a label in here now this is the code from the previous part and i want to just use that and let me just change this to piquet6 for example signal slot okay now and here if you see i have a button i want when i click on this button i want to change this text so now for this first we need to create a slot or we can say we need to create a method now let me just say if for example we can say btn clicked or whatever you can just for example click the button so def clicked btn now the first thing is that we need to get uh so we need to set the text for this label now for this i want to just make this self.label like this because if i don't do this i will not access to the label in my disclict btn method so btn okay now we can just say cell dot label dot set text and uh we need to uh for example i'm going to just say [Music] text is changed and also i want to just say self dot label dot set style sheet and i can just say background color to red color okay so now what i want to do is to change this uh i want to just set the geometry and i don't want to use the move in here so i can just comment this and instead i can use self dot label that's you set geometry so this is the x and y position and this is the width and height of the uh label area now uh if i click on here there's nothing happens because we have created our method in here now we need to connect this with the signal there are different signals that you can use for example for the button we have clicked signal uh that we can use and for example if you have a menu items there is a trigger signal that you can use so now uh in the button and here i can just say btn dot clicked so you can see that this is the signal dot connect uh we want to connect this with our clicked btn that we have already created so i can just oh sorry so here i can say cell dot clicked btn so now if i run this and if i click on this click me you can see text has changed and also the background color of the label is also changed all right guys now we want to create our button and also labels and signal and slots using uh qt designer so we want to uh design our gui application uh using qt designer so now i've already opened the qd designer so you can just write pyqt5 designer and it will be opened now here i'm going to use a widget and let me just click on create so what i want i want to create a push button in here so this is my push button and i need a q label let me just find the label so this is the label okay now we want to change this to click me and from here we can just find the geometry so x and y position and we can change the width and height to hundred hundred so like this let me just bring this label in here and for the text for this label also we want to just make the 100 high 200 height 250 and the width to 200 so first let me just change the font size so you can see that this is the phone size and we want it should be for example you can just choose a font size from here and now okay so this is my label and this is my button and also this is my label now let's set some style and design for this so right click change the style sheet so first i want to add some style for the cue push button and i want to change the background color to red apply you can see it's changed and we want q label and i want to change the font color so colors to green yeah it's changed so now let's just uh save this and i can just go to the save and from here i want to save it in here and i can just name it uh button.ui yeah it's good now let's open our yeah now you can see we have button ui in here now let's just convert this now we need to convert our dot ui file to dot pi file so i can just say pyuic6 and i can just after that i need to give the name of the that's button.ui and the output should be for example [Music] mybutton.pie uh no such oh sorry we need to just change directory to yt charts and now we can just uh run our comment in here uh button dot ui my button dot pi so now it is converted let me just uh open this from here and you can see that we have my button dot pi and now in here so this is our file this is let me just run this and you can see that we have our click me with the text label in here now let's just add the signal and slots functionality in here uh the first thing is that i'm going to create for example method i can just say diff clicked btn and i can sell dot label dot set text and i can just say uh um get or we can just say source codes at geekscoders.com let's coders.com okay like this so now uh we need to just connect this and uh i can just go go to push button that we have in here and we can say cell dot push button dot clicked so it's the clicked signal and we want to connect our cell dot click btn just simple and easy and now if i click on this you can see source codes at geekscoolers.com and let's change the background color cell dot label or set style sheet background color to red yeah background color and if i click you can see that this is changed uh we can just make it yellow i think it should be looking good so yeah now it's looking good now we want to talk about the layout management in pi qt so when you want to create a gui application there will be a need of a layout system so for example layouts are used for aligning your widgets in a good manner and there are different layouts that you can use in pi qt for example we have vbox layout we have hbox layout and we have grid layout so we are going to talk about these layouts in this video now i have already created my window code so it's just a basic window now let's just import first i need to import qvbox layout now using qvbox layout as the name suggests it aligns the widgets in a vertically in a vertical manner so using this you can align your widgets in a vertical manner and also we need to import cue push button because we want to align the cue push buttons on a vertical box layout now after that we need to create uh the v box layout object so cue view box layout and now let's create buttons so q push button and i'm going to just say button one and now we need to add this button or this widget in the v box layout so we can just say v box dot add widget so you can see we have add widget in here and in the add widget we want to add our btn one and if you run this and let me just run this you can see that you are not seeing any button here it's because because when you want to use layouts then up you need to set uh the layout for your main window so right now we have a v box layout we have a data with box layout but we have the layout to the main so we can just say self dot set layout and we want to set the v box layout and now if you see we have button one in here and you can see uh we can make it like this uh let's just add some more buttons in here uh we want to copy this and copy copy paste between button two between four and this should be three two three four and we can just add over these buttons so two three and four now let's check and you can see that we have our buttons in here and we can minimize maximize this and you can see that we have our layout it's a vertical or v-box layout now we want to create another type of layout that's called hbox layout it means that using each box layout we can align our items or widgets horizontally so let's just import this and we can just use qhbox layout and we are going to use q push button so let's create some buttons in here and i can just see btn1 iq push button and i can just say button one let's copy this like this first we need to create an hbox layout so hbox qhbox layout and btm button 2 [Music] button 3 and button 4 between 1 3 and 4 and now we can add so hbox dot add widget so btn1 and we can copy this so btn2 btn3 and btn4 and at the end as we have done with the v box layout we need to set our main window layout so we can just say self dot set layout to the hbox layout and you can see that now it's uh horizontally our button buttons are horizontally and we can just make it like this now let's create our grid layout now using grid layout we can align our widgets or items in one column so now let's import q grid layout so q grid layout and q push button so now uh i want to create some so first i want to create a q grid layout now we can create some buttons cue push button and button one let me pause the video and because i want to create eight buttons okay now we have our eight buttons in here let's just add these buttons in the grid layout so we can just say grid dot add widget and after that you need to specify the row and column for example zero zero row and zero column so first you need to specify the button so it's btn one and we want to add in zero row and zero column okay now we can just do this for the rest of the button btn2 zero rule and first column and between three uh this should be the second column and btn4 uh it should be the third column and btn 5 first row and zero column first row and first column and so this should be change this make sure to change this and btn7 like this and just btn8 first column and third uh so first row and third column uh one two three four five six seven eight and now we need to just say self dot set layout to the grid layout let's check this yeah now you can see that we have our layouts in grid manner in row on columns okay now let's create our layouts using qg designer so you can just use pyq d5 designer and it will be opened so this is my qt designer and i can just say create a widget so in here so first let's use a vbox layout i can just add some push buttons in here like this and you can just choose all the buttons select and after that right click and from here layout and we can just use layout vertically and you can see now our buttons uh our buttons are aligned vertically so now let's just use uh some more push button for the hbox layout so this is two uh three and four button now we can just select all of them and the layout should be uh horizontally and now these buttons are horizontally aligned uh let's just add uh some more button for the grid layout and like this and let me just copy the button copy and paste so now i can select the buttons and i can just say layout and a grid now you can see that this is in a great manner now we can just choose these two uh select these two layouts so vertical image box layout and we want to just make this layout and it should be layout horizontally and you can see it's looking good and after doing this we want to make these two vertically or we can just select these two and make this layout and vertically and let me just make this smaller and also you can add a layout for the main window so vertically and now you can see it's looking good uh you can save this and after that we can convert this let me just save this save and we can just save it in so [Music] let me just find the pattern here file save yt charts and in here we can just say layouts.ui and now we can just convert this so we have that in here and now we can just change this to uh yt thoughts and in here we can use the same comment uh give the name of the layout so it's layouts.ui and after that my layout dot pi and now we can just check okay now we have my layout and so these are our buttons now let's just run this and now you can see that we have our button buttons in here and this part where you need to learn that how we could create q line in it so now i have opened my qt designer so uh you can just uh use spike ud5 designer uh in your terminal and it will be opened so now i'm going to use a widget q widget application and after that i'm going to click on create so now uh we want to add a line edit from here so if you come down uh we have a line in it and this is my line in it let me just make it a little bit bigger uh like this okay and i want to add a cue push button so let me just drag and drop this in here and we need a label also let's just find the label okay now this is my label so now let's just change the text uh size of our line edit so from here i can choose for example 14 and this is our cue push button let me just say click and you can also change let me just make it 12 and this is our text label and make it 14 volt so now let's just i want to make a give a layout for this and uh i can just choose a layout horizontally and i want to just make these two layout vertically and i can choose this and i can make this layout vertically so now let me just remove this text label i don't need this and this is my design let's save this i can just save this and i can just go to my working directory and name it for example line dot ui so now uh we have our uh line edit ui in here here this is now let's convert this to uh dot wi-fi so i can just use this comment and uh you need to give the name oh the name is line a date dot u i and um i can get uh so the output okay this should be the output my line at the dot pi uh file line edit dot ui uh let me check uh oh it's stable aim sorry for this and let me just okay now we are done let's check our file align my this is our line in it let me just remove this from here now if i run this uh you can see that i have this form and i can just write something in here now i want when i click on this button i want to uh change the label text so for this what we need to do um let me create a method in here and i'm going to just call it diff btn clicked the first thing is that we want to get uh we want to get the data from the line in it so if you seen here first we want to get this data this value from here and for that we can just use so for example i can just call it uh text input and i can say self dot line edit dot text so we can use text for getting the volume from the line edit and after that we are going to set this so self.label dot set text and we want to set the text input like this and after doing this we need to connect this uh with the clicked signal of the push button and in here we can say self dot push button dot clicked dot connect and this is self dot yeah bt and clicked and now if i write something in here so geekscooters.com you can check this website for getting the source codes if i click on this you can see that we are receiving this in here and if i change this to another name and if i click you can see that this is my name in here in this part we're going to learn that here you can create a q radio button in qd6 now uh so i've already created my window so this is just a basic a simple window and now up so the first thing is that we are going to import qvbox layout and iq group box and so now first we are going to create our group box in here and i'm going to just say div let me just call it for example a radio button so i can just say self group box uh cue group box and then here we can add for example uh i choose a pro gramming language and also we can just set the phone for this so cell dot group box dot set font and we need to import font from qt gui so q font and we can just say q font and in here we need to add the font type so it's times new roman and we can give the size so it's 15. now let's create our uh v box layout in here so i can just see cue v box layout and after creating the v box layout also we need to call our this self.radio button at the top and in here now we want to add our this group box in the v box in this v box layer so v box dot add widget and we want to add self dot group box and then we can just say self dot set layout to the v box layout so now let's check okay now you can see that we have choose programming language and we have a group box in here and you can see the border and after that we have this title in here uh also we need to create a label uh let me just import q label in here and we can create our label so self.label q label and for right now we can just say hello we can set the font for the label so it's q font and times new roman and we can give it for example 14. so now if you see we don't have okay now because we need to add okay we need to add to the v box left so v box dot add widget self dot label and now let's check okay now we can see you can see that we have a hello in here now it's time to create our radio button and i'm going to import q radio button so we can use q radio button for creating radio button and in here uh we can create uh so we want to create four radio buttons uh first let me also import qh box layout qh box layout because i want to add my radio buttons in the hbox layout and now i can just say hbox qhbox layout and after that we can create cell dot red for example radio button one q radio button and i can just say python we can say cell dot radio button 1 dot set checked so i want it should be checked by default so i can just make it true and also we can set uh the font for the radio button and we can say cue font times new roman and it's 14 and also we need to add this to the hbox layout so dot radio 1 and now uh okay now we can uh so this is our hbox yeah because we have a group box in here uh if you see and this group box is uh this is and this group box is added in the v box layout uh also we want to add the group box we want to set this edge box layout to the group box so now in here we can say self dot group box dot set layout to the edge box layout and now let's check this so okay now okay now you can see that we have python here and by default it's checked you can see after doing this now we want to create four uh three more ready buttons and i want to just copy this because we can change this to we don't need that this should be checked and we can change this to c plus plus and radio button two and let's just add another one it is for example java so 4 4 and it should be c sharp okay now let's check this so you can see that now we have four radio buttons in here now i want when i choose one of the items from the radio what button i want to set that item to this text the hello label or text that we have in here so for this let me create a method in here and i'm going to just call it on selected and first we so the first thing is that we need to uh get the value from the radio button so we can just say self.sender and after doing this now we can check that if radio dot is checked is shift is checked we can change the label text so self.label dot set text and here we can just say you you have selected radio dot text like this and after doing this now we need to connect this uh as we have already talked about the signal at different signals that are uh that are related to the to piquity now uh so for the button we had clicked now for the radio button we have toggled so now let's just do that and here i can just say cell dodge radio button one [Music] dot toggle dot connect and we want to connect self dot on selected now let's just check this okay now if i choose python you can see you have selected python we can do this for all the radio buttons radio button 2 no radio button 3 um and radio button 4 and now we can run this so c plus plus java c sharp and python in this video we're going to learn that how we can create checkbox in pyqt6 so first we want to learn that how we can use coding for creating out the checkbox and after that we want to learn that how you can use qt designer to create your checkbox uh now so this is my basic window and simple code and just it's for creating of the window so after doing this up now i need to import a q v vbox layout uh qv box layout qhbox layout and queue checkbox also we need a queue label so for right now we need these uh imports uh so let me just create a method dev create a check box and then here what i want to do is to first create an edge box layout because i want to align my check check boxes horizontally and after doing this now we need to create our checkbox so i'm going to just say self.check1 and we can use cue checkbox for example i'm going to just give it python and we can change the font of the checkbox so we can say set font and q font we need to import q font from qt gui so i can just say q font and in here uh you can give the type of the phone so times new roman and for example this should be 14 the size of the checkbox and after that we can add this checkbox so in the hbox layout cell dot check one and uh first also let me just create a label because so we can create a v box and i can just say qvbox layout and and here what i want to do is to first create my label uh after that i want to add the label in the vbox layout and also i want to add the hbox layer to the v vbox layout so it's kind of layout management that i want to do uh in this uh in this application so now we can just say self dot label q label not qv box layout it should be q label and right now i can just say uh label so this is just simple text and we can set the phone cell dot labeled dot set font for example iq font uh times new roman and you can give it another type of font uh for example sun serif and this should be 15 we can set for example if you want you can set a style sheet and i can just say color red so now let's just add this add widget add this label to the v box layout so self dot label and now what you want to do is to add our hbox layout to the vbox layout also so vbox this time we don't we are not going to use that widget because we want to add layout and so for this you need to use add layout so in here we have used add widget because we want to add the widget and because after that we want to add the layout so we can use add layout and we can just say hbox and at the end for the main uh layout for the main window layout we want to use the v box layout so i can say cell dot set layout yeah and it should be review box layout so it's a kind of layout management first we had hbox load we have added the checkbox to the hbox layout up after that we have created a vbox layout we have added label to the vbox layout and also we have added the uh hbox to the vbox layout and at the end we have set the layout domain window layout to the vertical box layout so let's just first run this let me call self.create checkbox and i can run this okay now you can see that we have our uh first checkbox in here and this is the label and you can see now if i add more checkboxes you will see that it will be aligned horizontally like this and between the label and check boxes there is a vertical box layout now let me just add some more check boxes in here two more or three more or so this should be java check two and check two now we can add another one check three check three and this should be c sharp or c plus plus check three and we can change this to check three and let me just add one more and here it should be check four check four and this should be a c sharp for now let's check this and you can see that the check boxes lined horizontally now we want to add some functionality for this for example uh by one when i choose one of them i want to change the label the text of the label so for this what i want to do is to create a method or we can say a slot and and here i can just say diff item selected and uh now we can check so first let me just create an empty string in here a variable and i can check if dot check one dot is checked so we are going to use this checked method if that's checked we want to add the value of chequa uh we want to add the data from the check one to the volume so we can just say self dot check one dot text so using text we are going to get uh the value that we have uh and the check one and the checkbox one so now we can just copy this uh we want to this uh do this for the check two uh check it to check two and let's just do this for the check three and check three and just one more for the check for and check for so now after doing this we need to set uh this value to the label so we can just say self dot label dot set text and in here i can just say you have a select and we can add our volume here so now we have created the method now we need to connect this with the signal uh we here with the triggered signal that we have in the checkbox now let me just okay now from here we can just say self dot check one dot uh triggered uh sorry not trigger toggled uh uh we want to use it toggled in here triggered you can use triggers uh and uh for example if you have a menu items you can use trigger now for the checkbox and radio button we can use toggled and toggle.connect and we want to just use cell dot item selected let's just copy this and add this to the other check boxes and this should be check two and we can choose check three and the last one is check for now let's check this so now if i choose python you can see you have selected python you have selected java you have selected c and you have selected c sharp so like this you can use coding for creating of the check boxes okay now i want to use the same coding and i want to use q2 designer for creating other check boxes so i've already opened uh my qt designer so from here i'm going to choose a widget and after this we want to create uh three check boxes so you can come down from here and where is it oh check box it should be yeah this is the check box so this is the first one this is the second one and this is the third one and also i need to add a label like this now i'm going to choose this three and so i'm going to add a layout so the layout should be horizontally and between these two or we can say that our main window we want the layout should be vertically now we can change this to python java and c sharp or c plus plus we can change the text let me just come down and from here i can choose 12 bold and i want to do this for the other checkboxes and we can just add this to another one and uh then you can change the color so for example for this text label first i'm going to just make this 40 bold and i want to give a color so i can just go to change style sheet i want to target cue label and i can give a color of red and i can apply so it's red let me just do this for the q check box that i can so i can target you check box or q check box and so i want to use the color for example green and it's not working uh q checkbox for the checkbox okay so there is no problem uh so for right now we are going to just use this for the label and i want to just remove this text label from here okay now we can save this and i can just save this in here and i want to just call it for example check box checkbox.ui so now we have our checkbox and the directory and now we need to convert that py uic6 and i can just say uh i need to give the name of the checkbox checkbox.ui and after that the output should be my checkbox dot pi now the conversion is done and let's check find this in here and my check box let me just remove this and if i run this so you can see that we have our checkbox in here now let's just add the functionality of choosing an item from the checkbox i'm going to just copy and this code from here and if item select it and i can add this in here like this and after that if you see the check box so you can see that this is check box check box 2 and check box 3 we need to just change this to check box and check box this is check box 2. check box 2 and we can just say check box 3 and check box 3. we don't have the fourth checkbox so i'm going to just remove this uh now we can just go to the check box in here so we can just say cell dot check box dot toggle dot connect and we want to just use self dot item selected let's just do this for the more check boxes so we have checkbox 2 and we can add this sign here and change this to checkbox2 so checkbox2 and we can come down and we want to do this for the checkbox 3. now let's run so if i choose you have selected python java and c plus plus so like this you're going to work with uh check boxes in qt and now we want to learn that we can create a spin box in pyqt6 so now you can see that this is my basic window and uh i have my window and this is the code for the window and these are the ports that i have already added now let's create our uh so first i need to import uh spin box so there are two types of spin box we have a qs pen box and we have a q double spin box so we will learn about both of them so for right now we're going to just uh import the q span box we need a q h box layout we need q line in it and also i think we need a cue label also uh now in here i can just say diff create spin so first we need to uh create our hbox layout because uh we want to align our widgets and items uh horizontally so we need to add an edgebox layout and now let's create our spin box so first we want to create our line with it so we can say line edit cue line at it and before line edit in here we can also create a label so label cue label and we can just give laptop price for example and after doing this uh now let's create our uh spin box so up i can just say self we can just make this cell dot line did it and cell dot spin box iq spin box and now so we have our hbox layout we have our these three widgets now let's add uh these widgets in our this switchbox layout also we can we need to create another uh line edit it should be for the result so i can just say result uh self dot result so sell dot result because i want to calculate uh calculate the price and i can just say solve dot result and q line it now we can add uh today's box now so hbox dot note that layout but it is add widget and we want to add our label uh but we can just copy this so hbox dot add widget we want to add cell dot line edit and we can add so dot spin box and we can add a cell dot result and at the end we want to set the main window layout so in here we can just say sell the set layout to the hbox layout so also let me because it's a small we can just change the width and height of the so this is the set geometry so and i think there is no problem let me just run this so we need to call this self dot create spin and now let's check so now we have our two line in it and in here i can write the price of laptop and after that i can choose the for example the quantity and i should receive the total and this line edit so now for this we need to create a method and uh and here i'm going to just call it uh diff spin select it or whatever you can just call it you can add it so self or yeah i can just say cell dot line edit dot text so uh first we want to check if cell dot line edit dot text is not 0 so if this is the case we want to just say we want to get the volume from the line edit and after that we need to convert that to integer so we can just say end type cost that to the end like this after doing this now we can just say total price so so dot spin box dot volume we want to get the uh value from this pin box and after that we want to multiply that with the price that we are receiving from the line edit and after doing this we can just say self.total so dot result dot set text and we want to set the total price and we need to type cause there's two string uh total price and i can just give str in here okay like this okay so now up after this now we need to connect this with the signal uh there is a signal for the spin box and it's called volume changed signal so now we need to just connect that in here so i can just sell dot spin box dot value changed and dot connect and this is self dot spin selected now let's just run this okay so if i write for example 500 and if i choose the quantity you can see we have the total in here now we want to create our spin box using uh cutie designer so especially we are going to uh use q double spin box now you can see that we have a label to line it with the spin box in between them so this is my qt designer and i'm going to choose a widget so in here what i want to do is to first add a label so i can just come down and this is the label and after that we want to add a line edit and the line at it we can add a spin box uh so this time we want to use double spin box so a double spin box and another line at it uh let's just um add a layout for this so layout horizontally and we can just say layout and this is horizontally so we can change the text of this label and i can just uh so this is the text or the font and i can just make it of bold and we can just do this for this is 40 and change this to 40 and this also 40. now let's add some color in here and i can just right click and we can just say change the style sheet so first i want to add for the queue widget and i can say background color and this should be green apply okay we have a green and i can see cue label and the color should be white and uh let's add for the q line a bit now we can just add a color white and also for the q double spin box uh we are going to use a white color apply so now this is our design and now we can just save this and i can save this let me just call it double spin dot ui now we need to convert that uh so this is my terminal and i can just use this comment and after that you need to just just give the name of the ui so double dot ui and i can just say my double spin dot pi so now it's converted let's check my double spin and we can just remove this from here and let's run this okay now you can see uh oh i forgot to change this in here but you can change this so let me just change this again and so for example we can just say sugar price like this and now let's just save this so save and now we need to just convert this again and so this should be let me just remove this and now i can see okay now we can see sugar price and i can add uh so we can so you can see that this is a double spin box we have double volume in here now uh so what i want uh let me just close this i'm going to copy this uh diff's been selected let me just copy this and bring this in here so now in here we need to bring some change uh so the first one that this is our first line edit and let's check so it's lined it and we can just bring this in here and there we have our spin box it's double spin box and this is not result this is uh line edit 2. and now we can just connect this with the volume changed signal so in here i can just say cell dot double spin box dot volume changed dot connect with cell dot spin selected now let's just run this okay now you can see that in here if i write for example five point five so not oh sorry i have given the wrong body so uh let me just run this okay now in here i if i give 5 now you can see 5 10 and if i give for example price is 10 and if i choose you can see that we are receiving this in here so like this you can work with this uh double spin box using qt designer okay now let's learn about creating uh table widget and how we can use queue table widget i'm using coding and using qt designer so now first we will create our table widget so i use encoding uh so these are my imports and i want to import q table widget and not tab widget but sq table queue table widget item and also uh i think a qv box layout so after doing this we want to create a v box layout and after that now we can create our table widget in here q table widget now we need to specify the row the number of row and also the number of columns so we can just say table widget dot set row count and for example 3 and table widget dot set column count and this should be also three and after doing this now we can add items so we can set item so we can just say set item and after that we need to use q table widget item so first we need to specify the row and column so for example in which one column you want to add for example we want to give zero and zero so zero and zero column and after that we are going to use q table widget item and now we can give for example it is first name or we can say f name so we can just do this the same let me just so this is 0 1 and it should be l name and this is 0 2 and we can give it email so now we can set the items uh to in here and we can just say table widget dot set item so now after this you need to specify the number of round column so you can see if i say dot set item and you can see that we need to uh give uh some uh for example rowan columns in here and after the table widget item so now we can just say first and zero and q table widget item now we can give for example you can give a name in here and so after that table widget or set item it's not such current item but it is set item so now i'm going to copy this and this should be first one and i can give it for example the l name and this is our email okay now let's just add this uh to the v box layout so add this table widget so i can just add widget and i can add the table widget and i can say cell dot set layout to the vertical box layout now let's check so now you can see that we have um first name only but it's uh so i think we are uh zero zero one oh yeah it's two not it's one so okay now you can see if name lame and also email now let's just copy this and we want to add one more okay now this should be two two and two we can change this so john doe and john gmail.com and now you can see that we have two items in here uh you can change the style sheet if you want i can just say table widget dot set style sheet and we can give a background color so for example yellow or red or whatever you want for example green and now if you see now it's changed let me just make it yellow and also we can set the phone so table widget dot set phone and we can use q font we need to import q font at the at the top so a q font uh you can give the font type so times new roman and also you can give there for example i want to just give it the size to 14. and now if you see so you can see that we have our table widget in here now also you can use uh about qt designer for creating of the table widget so now i can just click on the widget create and from here i can grab a table widget so yeah table widget and we can just make it for example layout uh horizontally now you can right click edit items now you can add column so for example first column i want to use that f name uh l name and also we can give the email so now you can see we have in here now we need to add some rows in here our first row and the item is and you can see we have first item we can edit item we need we can add another one so the second row and item we can just give it a name in here and we can see that we have our this table widget in here you can easily save this and name it for example table widget and we can just now we can convert this so okay now let me just open the terminal and in here i can just say it was table widget dot ui and so my table widget dot pi so my table widget dot by and now we can just so now you can see that this is our table widget in this video we want to learn that here we can create list widget in byqd6 so now this is my simple window and uh so i want to import a list widget queue viewbox layout and also a queue label so not v box level but queue no vbox layout i think it's correct uh so after this now we can say vbox qvbox layout and uh after that we need to create the list widget so self dot list widget and i can say cue list widget and uh from here so you can just say list widget and queue list widget and now we can insert some items to the list widget so cell dot list widget dot insert item and in the zero index we want to add for example by qt and now we can just copy this and so after that we can add another item wx python and send the second index we want to add kiwi and the third index we want to add tick enter so these are the items for our list widget and the last one is piscete2 so now after doing this we are going to create a label so self dot label q label and for right now we can just say hello and we can say cell dot label dot set font we want to set the phone for the label uh let's just import the queue font so times new roman or you can just give it a sensitive and 14 so now we can add so vbox dot add widget we can add our self.list widget and vbox.ad widget and we want to add our label and at the end we want to set the layout for the main window so we can just see vbox layout and now if you see up you can see that we have our items in here and this is our uh label it that we have in here now we want to add some functionality for this for example if we click on this we want to change uh the color of changing the label of this text so now for this we are going to create uh i'm going to just say diff item selected and from here i can just say item and first we need to get the item from the list widget the current item so we can use current item and after doing this we can set this to the label so cell dot label dot set text and we can just say for example you have uh selected and now we can add our item dot text [Music] so we need to type cast this to string so i can just say str okay now let's just uh connect this so in the list widget and i can just say cell dot list widget dot clicked dot connect so soul dot item select it now we can run this so if i choose you can see you have selected and wx python like this so for example you can set style sheet for the list widget so you can just say self dot list widget dot set a style sheet and i can just say background color yellow and if you see now the background color is changed to yellow so this was uh using coding now if you want to use qt designer also you can do so you can just write pyqt5 designer in your terminal and your terminal and it will be opened so now from here let's uh add a list widget and also we need to add a label and we can just choose the layout vertically like this and now we can edit items let's just add some items in here and we can just say wx python and kiwi and so this item should be tcanter and this should be pi side 2 and now these are the items so we can change the font color from here and where is it font color uh 12 we can make it bold yeah and we can change the label text so we can make it bold now let me just remove this and now let's save this and you know that how you can convert this list widget so list widget dot ui and now we can convert this in here so in the terminal uh we can just and now we can say now the file name is list widget dot ui and the output should be my list widget dot pi so i think it's done and now we can find this my list widget remove this code and run this now you can see we have uh our items in here uh let's add the functionality uh we are going to copy this item selected from here and we want to paste this in this section so it is list widget and now we can connect this uh yeah you can do it in here so solo dot list widget dot clicked dot connect to cell dot item selected you can see that we are receiving the text in here this part we want to create combo box and pi qt so first we want to create combo box using coding and after that we will use the qt designer for creating of the combo box so now so this is my simple window code and what i want to do is to import uh the q combobox class and i want a qvbox layout with a queue label so after this i want to create a vbox layout so i can just say q v box layout and after that we want to create our combo box so i can just say uh silv dot combo and cue combo box and now we can add items to the combo box so we can just say self.combo dot at item so we can just add some item in here and let me just copy this because we want to add some more items so python wx python and kv after that we have tick enter and the last one for example pi site 2 so now uh let's create a label uh so right now if i add this to the v box layout so i had widget self dot combo and i can just say cell dot set layout so i want to set the main window layout to the v box layout and if i run this so sorry so now if i run combo okay now you can see that we have the uh our combo box in here now let's create a label and i can just say label q label of right now i'm going to just say hello and also i can set the phone for the label set font qr font let's import q font in here and i can just give type the type of the font and also the size uh you can add this to the view box of viewbox dot add widget and let me just make this self dot label and solve dot label so now we have a label in here uh now we can add some functionality to this uh there is a signal that you can use in combo box that's called current text changed so for this uh the first thing is that we need to create a method and in here def combo item and first i can just get the item so self.combo dot current text so current text and after that i can set that to the label so cell dot label dot set text and i can say you have selected uh we can add item the value sorry not item now uh let's just connect this with the current exchanged signal of the combo box so i can just say cell dot combo dot current text changed dot connect and we can add self dot combo item now if i select you can see you have selected kiwi you have selected price i2 and you have selected wx python so now let's create uh the same using the qt designer so you can just write py25 designer in your terminal and it will be open so i'm going to use widget and in here we want to add the combo box and also a label and we can make the layout vertically let's just make it a little bit smaller and i can edit the items uh we can add some items in here and wx python kiwi not kiwi but it's kiwi tea counter kv ticketer and buy side 2. so these are the items we can change the font size and i can just make it 12 bold and the text label should be uh i think should be 14 bold like this and uh let's just give you can give it a color uh that's uh never mind and uh i can just remove this text label for right now and let's just save this combo dot ui and now we need to uh convert this to the dot pi file py uic and we can give the name of the ui file so it's combo dot ui and the output should be my combo dot pi now it's done i think and let's check my combo we can remove this from here and if i run this so you can see that i have my combo box in here and now let's just add the functionality so i'm going to just copy this from here and add this in my new file change this to combobox and now we can connect the signal so let me just copy from here uh let me just add this in this section so it's combo box and now i can run this so you can see if i choose kiwi and pie site too so like this you can work with combo box in this part we are going to learn about creating menu and menu items and pyq d6 now so for item you can see that i have just my window and now what i want to do is right now you can see that we are using q widget and we have used tell now q widget and i've already said that for example you can use qm qmain window and also queue dialog so for example if you want to create a dialog window then you can use queue dialog and if you want to create a window that there should be for example menu items menu bars and status bars then for that we need to use q main window so we can so first we need to import that q main window and now our this class window extends from two main window so after that we are going to create our uh method in here so i'm going to just call it the create menu so what i want to do is to uh and here we want to first create our main menu and uh it should be a menu bar uh like this self dot menu bar now this menu bar is related to the q main window and it's already built in so by now you do need to import this so after that now we are going to create a file amino and we want to add this main menu dot add menu and we can just say file so after doing this now let's create some actions in here for so i can just say new action and q now we need to import q action in here q action and q action so now because we want to add uh so for right now uh so because i want to add some icons for the menu items i have already added some icons in my working directory so uh i can just say images so it's an images folder and it is new dot png and after that it is new and also we need to give the parent self and after doing this now we can add this in the file menu so we can say file menu dot add action and we can add our new action here now let me just call myself dot create menu in here and now if we check this so we have an error uh unexpected str images uh cue oh sorry uh because we are going to add icon so right now let me just remove this and if i run this like this okay now you can see we have file name so right now we are not going to add any icon so you can see that we don't have icon in here and so now let's add the icon and in here we need to first import qi so we have q icon in here and we can just say q icon uh q icon and in here we can add our icon so you can just say images uh neo dot png uh q icon new dot p yeah okay so now uh let's run this and you can see that we have an icon in here uh you can add shortcut uh for the menu item so we can just say new action dot set shortcut and uh for example we can just say control plus n and we can run this so you can see we have a shortcut in here so let's just add some more uh actions in here and so this should be save action and images save dot png and it is save and control s we can just add this in here also we can add separator in here so so new action save action for example we can add another one that is uh for example copy action and this is uh copy.png and copy this is ctrl c copy action uh now you can add separator for example we want to create a exit menu item and if you see this uh uh so we want to add a line in here and we want to separate our this streaming items from the exit so let's just copy uh this and we can just say exit action we don't need the shortcut in here and this is exit.png and this should be exit exit action and now so first if i run this so you can see that we don't have any line in here now we want to add a separator line for the menu items and so i can just add that in here i can just say file menu dot add separator so you can see that we have a line in here now i want when i click on the exit button i want to close the window so there is a signal called triggered in the menu items we can use that so first we are going to uh just uh create our uh close window in here let me just call it the diff close window and uh and here we can just say self dot close and now let's connect this with our this exit action i can just say exit action dot triggered dot connect and we can just say cell dot clues window so if i click on the exit you can see that the window is closed so now if you want to for example i use qt designer it's also simple so for example i have open my qt designer from here i can just choose main window create and now you can see that in here you can create your uh menu items so for example file you can add new uh so new or you can say copy we can say paste and now we can add separator like this and in here we can add exit like this you can create for example vu uh phoned now so like this you can easily use and you can create your menu items using qt designer all right guys now this is the second part of our course on by qd6 so the first part we have learned about different topics uh and by qt like about different widgets now in this part we're going to start our database programming now for the database programming um now in this database programming section we will learn that how you can for example create database how you can insert data how you can retrieve data so these kind of functionalities now the first thing is that you need to install a mysql connector python so because we are going to use this library and you can just use papen installer mysql dash connector dash python and after installing of this and you can see that this is the latest uh released uh we are going to uh you need to install web server because we are going to use and as you can see uh this is my p phpmyadmin now after this uh this is my qt designer you can just use pyqt5 designer and it will be open now we want to create our gui in here i'm going to just click on the create like this so in here the first thing is that first i want to add a label uh let me just add a label and after do adding label we need a line with it so let me just find the line at it yeah uh we need two buttons uh two push button so this is the first one and this is the second one also we need another label uh let me just add the label and here so let me choose these two and we want to make the layout uh horizontally for these two push buttons we can just use layout horizontally and we can choose our main window layout and we can make it vertically now let's change this uh let me just say database name and uh we can change the font size for the bold and or we can just say 12 i think it's good yeah and let me just change this to 12 [Music] and uh you can change the text size a little bit more bigger so 12 and this text label should be 40 and bold like this okay now so this is our line edit and you can see that the the object name and we are not going to change this but for the push button we want to change this so uh this for this i can just say uh database creation and i can just change this to the object name to db dbe create and this is database connection we can change this to db connection and so this label is this is labeled two and uh we you can change this but i'm going to just leave it like this i will know that this is my first label and this is the second label for the checking the database connection what i want to do is to just remove this text label from here uh now i can save this i'm going to just save this and from here let me just call it uh database con dot ui and after doing this now we need to convert this so to dot pi file and i can just say uh the name is database con dot ui and now we can just say uh database con dot pi okay now let's just check uh our converted file and so yeah you can see that this is databasecon.pi and we can just remove this and now if i run this so uh you can see that i have my so you can add a spacer between these two i think uh i should add a spacer because i want to give some space between these two so for this from here we can just choose a vertical spacer and yeah now we can save this again save and let me just convert this again and now so database con dot pi and okay now you can see that it's looking good we have some space between these and then here we have our label so i want when i write for example uh some name in here database name and if i click on database creation i want to create a database automatically in my wamp server so using the gui now for this the first thing is that you need to import so import mysql dot connector as uh we can just reference it as mc and then now and here uh let me just create my first uh method i'm going to just call it the create database and we can create a try block try catch block in here and i can call it we can just call it whatever so for example i can call it db or you can say mydb and in here we want to just say mcdot connect we want to connect so first we need to give the host name and the host name is localhost localhost and after that we need to give the username so the username is root i don't have any username for the wamp server and also i don't have any password so for this i'm going to just leave it blank now after uh doing this uh now we need to create uh and here i'm going to create a cursor so i can just say so first let me just create my accept mcdot error as e and i can just write the error and my label too so label two dot set text and i can just say uh database creation failed database creation failed okay so now uh now after this we need to create the object of cursor so i can just say cursor and mydb dot cursor and after doing this we need to get the db name from our text input so if you seen if you run this so you can see this is our text input or we can say line edit we need to get this uh input value from here so now and here i could just say db name cell dot line edit dot text and after that i can just say cursor dot execute i want to execute my query and i can just say create uh you can just say create database and after that you need to give the database name so dot format and we can add the db name so this is the name that we are going to receive and after doing this we can just add a cell dot label to dot set text and i can say that database created dot format and we can add the db name in here now let's just connect this uh with the button that we have so we have uh db create and in here i can just say self dot db create dot uh clicked dot connect to self dot create database and now let's just run this uh now if you see uh in here uh these are my databases so let me create a new database in here and i can give for example a database name so this is my database name and i want to click on the database creation so you can see that database this data was created and now let's check our wamp server so if i refresh this and you can see that this is the new database that's created through the gui and right now we don't have any table in here now let's check the database connectivity and that we have the database connection and for this uh i need to create a new method and let me just come down and here i can just say def db connect we can add a try in here so let me just copy some codes from here i can just grab these codes from here and bring it in this section what i want to change uh to add a database in here because now we have the database and we want to check the database connectivity so we can just say database and you can add your database name and if there was a connection now we can just say self dot label 2 dot set text and we can say there is a connection and if there was an error we can just add this except in here and we can add it in this section up so in here i can say oh we have so diff so we need to add this in here okay now if there was an error we can just say that error and connection we you can uh there is error in connection so we have here because we have copied and then here we have to try and let me just remove this one okay now we can just add this uh the db connect and uh and this button so i can just say cell dot db connection dot uh clicked and i can just say dot connect itself dot db connect and we can run this now if i add so for example if i say database connection there is a connection because we have our database in here and for example if i change this database name for example to pi qt we don't have this database and if i run this if i click on database connection you can see that there is error in connection and let me just bring this again now we want to insert some data into our mysql database so right now we have our database and there is no table and there is no data so i'm going to create a table of users and there should be three fields and so now i can just say id and email and password so this should be integer and i can just give it the length hundred and it should be auto increment uh let me choose it and the email is varchar or varchar we can say and this says hundred and the same for this let me just give it hundred and click on save so now uh the database is created we have our users a table we have our users table with id email and password fields but there is no data for right now we want to insert data using our gui now for this i have opened my qt designer and i'm going to just click on create so uh we need to add some widgets and line edits so first i'm going to add two label in here and after that we need to line it it so this is the first one and this is the second one let me select this and i want to make this horizontally and also we want to make this also horizontally and we need a push button where is it yeah and also another label this let me just make these two uh align these two vertically and i want to make my main window layout also vertically uh we want to add a spacer so vertical spacer between our oh sorry between the two line edit and also push button okay now let me change this to uh i can just say email and this to password and let's change the text from here and we can just make it 12 bold and this should be 12 bold and for this we can just make it 12 and this line it to 12 i change the button also the text label to 40 14. okay now uh so let me just change this so right now it's a plain text edit and we want to make this password so you can just come down and you need to find the eco mode so right now because it's normal but we want to just make this password and it will be like password field let's change this to uh insert data and so you can see the ids you can change the id uh you want for example you can change the line edit to email field or this password field i'm going to just leave it by default so this is my line edit one line edit two and this is my push button and this text label is label three and this is for the result and i'm going to just remove this text label from here so now uh we have our this design let's just save this and i can save this we can just call it insert data now we can convert this insert data dot ui and we can just give it uh insert data dot pi okay now we are done so let me just open find this from here and that is insert data yeah and now if i run this you can see that i have a nice design and you can see that this this is a password field now let's create our coding uh so this was the design first i want to import mysql dot connector as mc and in here we can just say diff insert data uh let me create a try uh and here we can just say mydb mc dot connect let's just add our host so the host is localhost we have the user and the user is root so it's the username we have password it's mpt and we have a database so the database name is this is my database name and let me just create up so if there was an error so i can just say accept mc dot error as e and we can just print that error and the label 3 that we have so dot set text and i can just say uh inserting data filled so now uh and here the first thing we are going to create our cursor so i can just say my cursor and my db dot cursor and after creating of the cursor uh we want to get the input from the to line edit that we have so we have email and password so this is like uh the id name is line edit one and i need it too so we can just say uh email and it is cell dot line edit dot text and the second one is password self dot line edit it slide it uh align it to dot text so now after doing this we are going to create our query so cutie and we can just say insert into users and we have so the id is auto increment and we don't need to give we want to just add password email and password fields and the values and the values should be we're going to use string placeholder in here like this now we can uh create a value and we can add our email and password in here and after that we are going to just execute our query so we can just say my cursor dot execute and we can add our query and the value of the data that we want to insert and at the end you need to commit the database so we can just say mydb dot commit like this and also we can just copy this and bring this in here we can say that data has been inserted data has been inserted so now let's connect this with the button that we have with the push button so i can just say so dot push button dot clicked and dot connect so it is self dot insert data now let's run this okay now i want to add a data in here so right now if you see our database is empty and we don't have any data in here and let's just so so we can give a password and insert data so data has been inserted let's check that we have the data we have the first data let's add another one i can just say john at gmail.com and you can give a password in here and we can just insert so so you can see that we have the second data in here so now we're going to learn that how you can retrieve the data from your mysql database and a q table widget so now we can see that this is our users table and we have two data in here and now this is my qd designers first we are going to design our application our gui application now what i need in here i need two labels so let me just add the first one the second one i need to line it so this is the first one and this is the second one okay now let me choose these two and i want to just make the layout horizontally and we want to do the same for our this uh second label and line edit and we want to make it horizontally up after that we need a table widget so uh we can just uh okay now i'm going to use this table table widget in here and i want to add it in this section and after that also we need a push button and i can just add the push button here we can choose these two uh this these two and i want to make the uh it vertically and for the main layout we also want it should be vertically so this is our ui design now let's just change this and this is my database name and after that this is my table name like this and also so this is a table name now i can just change the font size and i can just make it 12 and also i want to make it bold and we want to do the same for this it should be 12 and also bold and let's just change this to 12 and we can just make this to 12 like this and let me just change this to for example i show data and we can change this to 12 and for this also uh 12. so now we can preview this in here uh if i preview you can see that this us this is our ui design also i forgot to just add number of we can add if you want to add number of row and column you can add so you can see so for the row i'm going to just add the for example 7 and for the column i want to it should be 3 okay now let's just save this and i'm going to just save this uh in here and i want to just name it show data dot ui and now let's convert this to dot pi file so we can just say like this and after that so it was show data dot ui and the output should be show data dot py and now let's check uh show data now yeah this is show data i'm going to just remove this and now if i run this so you can see that i have this in here this is the database name this is the table name and after they can click on true data to show my data from the database now let's create our method in here first we need to import uh i need from pyqt dot qt widgets import q table widget widget item q table widget item and from or we can say import mysql.connector as mc and and here we are going to create diff show data we can create a try and in the try we first we need to just uh get the database name and also the table name from the line it did so cell dot line text and we have table uh table name uh self.lined it to the text and after doing this we are going to create our i can just create my db and i can just say mc dot connect so uh first one is asked host so the host is localhost and we have a user so the user is root and we have a password so there is no password and the database is the db name like this so now if there was an er so first okay now let me just create my cursor in here cursor object and i can just say my db dot cursor and now we can execute our query so my cursor dot execute and i can just say select all from dot format table name now after this we are going to fetch off all the data so we can just say result and we can say my cursor dot fetch also you can see we have fetch many of which one we are going to use fetch all because we want to uh get the all data and after that we want to just say cell dot table cell dot table widget dot set row count and we want to make it to zero now we are going to create a for loop so i can just say for row number because i want to trade on the columns and rows raw data and enumerate and we can add the result in here and we can just say solve dot table widget dot insert row and we can just say row number in here and we need to create another for loop so we can just say for column number and data in enumerate raw data and then here we can just say solve dot table widget dot set item we can add our row number in here and after that uh column number and also we need to add the queue table widget item so it needs row number column number and also a queue table widget item and we want to add the data so we need to just typecast this to the string so like this okay now uh so if there was an error let me just so this is my okay now if there was an error we can just say accept mc.error as e and we can just say print error occurred okay now let's just uh connect this with the show button that we have in here and now this is our show button cell dot push button dot clicked dot connect and it is cell dot show data so now let's just run this okay first we want to give the database name so this is my database name and we need to give the table name users show data now you can see that we have our two data in here so now we are going to create a simple login system so where we can log in now for this i'm going to i have already opened my qt designer and let me just create as first i'm going to create my design now what i need i need uh two labels in here so this is the first one and this is the second one up also we need to line it it and i can just grab from here first line it did and this is my second line at it i can choose these two and make the layout horizontally and we want to choose these two and this should also be horizontally we need to add a push button and also a label in here we can choose these two and make this horizontally not horizontally sorry uh vertically and for the main window layout you can choose it vertically so this is the design also we need to add a vertical spacer in here let me just yeah now and here i can just say email and this is password let's change the text to 12 bold and we can change the text of this line edit for the password we need to do the same 12 bold and this is also 12. and also you can just change the eco mode so right now it's normal and we can just make it password so and here we can just say login and let's change the font of our button so we can choose from here and to wealth so this is the text label and we can just make it 12 bold so right now uh so you can see that uh we have our this email and i'm not going to change the object name but you can change it for example you can make it line edit email but for uh for right now i'm going to just leave it like lining it one two so this is the push button and this is the label three uh that we have in here now if you preview this we can preview this and you can see that this is our design also let's remove this text label from here and now we can save this and i can just add this in here and i can name it login.ui let's convert this and i can convert this to dot pi file it is login dot ui and after that i can just say login dot sorry this should be o and login dot py so i think we are done and if i find the login in here where is it yeah login dot y and now i can run this okay now this is our design now let's create our uh database functionality first i need to import mysql.connector as mc and from pyqt sex dot qt widgets we are going to import cue dialog now in here we can just say diff login so first we are going to connect uh uh so first i need to get the email and password from the line edit so cell dot line edit dot text so we can use text for getting the input this is the email and for the password i can just say cell dot line edit to so that's line edit to dot text so after doing this now we are going to create our connection we can give the host so it is localhost we can give the user so this is root and we can give a password so right now we don't have any password for the uh wamp server so i'm going to just leave it blank and we need to give the database name so this is the database name that i have already created so after doing this now let's create our cursor in here and i'm going to just call it my cursor mydb.cursor and now we need to create our query okay now let me just paste the query in here so this is my query you can see select email and we are going to select the email and password from the users table where email is uh we are going to check that if our email is the same as so the database email is the same as the email that we are receiving from the input and the same we want to do for the password and password like and this is for the password so this is our query and after this query now now we need to execute our query so i can just say my cursor dot execute and we can add our qd now we can create a result in here and we want to fetch one record so for this we can just use my cursor dot fetch one and now we can check if result is none we are going to just say self dot label three dot set text and we can say n correct email or password uh in the else case so we can just create an else so in the else case what we want to do is to just say cell dot label three tree dot set text and i can just say you are logged in and now i have to open another dialog so after logging after login i want to open another screen or another dialog so for this i have already imported queue dialog at the top if you see i have imported this queue dialog and now i want to use this okay now i can first create the object of my dialogue so i can just say to dialog and now i can just say my dialog dot set model to true and after that i can just say my dialog dot execute now if you're in pyqt5 then you can use like this execute but because we're in pyqt6 then we cannot use this so we need to use this execute this execute has been removed in piquet6 so we can just use it like this and now we are going to create our accept block and we can just do that in here so accept mc dot error as e and we can just say cell dot three dot set text and error so now let's just connect this with our push button and in here i can just say self dot push button dot clicked dot connect and i can just use self dot login now if you see my database of users i have two users so this is the email and this is the password now first i'm going to add a wrong email and password so now for example uh i can add just like this something and if i log in you can see incorrect email or password now if i add the correct email and password so this is the email that i have and let me just give the password in here and if i log in you can see that i am receiving another dialog in here and if you check here you are logged in in this video we're going to learn that how we can create a color and phone dialogue so now this is my qt designer and i'm going to just create a simple gui uh where we will have a text edit like this and we will have two buttons uh two push buttons and we can just grab and drag and drop it in here up i can make the layout for this horizontally and for the main layout of the window i want it should be vertically and now let me just uh change the text of this to uh so you can just make it i'm going to make it 40 14. and after this we can just make this uh color dialog and this should be font dialog let's change the text size and make this also we can preview this if you want you can just uh preview this and it's looking good now let's just save this and we can just save this and then here i'm going to just call it color d dot ui and now we want to convert that to dot pi file so it is color d i'll color d uh i think it was color d uh yeah color d dot ui sorry color d dot ui and after that the output should be color d dot pi now we can check so i should see oh yeah this color d dot pi now we are going to if i run this so you'll see that i have a text editing here with two buttons uh now i can create my first let me just create a method for changing the color so i can just say diff uh color dialog and uh first we need to import the color dialog so from a queue i think it's related to qt gui so from iqt sex dot qt gui import cue color uh oh color dialog oh sorry it's a qt widget so qt widgets import cue color dialog and in here we can just say color and cue color dialog dot get color so we are going to get the color and after that we want to set the color to the text edit so we can just just say set text color and we want to add the color and now let's just connect that with the button so the first button self dot push button dot clicked dot connect and this is cell dot color dialog now we can check this so if i write hello world and the color and now you can see that the colors changed uh so now let's just create another one for the font so the font phone dialog and uh i can just say font okay first we are going to first we need to import that and after that we are going to get the phone that lock so we can just say cue font a cue phone dialog so i can say q font dialog dot get font and after that i can just say okay i want to set the phone to the text edit so cell dot txt dot set phone and we can add the font now let's just get uh find our second push button okay now this is the second push button and we can just add this in here so solve dot push button two dot clicked dot connect and we can add cell dot font dialog so now if i write hello world and if i choose font for example 20 i can choose it like this bold and now you can see that the font has changed in this part we're going to learn about cue painter class and how you can use cue printer class and we can use cue painter class for drawing different shapes like rectangle triangle or for example ellipses and also texts now uh also we will see a big difference between pyqt5 and pyqt6 now if you see the in the difference now the first difference is that all named enums are now implemented as a subclass of the standard python enum class by qt5 uses ant enum for scoped enums and a custom type of traditional named enums so we have already saw this difference now because now all and the execute underscore and the print underscore methods have been removed and we have used directly this execute now we will see that this the second big difference so this is now if you see in here for example uh if you uh if you see in the qt uh in the qt class we have uh uh for example we have a line center align base baseline uh or a line bottom now before this in pi qt 5 you can directly use for example qt dot align center but in pi kt6 we cannot use like that we can use qte dot alignment and after that we can use align center now we will see uh in queue printer class that how we can use this so now i've already created uh so you can see that this is the difference that we have already talked now we cannot use this because if i run this like this you can see that i am receiving error that object has no attribute execute it's removed in pyqd6 now so for this the first thing is that we are going to import cue painter class so it's related to qt gui so cue painter iq painter class and in the painter class we have a method that we can use that's called def paint event and now let me just remove this we can just use e in here or event and okay now we need to create the object of q painter class like this and after doing this so we can just start solving here now after doing this uh we can use so for example painter dot draw so you can see we have draw image line and different shapes that you can use draw pi we want to use draw ranked and in here you can give for example 100 15 300 so this is the x and y position the width and height of the rectangle and hundred so now if i run this you can see that i have a rectangle in here now uh let's just add some styles so for that we can use uh uh q pen class so we have already so i haven't imported i think here now we need to import q pen and also cue brush so now in here we can just use painter dot set pen and after that you need to so now if you're in pi uh qt5 then for that we can just say q pen let me just for that and pi kd5 you can just use qt dot black for example we want it should be the pin should be so let me just import qt i can just say from pi q t dot q t core import q t so for example q t dot black now if you see in here uh let me change the black to for example you can just use another color for right now for example i can just use yellow okay now you can see that uh cannot find reference yellow in qt now if i run this you will see that i am receiving error in here you can see that it's not working it's because because in qt and pyqd56 we cannot use like this according to the uh this rule that all named enums are now implemented as a subclass of the standard python you can find the so let me just if i can find uh for example uh you can see that in the brush styles we have brush styles in here now for the brush style if you if you want to use you can just use qt dot brush style we will use this and for the color uh also if i come down uh okay yeah now yeah this is now for this we need to use global color and after that we can add this so now i can just say qt dot global color and after that i can just use for example yellow okay now if i run this so you can see that this is changed to yellow and so let me just change this to for example black and if i run this you will see that this is black also you can add the pen size in here so for example the pen size is five and also we need to use a pen style so before this we can directly use qt for example dot uh for example solid line like this solid line but now we need to use dot pen style dot solid line now if i run this so you can see it's solid line i can change this to uh dash dot line and uh uh you can see it's changed to this now this is the big difference between pi q t5 and pyq d6 so now uh also uh you can set the brush for the painter so we can just say painter dot set brush and then here i can use cube brush and for the cue brush now first we need to give the color so we can use qt dot glue work global color dot green and after that we need to use the brush style now for this as i've already showed you now we can use qt dot brush style dot for example solid pattern or so first let me just use a solid pattern and now if i run this you can see we have solid pattern and we can change this to up another one for example dry cross pattern and this is another type that you can use for the brush now we're going to draw ellipse using uh cue painter class so now i have already opened cue painter q pin and q brush also uh i want to import uh qt i like this and after doing this let's create our paint even uh method in here and we don't need this and let me just give it a so the first thing is that we need to create the object of cue painter class in here and after doing this uh now we can draw our i can just say painter dot draw rect and so not rigged but ellipse so draw ellipse draw ellipse and in the draw ellipse uh you need to give the for example the x and y position and also uh the width and height so i can just use hundred and hundred uh 400 and also 200 now if i run this so we are not seeing oh i forgot to add solving here and now if i run this you can see that i have an ellipse in here uh now let's just add pane uh so we want to just add painter dot set pin and we want to set the pen and we can just use q pen first we need to specify the color so qt dot global color dot for example yellow and that it should be five the size of the pen and the pen style we can just use qt dot pen style dot solid line now you'll see that we have like this ellipse also we can set the brush so painter dot set brush q brush and first we need to use qt dot global color dot green and after that we need to use the brush style security dot brush style dot for example we can use uh another one like densely pattern and let's just run this so you can see that we have like this ellipse okay guys now we are going to draw uh our text now how we can draw text so for this i have already imported cue painter class and now we need to just add the paint event so like this not paint engine but it should be paint uh paint event and so def paint event uh and so now let's create the object of cue painter class so cue painter and after that we can just use painter.draw text draw text and in here you can give the x and y position and also the text for example we can just give a simple text in here and if i run this so you can see that we have our text in here now you can add some styles also for example you can align your text so for that let me just first create a rectangle here for that we need to from pi q t dot qt core uh we are going to import q rect and also we're going to import qrectif because we will need this also now uh and here we can just say qrect and here you can give the positions for example the the left the top the width and height so we can give for example 100 150 250 and also 25 so left so it's left top and also we have width and height now after doing this now we can just say painter dot draw rect and we can add our rect in here so wrecked now let's draw our text so painter.draw text now we can add our rect in here wrecked and now we can add our uh alignment so we can just use first let me import qty now in pi qd5 it was you can just directly you can use qt dot for example align center line center but in here we need to use alignment dot align center and now we can give the text in here so you can just give it a text like this okay now let's run this now you can see that we have our text in here uh also you can add some html to your text for that we need to use q text document for rendering html and for that we need to import that so q text document so it's related to qt gui now let's create our document and i can just say q text document and after that let me just create another rect so i can call it trick 2 and we can use q rect f so as we can give the left top and also we can also you can give the width and height so 250 250 and now we can say document dot set text width we can add our rect to dot width now we can write our html so we can just set html so for example i can just first i want to make it bold and i can just say uh welcome to pyqt course and now after doing this we need to just set uh document dot draw contents and in here we can add our paint uh our painter so our let me just bring these in here and we can add our painter and also our rec 2. so now you can see that in here we have it's bold for example i can do for example i want to add itech it should be italic so i can just say let me add my name so now you can see that we have uh uh italic in here and let's add more in here for example i can just add font and font size to we can give a font size and also we can give a color color red let me close the font in here and we can just say enjoy from the video from the course and if i run this now you can see that we have enjoy from the course

Channel: Parwiz Forogh

Views: 40,085

Keywords: PyQt6 Course For Beginners [Python GUI Framework PyQt ], PyQt6 Course For Beginners, Python GUI Framework PyQt, PyQt course, Python GUI Course, python gui with pyqt, python gui with pyqt6, Python (Programming Language), PyQt (GUI Framework), PyQt6

Id: ot94H3-d5d8

Length: 189min 19sec (11359 seconds)

Published: Fri Mar 26 2021

Reddit Comments

[u/International-Sky-56]

It’s criminal how there’s little to no quality PyQt tutorials and courses.

[u/catorchid]

Watched the beginning and liked it, so upvoted and saved it to watch later (yeah, right...).

I just started watching it more seriously and while I didn't go through the whole 3h+, I can say that it is very well done.

These are the kind of tutorials you want to see here. Heck, these are the kind of posts you want to see here! Even if you're not into GUI coding, it puts you in the mood that can tolerate 25 posts about "my first image-to-ASCII converter", 50 "guess my number" and 2 "Why Python is Stupid".

A breath of fresh air.

Good job, mate.

[u/nodswal]

Cool :)

[u/Immediate_Solid3939]

I can't seem to change the window icon, with the exact same code in the video. Going on stackoverflow didn't help either, it just doesn't change