PyQt5 QtDesigner Login and Signup Forms tutorial: for COMPLETE beginners

okay hi everyone welcome to a brand new tutorial so this tutorial is specifically following the pi qt5 gui library for python and we're going to learn how to make a login and a sign up form so what you can see right here on my screen is the login form that we're going to make just in a minute and this is basically what we have so we have somewhere to type a username we have somewhere for the password so we can type a bunch of letters that won't even show we can't choose to log in if we do not have an account we have a button that will take us to a sign up form and what we're going to do is that we're going to learn how to build these two different forms and how to sort of navigate navigate between them now one thing to note is that this tutorial is for complete beginners so if you are completely unaware of iqtv5 then that's completely okay because you will learn everything that you need to learn in this video so all right without further ado let's just get started and i'll start in a minute okay so starting here this is an empty pie chart project now you don't need to know much about pycharm to be able to complete this video because mainly python is just an ide for python but you can use virtually any text editor that you usually use for python coding all right so whatever you're comfortable with this is definitely just a personal choice now with regards to actually installing pi qt5 as well as pi 5 designer we'll get to what that is in a minute i have a video done specifically for that purpose now the video is three or four minutes long i believe so i do feel it's best to watch that first so just take a break go watch that three to four minutes just so you can be able to install by qt5 and then we can get started all right so when you install pi qt5 and pike t5 designer according to that video you're shown how exactly to launch designer now to launch designer you just simply go to your search and just designer and you would run this command and you'd wait for designer to launch now you can obviously close this alright so this is what designer looks like as soon as you open it this is where we're going to create our forms using a sort of drag and drop type of software instead of having to code the position of every single button alright so how do we create our first gui so let's just say dialog without buttons and we say create so this is what we have initially so let's just move it here let's just sort of change it i'm actually going to specify the width and the height so here right here if you can see where i'm pointing with my mouse this is where you would specify the width and the height of your dialogue now i know this looks scary there are so many different buttons different numbers don't worry just ignore everything everything that's important i will cover in this video and there are some things that you can actually just ignore at least while you're still a beginner to intermediate person alright so i'm just going to specify the width to be 480 pixels and then the height to be 620 which is i think appropriate for a login form all right so let's just say so let's just save this right here so we're going to name it login dot ui all right so dot ui is the format for pyqt5 ui files and this is what we're basically going to be using so this is our form so far not too exciting i know but then let's just start designing so the first thing you'd want to do right now is probably change the background so you can let me just actually walk you through it you can right click here on the background and choose change style sheet now i'm not sure if you're familiar completely with css you really do not need to be so you do just have to know a few different um things such as background color font color font size just so you can actually personalize your form but if you do not want to do that you can definitely stick to the colors and default fonts and sizes that piquet5 provides but let's just change a background color so like i said you would right click here and choose change style sheet then you would go here where it says add color and you would choose background color now what do you want your background color to be now i do have a nice suggestion and that would be the hex number 363636 which is the sort of dark mode grayish black that most applications sort of use these days and this is what we have so this is basically our gui for now now these dots will obviously not exist in the form itself if you want to see how the form would look like without the different dots and sorted grids that you have you would just go to form and click preview and then you would see sort of a preview of the gui that you have so this is comparing what your app will actually look like versus how it looks like when you're sort of editing this gui all right now let's just start by adding a title now here we have a bunch of different widgets and things that you can add to your application now you don't need to be familiar with all of these i suggest a good starting point being buttons text fields and labels so let's just talk about each one and what is as we go so labels so i'm searching here i chose a label a label is basically some text written on the screen that isn't really interactive you could say so it's just some text in a certain place so rather than have somewhere where your user can type this is something that you select as soon as you start so let's just say login all right now obviously this is tiny this is black it does not look good which is why we're going to change the style sheet so going again change style sheet and we want to change the color so we specify the color to be and we add a color so let's say white but not completely white so it can kind of offset the color that we have if you choose apply you can see the color change right here now obviously we also have to change the font so font size and we can just say 28 is okay and then we can apply and i know this seems weird but you just stretch it out and put it in the center as center as you can really and there you go so this is now you have a title now i know what you're thinking maybe if you're you don't know css you're a bit intimidated by it then don't worry like i said you only need to know background color font size and font color that's pretty much enough to get you going at least for the first part i can make a different video on actually styling pi qt5 different sort of widgets and maybe that would be more in-depth about the css components that go into styling pi 2d5 so let me know down in the comments if you're interested in that sort of video so i don't want to make it if no one's interested so let me know and if you are i'll definitely get on it all right so this is what we have so far we have a title now obviously we need some fields where we're going to input the username and the password and then just sort of confirm or log in so let's just go back here and let's put a uh another label actually so let's put a label for username or email can call this email actually so email is good and we can also style it so we can change the style sheet so let's say font size and we can have a font size of 15 let's just apply yeah it seems reasonable and a color of let's just add a color i can choose this sort of magenta right here because these colors kind of match my channel close enough it's not the exact magenta i have on my channel so here we go and now i have a email label now what do i mean by this email label i'm sort of specifying what would go next in the field that i'm going to put so then we're also going to search here or we can scroll actually let's just get to know things where we have input widgets so input is where the user is going to be inputting stuff so line edit is basically what we want right now now does this look like what you want it probably is so this is where we're going to allow the user to type their email so we can put this here we can move email just slightly upwards and everything else is sort of changing things around all right so this is what you have and you can even make it bigger smaller like this or maybe just smaller like that or wider this is all up to you this is a design choice at the end of the day now let's just preview things so let's go form preview again so this is what it would look like to your user this is what your user would see so here i can type an email so dummy mail at mail.com so we can make this font bigger actually and a different color so same thing we can change the style sheet we can change the font size and we can make it perhaps 14 um and then the color we can make it white or the sort of grayish creamy white that we have going right now and now we can apply all right so now if we go and we preview now we can type things like dummy mail atmail and that that seems pretty legit so this is much more appealing all right so now that we have an email field you can actually just copy paste these so copy and paste and then you would drag this and you'd place it in a strategic location and you would write password right here now why did this okay that was password so i had clicked on the wrong thing so this is the password we can actually even separate these even further so you can use your arrow buttons for more accurate movements on your on the grid of the gui so that's basically what we have now now how are we going to actually let me just preview how we're going to actually make the password hide the characters with those little password dots that you're used to well we're going to cover that in a minute so no problem and we'll do that from the code itself and not through the gui design all right okay so we have the field now we just need a button to sort of confirm that we are logging in so if we just search here or you can type in the search bar button so you choose a push button and you would set it probably here at the corner now obviously the color isn't amazing so let's also change the style sheet we can change the background color and make it uh let's say a7 a8 a7 and we apply so this seems like an okay color and the font we can increase it so font size and we can make it 14 and if we apply and we can just make the button larger now this is way too bulky so i mean whatever you want all right so we can put this here so this is the sort of login form that we have let's just preview it and it's pretty solid you can even change the font color here so you can change the color to something else if the black is a bit off-putting but i mean this isn't really a taste sort of tutorial all right so that's what we have right now now what are we going to do next so we sort of designed the form for the login part there's also the sign up part that we're going to design but we'll get to that in a minute let's first explore some code rather than just keep on designing using designer so let's go to python so this is pycharm i now have a login.ui file right here so within my project because that's where i saved it now if i just create a new file so a new python file let's just name this main dot pi all right so the first thing we're going to do is that we're actually going to perform some input and imports so imports this we're going to need sys which is the system folder for python because we want to be able to launch an application with it then we're going to say from pi qv5 import pi q no it's actually qt widgets i'm bringing this these days all right then we're going to say from pi 85 dot qt widgets import queue dialog and q application all right now you can actually use the iv to import these but i like to get them out of the way so it's like it's a personal preference now this load ui file is what's going to actually connect your application to these guys all right so now that we have the imports out of the way we can actually begin so let's create a class so you need some python object oriented programming in this case because you need to be able to treat the different sort of dialogues as a class so class login cue dialog meaning this login object right here is descended from queue dialog then we're just going to specify a default constructor and we're just going to say that this is from just setting things up all right and now we can actually start so i want my login object to load the ui as soon as i launch it so when i create one it would load a ui called login dot ui and this function right here is with a function that will actually open up the screen so this thing that i just designed i'm sorry so this thing that i just designed right here this will be what is loaded when i call this load ui function all right now let's actually just understand what's going on so we have this we have these things but we need a way to be able to reference these fields to get the text from them and reference the button to check that it's clicked let's just name them so i want this field to be called email i want this field to be called password and i want this field to be called i just realized i kept this as push button so let's just call it login and i want this field to be called login button all right why am i naming them because i need a way to refer to them from the python code now because i've already loaded the ui here's what i can do next i can simply just say self dot login button meaning i'm referring to login button as if it's a attribute for this class so by loading the ui all the different objects within that ui are now attributes for this class so self.login button dot click dot connect now what does this function mean here i'm saying that when this login button is clicked then take me to this function connect me to it and this function is going to be called um login function all right so what does login function do so it's a function that means i have to actually create it login function and take cells as an argument all right so this is the function that's going to happen whenever i create the button so basically when this button is created what happens then what happens then is i actually want to log in now in this tutorial i'm not actually performing and logging in because that actually involves connecting to a database or authentication system you will see that in the next part of this tutorial so this part is completely centered around the graphical user interface part of the of building the pi qd5 form and then the second part will actually be applying a firebase authentication to this form i separated them like this because just in case someone is not really interested in firebase they can just follow this video and ignore the other one all right so let's just ignore that for now so what am i going to do here i'm just going to say email is equal to email self dot email dot text so what i'm saying here is that i want to take the text from the email field so from this field right here i want to take whatever is written here inside and i want to put that in a variable in python code and i'm going to do the same for password i'm going to say self dot password dot text and now because i'm not doing any logging in i'm just going to print a function so i'm just gonna say successfully logged in with email and then i'm just gonna concatenate the email that we just took and password and concatenate the password all right that's basically it for sort of determining the dynamics of this class for now now how do we actually launch this application so exiting the class going back to our main actually so we're just going to create an app so an app is a q application that takes into account and as an argument sys.org all right then what we're going to do is that the last part is going to be app.execute and the function looks like this all right so don't just worry yourself too much about this if it seems confusing there is no problem done you want to create a main window or any sort of variable name and create a login instance so an instance of the login class and then you want to add that to a q stacked widget now i'll explain what that is any minute but let's just create widget and we say it's equal to qt widgets dot q stacked widget so what the stacked widget is is that it's mainly a stack of different dialogues so you know when you're on an application you want to switch between these different screens to do so in piquet5 you put all of them in a stack and then you would flip by this stack by incrementing the index and changing this screen and you'll see it more in action when i actually attempt to jump between the login screen and the create account screen so let's just say it's a q stacked widget and it contains we have to add widget dot add widget main all right okay main window and the last thing you want to do is you want widget dot show one other thing that you can do is that you can widget dot set fixed width and we said it was 480 and widget dot set fixed height and it was we said 620 so i'm just doing this so that we do not allow the user to change the sort of size of the widget let's just actually run it so let's run all right and this is the form that we have and we managed to run it from the python application so this is what we have this is the code that we just made let me just minimize this and this is our running application so we can create a fake email at email.com and then you can also use the tab key to actually move between these fields i think is really cool that it's already built in and then you can create a password and just call the password password now we haven't actually done the thing where we hide the password yet but we'll do it in a minute so now if you press login you go back here and it wrote i actually pressed it twice i think so if you press it another time yeah so it would print successfully logged in with email fake email fake email at email.com and password is password so this is sort of we just did the first of our forms all right so one more thing that we want to do that we want to actually uh change the way the password is shown so we say the following self dot password dot set echo mode then we say qt widgets dot q line edit dot pass dot password all right that's basically it let's just run it again and make sure that this works so let's just type some stuff and here we go we have the dots in the password so that's pretty much it now you actually know what we have for the login part we just created the form we created the email part we were able to get the text from the email field get the password hide the password and when we press log in we would print a statement now what we want to do is i want to be able to jump from this screen to a create account screen when we have a new user so let's just go back quick to the designer and add some new functionality so what i'm going to do let me just move this and what i'm going to do is i'm going to get the label and i'm going to type the following don't have an account and just stretch this out so we can see the whole phrase and fix this capital o right here all right so we can also change the font color so we can actually see it and we're going to choose white i'm just going to save this as color and we can apply all right so what we need here is another button and that button is supposed to sort of take us to the other screen so let's just create a push button and actually just say create account click here and we can also just reformat this so let's just change the font uh the color i mean for the font and let's just add a color and just go with white apply this and let's keep the actual button color as is so let's just all right okay so now that we have this we have this sort of laid out let's just name the button like we usually do so we need the button to be create ack and basically this is the form that we have so if we go back here we run it it should look pretty much the same so we have a button now but we don't have any commands as to what happens when we click this button so let's actually fix this and we have to create another form so what i'm going to do is i'm just going to file save as and create a sort of same idea with this by saying create act dot ui so now i have sort of two identical let me just open the other one keep them side by side so i have sort of two identical different forms what i want to do is i want to make this one into a sign up form which is mainly for creating a new account so moving this all right so obviously i don't need this part right here i can just delete it and i can just rename this to sign up now if you want a nice touch it would be nice to just have a second one of these and just move it where you need it to be mainly because usually we have a sort of confirmed password thing so confirm pass let's call it now why does this type here all right so confirm pass and just stretch this you can even make these smaller they don't have to be consistent among the forms so just make these smaller and just make this larger okay okay so now this is what you basically have now let's just rename this button to sign up button and now this is the email email because we sort of duplicated it from the first uh different the first form and then here we can say this is confirmed and like we said we like to name our different elements of our glue so that we can access them through the code so now we're just gonna do pretty much the same thing so let's just have a few lines here and we're going to create a new class so this class is going to be the create act class and where it's also going to be a queue dialog we also need a constructor function we need a super create arc self and then we initialize then we load ui create what we name it create act dot ui all right and in that case we named the button so what did we name the button actually sign up button so let's go back self dot sign up button dot clicked dot connect now we just self dot we have to give it a function name so create a function all right so same thing that we just did then we create a new uh function called create act function so if you're not keeping up it's essentially the same thing that we did in the first part so for now it's all the exact same and what we're gonna do we're also gonna take the following so email is going to take email.self.email.txt so from the text field which is the email so this one then we're going to check whether these two passwords are the same so let's just have an if statement right here so if self.password.txt is equal to self.com firmpass dot text this is text then you would say password is equal to self.password dot text and then you would have this print statement so like i said in the part two of this video um created back with email so any part two of this video i would have a sort of actual authentication word and password all right so for now this is exactly what we have now here's one minor problem you can't really get there so if we run this again so we have the login part we have this button but we haven't really specified something for this button so you really can't go to the other thing so here's what we're gonna do so we're gonna add a line here all right so we're gonna say self dot what did we name that button dot create ack or let's say create act button just so we can uh differentiate between different things here and not actually mess anything up so create a button dot clicked dot connect self dot go to create and now we have to create another function within this class so that go to create self yes and what we need to do here is that we need to initialize a new create ack instance and we're gonna add that to our stacked widget so widget um dot add widget create ack and now we've added to the stack widget we need to actually move an index in the stacked widget widget dot set current index um to widget dot current index plus one so we're incrementing the index to actually move forward in the stack and now i believe we can actually do it so if we click here create account now we have the other form and we can type a new email at email we can have a password which is hi i also did not put a hi hi and then sign up since they're equal we get the actual printed out thing and so we have successfully created act with email now to actually hide the password you just have to do the exact same thing that we did here so i'm just going to copy it and we have one for password and have one for confirmed pass now a nice touch would be to actually after printing that you successfully created an email you actually want to go back to the login screen so just say login is a login instance and then widget dot add widget login and then widget dot set print index widget dot current index plus one and now you can be able to actually go back after you're done creating an account so let's just create account sign up and then we say email email whatever then you say password and then pass we confirm the password and then we sign up so it prints the thing and takes us back to the login screen where we can continue to log in with the same credentials we just created so thank you very much for watching thank you for staying until here and i really hope you enjoyed this video i hope it was useful and beneficial for whatever application you plan on making with python and python leave a like and a comment if it really was useful and thank you very much for watching stay tuned for the next one and bye

Channel: Code First with Hala

Views: 42,958

Keywords: python, pyqt5, pyqt5 tutorial, pyqt5 tutorials, python tutorial

Id: RL9nGmv3uSU

Length: 30min 47sec (1847 seconds)

Published: Fri Jul 17 2020