JavaFX Login and Signup Form with Database Connection

hey everyone welcome to wic code where in this video we're going to be building a javafx application that is a login and signup form so you can log in and you can sign up and what this also has is a database connection so specifically it's connected to a mysql database so if we go into here into mysql workbench you can see we have some of the users that have already signed up so for example if i go in here this is the login page and we already have say witcode as the username and subscribe is the password if i do wait code and then let's get it wrong actually and i do something like this log in we get an error saying the provided credentials are incorrect and then say if we do it correctly so i do subscribe you can see we have welcome wic code which corresponds to the name there and your favorite youtube channel which is also stored in the database right here under favorite channel you can see we have wic code or someone else and then let's log out and now also say we do say if we just press log in like this it'll say provided credentials are incorrect because we have nothing filled in and now let's show you the sign up form if you go into here let's say we want to create a user let's just show you right now if we just click sign up please fill in all the all the information to sign up so there's a bit of error checking and if say we try and take a username it's already taken so we try and take wait code let's do whit code and then subscribe to or it's just a different password press sign up you can say you cannot use this username and that is because this username is already in our database and we don't want duplicate users but now let's do a different one we have wick code 2 as well let's do wic code 3 and then subscribe to and then let's press sign up now it'll say welcome with code 3 and your favorite youtube channel is wic code and now if we go into mysql workbench and we select our users you should be in the database so let's do that real quick you can see that now we have wait code 3 subscribe to and wait code in there and then of course we can just log out and yep i believe i showed you everything then sign up and log back in but so this is what we're going to be building in this video but so let's get started on making this project so the first thing i'm going to do is i'm just going to create a new project so i'm going to be using intellij for this video but you can use it in whatever ide that your text editor that you want to use but i'm just going to be using intellij and we're just going to start a new project it's going to be a javafx application i'm using java 8. even though it's 1.8 it's still version 8 and then we'll do next and then let's just give it a location so now our project is set up what i'm going to do is i'm just going to make the folder structure so if we go into here and we go into source this is where we're going to be using the majority of our things you can see we already have a controller main an fxml file but other things that we also need is we need two more controllers one for logging in and one for signing up you'll see more of this later but i'm just getting this set up for now we're going to do sign up controller another one this is going to be logged in controller and then we need to our fxml files to go with that so we're going to do fxml sign up like this and then we're going to do another one and we're going to call it logged in and then we're also going to have a utilities class that's basically going to handle everything with our database connection so we're going to create another class and we're going to call this db utils like this and now let's just set up our fxml file so they're using the right controller and this can be done you can see down here it's looking for logged in our package of course is sample so sample right here but ours is logged in controller so before i logged in fxml and then for sign up it's looking for signup but ours is sign up controller and now the next thing that we need to do is actually establish a database connection and to do that we need to download something called jdbc i'll leave a link in the description to a video i made on how to set up and it goes in depth on how to set up a java database connection with intellij so i'll leave that in description i'm going to go through it quicker in here i'm also going to leave the link to where you can download this jdbc driver but so it's this website here and what we're going to do this is what's going to be allowed us to connect to our database so we're going here and we're going to go to platform independent and then we're going to download this zip file right here and there's a little thing at the bottom that says no thanks just start my download and we'll download it and so now we've got our zip file downloaded let's go back into intellij let's actually make another folder i'm going to make it up in the main thing here and i'm going to call it make a new directory we're just going to call it lib and this is where we're going to house it you'll see in a second i'm going to do open in and we're going to open this in the explorer and then what we're gonna do is go to our downloads and you can see this is where our download is what we just downloaded from that website go into here we want to take this jar here copy it and then go back to where we were into our lib and we want to paste it in here so i'm going to do copy paste now it should show up in here so we have our jar so this is our jdbc that will allow us to connect to the database with our app java application but we also in intellij we need to set up with our project structure so we're going to go into project structure and then we're going to go to modules and then from within modules we're going to go over to dependencies and of course what our project is going to depend on is a database connection and we did this through our jar so we need to get this here so this is our current project javax login video and then we're going to go into lib click on this here press ok press apply and okay and so now we should also be allowed to form a connection with a database that we have in mysql and now the next thing i want to show you is actually setting up our database so i'm going to go in here i already have this one here but what i'm going to do is i'm actually going to drop it so i already have a schema if you don't have a schema go up here actually i'll just create one for this i'll do this i'm going to call it java fx video like this and then i'll show you how it's going to create it press apply and then finish and now it should be in here if not we refresh javafx video so double click on this so this one's highlighted meaning we can work with it with our sql queries that we make in here and now what we're going to do is we're going to right click on tables create table and the first thing we're going to have is a primary key and we're going to call it user id we're going to set to not null and also ai which means auto increment so every time a user appears this is what will represent each user and we want to increment by one the next i believe was user name and we are going to leave all these blank keep it at varchar45 next password keep that at varchar45 and then we had fave channel for the favorite youtube channel and we'll do that and let's just keep that the same as well and now let's do apply so we're creating a table user id and not auto auto increment varchar we did set that to the primary key as well yes primary key user id okay so this looks good apply here finish so now we've also got our table oh i believe i forgot to rename this table actually let's change this to users so our table will be called users apply this and it's altering the table and renaming it okay good do that finish okay so now we have javax video over users table which currently is empty so if we go in here and we do select all from users because this is highlighted it'll do it from there we press select everything's blank okay so we've got our database set up and we've got our javafx application allows us to connect to the database now let's start styling so we're going to start doing we're going to be using the scene builder to build these and let's start doing that actually also before we start this is there's a couple things i want to note is in here this is an image that i'm using in the sign up fxml so this computer right here is an image and this is an image right here and these are right here so we have lock logo so what i'm going to do is i'm going to take these from my old project so i'm going to copy see if i can just do it like this and i'm just going to paste them into here lock logo cool so now we have this yep we have that image in and then the next one we need going to here is whit code logo so copy this one we are also going to paste that in here so right click paste paste so we have those and then also the colors that we use here the hexadecimal keys for these which is basically just a way to make a specific color i've noted in a comment right here and so this is where we're going to be changing the text and background color of everything too but so the first thing we're going to work on is sample.fxml this here is going to be our main page so what this is going to be is this is going to be let me show you on this one is this right here so we're going to set this up and the way we're going to do that is we are going to use a horizontal box and then two anchor point panes so let's i think we can right click delete let's also minimize that so we get this view here and then in our containers because a horizontal box is a container that puts things um left and right of each other we'll drag it in there so now that's our parent element and then we have two anchor panes so and it's alphabetical so we'll drag one into here and then we'll drag another one into here like this and then let's just stretch this all the way here and now the first thing we have in here is an image so the way to do that is i believe it is just called image view and because it's an anchor pane we can just drag and drop in here so let's just drag this right here we'll change this sizing and everything later but um after we've added everything we can do what we're going to do is we're going to go in here and we're going to do switch document relative path and it's at and we just call it oh man that happens occasionally just go out go back in and we need to go back here switch to document relative path and it is code logo dot png there we go okay so we've got that site to appear and the next thing is we have the background color of this anchor pane and we can do that with a style so we're going to do fx background color and then the stuff the color that we want is from in here this yellow which is by this hexadecimal code and so go back in here and click on this again the background color and we are going to set that to that yellow like that make that a bit bigger and then we can just because it's an anchor pane we can just drag things around so let me go back in here click on image view centralize it a bit cool and then i think we just had two labels below this so let's go into not containers by control label drag that one below i believe it just said five five five five five five five five five five like this and then the font i used actually for all of these was not system but it is arial mt rounded bold so this is pretty tedious but i thought i made it look nice so then i do 18. let's do it like that and then beauty of the anchor panes we can just drag and drop things and then we have another label we can right click here let's just duplicate this one put it right below and then change the text for this to be code at support dot com cool put that here like this all right that looks pretty good and then the next thing we had is this over here so let's next thing we're going to do is work with our next image pane and let's do our image view again so let's just drag this one centralize it and then do the same thing so imagers are really tricky to get set up in here so i'll get discouraged but switch to document relative path so i'm going to do what's the name of this is lock logo.png so if we switch here and go back let's do lock logo dot png and then let's do this switch to docking relative path got rid of it but we will do lock logo.png and now let's um make this a little smaller and put it off centered a bit put it a bit more up we can do some fine tuning later but it looks good for now and then the next thing we needed was so we have a text field and a text field here and then another label i believe so let's go back in here and let's just close this down again this up i'm just going to copy these labels except this one is going to say username and then let's duplicate this one as well except this one say password like this let's align these like so and then we had uh text fields so those will be controls of course so if we go into here and go to the t text field and then drag this in here and then i believe the prompt text is what we want and the prompt text is or do we i don't think we actually had any do we yeah we did we don't really need any so i'm just gonna actually leave this blank but then let's change the font like usual to arial it's like one of my favorite fonts and then 18 drag this here let's just duplicate this for the password like that let's move these over okay cool doesn't look too bad and then the next thing we had to do was we need a button and then yeah so let's do a button now so that's also under controls so we will go to button place this in the middle and the text on that will say log in and then of course this change that to this change this to 18 and then also something we want to do is go into the layout another layout sorry we want to change the color of it so this will be the styles and this should be fx background color and i believe we had it let's double check yet we had it yellow let's go down here let's double check yeah background color and then her cursor to hand let's just just take this here and then we're going to go in here change this color to that let's change the size just by dragging it like this place that in the middle and then let's copy this one more time and just have here this will say not a user and then let's change the size of that a bit let's do 14 and then actually this is another button so this is a button but it's actually transparent you'll see in a sec so we'll move that here and so we can have some click and handler and stuff you'll see it in um in a bit when we actually start coding but then let's change this text to sign up and then of course this i believe it was about 14. and then to get this to disappear we'll do some more styling and we'll do background color and i believe we can set it to transparent awesome and then let's add another one we can do cursor dewy hand so it's a hand when they go over it let's also do the same with this add this cursor and so now when you hover it over it'll be a hand and then the last thing let's slide this over a bit and then let's change the color so from this we'll change this to just a blue text fill blue here cool sign up and then also i believe we had it underlined so then we go in here style i think we can just or underline right here we can just check underline cool so this is essentially the same as the front page so we've got that set up but now let's just give these ids so this let's go down here and the way i like to call them is first it's a text field and then it's the username so text field username is what we're going to call it and this one is text field password and this will be button login and this will be button sign up like that so those are all the interactive things because we use our ids to link them in the controller so then we can actually use code to manipulate them or get the text from here sign the user in and stuff like that so then we're going to start working on the next one so let's go to the scene builder and this is our logged in so this is when they're actually signed up so this will look like this so this one is a lot easier to make let's just make that real quick so the first thing is going to be i believe it's just labels and a button so let's grab our label let's change our font to arial round it bold like this and then let's do 20 want that to be big and we'll change the text with through code but for now let's just say let's just say welcome like this put that in the middle and then let's duplicate this because the one below it is also custom information of the user and it says it's about their favorite youtube channel that we get from the database so your favorite youtube channel is and i'll just say which code because of course it is so we'll do that and then we'll put that in the middle oh that was weird put in the middle like this and then we need a button so just here oh nope back in here just our classic button put this in the middle and of course our parent is an anchor pane again let's move this down a bit and then for a button this will say log out it's going to be ariel rounded bold and the size let's do 16 and then also the background color so our style will be fx background color and it's that yellow so i can't remember what that is but if we go in here up to this it'll be the same color as this let's go in here and then go to fx background color paste it in like that and then let's just make it a little wider okay cool looks good and then the final one is just this one right here and what this corresponds to is this is the sign up one so if we go here i believe we have it pulled up yeah signed up so that's all this so let's go in and it's the same thing again so this isn't going to be an anchor pane so let's delete this instead this is going to be a horizontal box so drag that in here and just like the other one it's going to be two anchor panes so drag that in and drag that in so we've got two let's just span that one all the way and in here we have another image view so it's the same as the old one so if we do drag this in oh and the tricky image part i think it helps sometimes actually if you open it up so if we open up have this open it seems like sometimes it registers i don't know about you guys but i have issues with this at times but so let's change this to document path let's do wit code logo.p and g and what do you know i think that is the key actually having this open anyway we did that and now let's have our other control it's going to be a two text fields so one of course we're going to centrally align both them oh no sorry not a text field but a label our text fields will be on the other side so label which is just pure text and this is again five five five five doo doo doo doo doo then four of those and then our family will be the ariel rounded bold again and then i don't know 16 or so oh right so let's move that center and then let's duplicate this once again oh the shrunk let's do wait code at support.com in the moment again we need to change the background color of our anchor pane and of course that's just with the fx background color do to do and then we will change that to uh what was it i always forget what the color is back into here let's just take this one so we'll get this and then a blooper still on the anchor pane background color awesome looks good and then i also think actually in our in our logged in i don't think we added an id to this because we need an id so we can interact with it in the code and our id is of course going to be button underscore log out okay so we got that and now let's go back in whatever what do we have in here okay so two so two more labels so let's go to our controls close this expand this out a bit let's get our label or actually now of course what i could do is just duplicate these to make life easier let's duplicate this set this and say username and then let's duplicate it again this is going to say password and then our controls the other ones we need are a text field this course so the user can enter information and then the font will again be arial rounded empty bold 16 and then let's right click duplicate this now we have it for username and password these are a little small but that'll be fine for now and now let's also just copy this so duplicate center this and say fave for it youtube channel like so and then i believe it's two radio buttons so yeah two radio buttons so i believe those are also in controls and that'll be under rq s radio button and so the first one your favorite youtube channel hopefully is wic code and then we're going to change the font of this again let's change the size to 16 hope you're seeing this coming together and then duplicate this again make sure it's still center and this is someone else so i don't know you like some other channel more but we have that like that and then i believe that was it it just says oh no we got sign up and then i'll remember we're getting there so it's almost time to start actually programming but so we get button make sure where's the center of the actual page it's under the actual page um this says sign let's do one word sign up and this is ariel empty rounded bold 16 and then it's this color again so i think this looks like a nice color so i like keeping them all like this and we will do down in here in our style we have fx background color paste this in then let's expand this out to make this a bit bigger and then we already and then we just have left so this down here is going to say if we can move up to the top already a member and then we're gonna have another button but it'll be easier actually just make a new one put it right here and it'll say log in which will allow us to switch back to the other page and so we're back to our page to actually log in that's what this is going to be used for and so let's change this again to arial um i think what is it 14 and then we also have our text fill to be a blue looks a little purplish actually so blue like this that's fine and then underline and then the last thing is we need to style it so the background isn't there and that's fx background color to be transparent cool and then let's just move this a little bit closer okay cool and so it doesn't look exactly it doesn't look as nice as it does on the one i showed you in the beginning but we are going to be focusing more i guess on the functionality of this because all this also is in my github so you can easily just download this and change it the way you want i just kind of wanted to show you the overview of how it's made like using anchor panes and stuff but if you want to actually dive deeper into it you can just look at the code that i have on github for this let me just center up these move this a bit over okay cool and then actually we didn't give these ids so let's go into here and this will be tf username this will be tf password this will be rb wait code this will be rb someone underscore else this will be probably getting the hang of it now button underscore sign up and this will be button underscore log n like that so then we've got those all linked up with ids i think hopefully we have ideas and everything if not we'll find out when we're working on it yeah it looks like we do because i did we just double checking if we added it to this here yeah we did okay so now we've done with all our styling so now we can actually start coding so now we're actually going to start the interesting part so now let's start coding and the first class we're going to be working on is our logged in controller this controller is responsible for the ui that is seen when a user is logged in so this ui right here and to start so let's go into log to controller and to start what we are going to do is we are going to implement the interface niche shelizable just like this and then if we hover over you can see we have to implement this method and so this method here initialize is called when we were able to interact with the stuff injected with at fxml in fat xml means basically that it's the widgets so let me show you real quick so in our class here this is why we link it by ids so we use the key the tag at fxml and private button on this page you have a button log out make sure we import this javafx scene make sure you import the javafx one import job x scene button like this and just to show you this what this max matches up to is the button here so if we go in here and we look at the code you can see we have button log out so if we go into our login controller we can make sure that these are the same so that they get linked up and the next what we also have is we have a label called label underscore welcome javafx scene import that as well and then we also have another label which is label fave channel make all these private instances too it's a good habit to get into so private private let's just make sure that these match up correctly so if we click on this here you can see we actually haven't given this an id so we will do let's label fave channel like this and this one is label welcome these have to match these in here so we can directly interact with them and that's why we use this at xml tag and then this initialize method will allow us to work with these basically they have been initialized we can actually work with our widgets by in this method here and so now what we want to do in this controller is set a listener on our logout button so that when it is clicked the scene changes to the login screen so if you can see if you remember from this gui say we are logged in like this i believe that was a username if we log in see when we click this button here log out we want to go to this scene here and so the way we're going to do that is we are going to do button log out we're going to set an on action it on action to it and that takes an event handler so basically this is just when the user clicks on it this action in here is what what will happen and we're going to do something it's not a method we haven't made yet but actually before we actually implement this that's what we're going to do is we're actually going to make another method down here that will be used to set users custom information when they have logged in so for example this is going to say we've signed in here like this we want them to display their favorite channel and let's save the database which is which code and also their username which is which code both of which are saved in the database and so this function will accept two arguments it's not gonna return anything so we're gonna set it as void and we're gonna call it set user information and the two arguments it takes is first is a string which is the username retrieve from the database and the second is their favorite channel that is also retrieved from the database and then all we're going to be doing in here is just sending a text so we've got our welcome label we're going to use set text it's just going to be welcome plus username i think we added an extra parenthesis in here and then the other one for label fave channel is going to be set text your favorite youtube channel is and then space fave channel and then let's add an exclamation mark here as well so what this is going to correspond to of course is these in here your favorite youtube channel is this and welcome this the username being this and favorite channel being this but so we won't actually be calling this function from this controller you'll see this is where we will be you'll be seeing where we call this in a bit but now let's work on the method to actually change the scene for our application and this method will be part of our utility class which is dbutils so in here which this class is essentially going to be the brains of our operation so this is a utility class that is going to do all the communication with our database including signing up a user logging them in and changing the scene to the correct one we will call this method that i'm going to make in here called change scene we're going to make it a static method as most methods are in a utility class and we're going to call it change scene and the first is going to be an action event event next is going to be a string which is the fxml file that we actually want to go to or the fxml scene or the scene that we want to transition to which is represented with an xml file the username that we want to pass in case we're passing custom information and also the user's favorite channel both of which of course will be used to be displayed in our controller and stuff that we've made here so we can pass the information into this method and then title here is going to be what's passed in for this so we have welcome up here you can see if we log out it says login so that's something we're going to be doing that as well but the first thing we're going to do here is create a variable called root that is of type parent so we're going to call parent root set that equal to null need to yep it's java fx scene parent so we import that like that and so parent is a base class for all the nodes that have children in the scene in other words this variable essentially be our new scene or display to the users this we're going to fill it up with information and that is actually going to be the scene in here that is displayed and then next we're going to do a validation check whether a username or favorite channel were actually supplied as arguments to this method so we're going to say if username does not equal null and also fave channel does not equal null then we're going to do stuff in here because basically what this is saying here is if the user has signed in if these values are null it means that they're just switching from the login scene to the sign up scene so say they're going in here and they're just switching to sign up or log in so if the user was actually logged in we would pass in their username and favorite channel and stuff like that so we do that and log in again and we actually log in we know we're passing information that will be displayed in our scene so if the user is going to the logged in scene we want to send information along with it specifically the username and their favorite channel what we're going to want to do now is create a variable called loader that is of the type fxml loader an fxml loader essentially loads the scene from an xml document or it creates the scene from an fxml document and so we're going to surround this in a try catch we're going to do fxml loader just call it loader equals new fxml loader and then we're going to do dp utils class dot get resource and it's going to be fxml file so the fxml file that we want to load or the one that's passed in this method is going to be the one that is loaded and changed into a scene next what we're going to be doing is turning our fxml file into objects that can be displayed in our scene and this can be done using the fmxl loader load method so this loads the objects from our fxml file so what we're going to do is we're going to set the parent loot root to loader dot load just like this so we can pass the object that is returned into our root variable now because we want to pass the username and favorite channel to a different scene we need to get the controller that we want to pass the data to and the controller that we want to pass the data to of course is this logged in controller here because this is where we're actually going to be setting their username and their favorite channel so let's go back in here and the controller we want to get as i just said is a logged in controller i'm just going to set that equal that and then we can set this equal to loader dot get controller and then after we've done that all we have to do is just call the method so set user information and then we'll pass in the username and fave channel and we already checked that they're not null so we don't have to worry about that and then the last thing we need to do is just we need to catch an exception and i believe it's an input output exception and i'll just call it e and we'll just do an e dot print stack trace so that's just if anything went wrong and now on the other hand so say we go here and do an else if the user just wants to switch on the login to sign up page then we're just going to load the fxml file without retrieving the controller so we don't need to do this because we're not going to be passing custom information because let me show you this because all they will essentially be doing if there's no custom information is they're just switching scenes like this this is the signups or login scene sign up scene just like that so for this all we want to do is just turn the fxml file into a parent that we can display with on our stage so all we have to do then is just set root equal to fxml loader dot load and then we'll just do dot get dbutils.class.getresource and then fxml file just like that and then of course oop and then we of course just need to catch the exception and it's in input output exception e and we're just going to print this track the stack trace so e dot prints track trace and then finally at the end of the method we need to get the stage so that we can set the scene or set the scene of the stage and we want to retrieve this from the action event that object that was passed to this method so this event right here which will be from a button being clicked is how we can actually get the stage and then set the new scene so the way we're going to do that is outside of this else statement we'll say stage just import it stage job effects stage we'll just call it stage equals and we're going to cast this to a stage it's going to be a double cast so then we're going to cast in this in here to a java fx node and what that is is we're doing event dot get source the event is the click so we're getting the source of the click and then from that we're getting the scene of that so or i put this in the wrong spot so this here then we're saying get seen so we're getting the scene from that and then from the scene we're going to get the window so it's a double cast it's a little confusing but basically we're just using the event or the button that was clicked on we're getting the source of that and then getting that scene and then the window which is essentially the stage and then we're casting it we're getting that as a node casting to a stage and setting it here and now it gets easier so we're just going to set the title of our stage to what was passing the function so we can do stage.set title and that will be just title and then we do stage this is the most important part set the scene and the scene of our stage is going to be we'll have to pass new scene the new scene object and it's root so that's our parent and then we're going to do 600 by 400 which is the width and the height so root basically we get the fxml file we turn into a scene that we can load and also i believe i forgot the parenthesis there so i have that one there and then of course what we have to do is we always have to show our stage so then we'll do stage.show as now let's go back into our logged in controller and let's pass this stuff in so log to controller here if the user logs out then what we're going to do is we want to change the scene to that logged in one so we're going to do dot change scene the event of course is the event here that is passed into this method from the logout button and then what we want to switch to is sample.fxml which will be turned into a parent and then displayed on our stage we're going to pass login and because the user is just switching scenes we don't need any custom information so these are just set to null so this is essentially going from this code and subscribe oh wrong button yeah username is already taken okay good we can only see that that's still working we go log in so this is essentially just you know you're going in from here but if we say we're already signed in and we log in this button right here log out is what we will click and it will take us to the scene so we're changing scenes we're passing the title to be logged in like this and we're sending it to sample fxml which is this right here and so now let's go back into our dbu tills class and so remember how this is how this is going to do all the communication with our database including signing up a user logging them in and changing the scene which we've already made the chain scene event but the next method we're going to do now is one that is going to sign up our user we're going to call this another static method void because it does return anything we'll call it sign up user and what it's going to take is an action event object called event pass a comma called event and that will use to change our scene and then the username that the user wants to register with so that's going to be string username the password that they they set and then also what they fill in as their favorite channel so when they're on this scene here if they're on the signup we're going to be getting the username the password and we're also going to be getting their favorite channel and then registering it when they click sign up but so then of course let's just make the function body and so then we'll declare some variables that are initially set to null and these are the connection to our database which is going to be connection java.exe and we're going to set that equal to null and then the next is going to be two prepared statements that we will use to query the database so prepared statement you'll learn more about these in a sec we're going to call it ps insert set that equal to null and then another prepared statement um yes and this is going to be check if the user already exists because if the user already exists we won't want them to sign up again we'll set that equal to null and then we have a result set which is good basically just something that returns or that contains the data returned from our database when we query it and we'll just call that result set and we'll set that equal to null so all this is going to be useful for interacting with our database and so if the user wants to sign up we first need to establish establish a connection to our database so i'm going to turn this into try catch and we're going to set our connection right here equal to drivermanager.getconnection and what it takes is three arguments the first so this method here let me just say real quick is going to attempt to establish a connection to our database because what we're going to do when we establish the database is we check if the user is already signed up or if the user that username is already taken and things like that of course we need to sign up to our or establish a connection to this database in here to do all that and so this takes three arguments and the first is the url of the database and for us it's jdbc colon mysql and then dash dash local host because it's running our computer on our computer the port is 3306 and then java fx or the name of our table in here which is javafx video so we need to make sure that it's this schema here at the very end and i called it that so it's java effects what was it again i forgot it's java fx video it's a video just like this sorry just check one more time yep there's a hyphen like that and then the next is the username of the owner of the database and so for me when i set up mysql or mysql workbench on here i just made it um the username to be root and then it's the password that you also made and for me i just made it root backwards or t-o-o-r so this right here should form a connection to our database or attempt to form a connection and if you want to understand more about this i'll leave a video link in the description where i went over this more in depth but for this video i'm also going to be glancing over this and so basically what this does is if this connection was successful we can create a prepared statement from this connection to query the database and what we want to do is check if the desired username or the username that they put in here to sign up with or is already taken and so to do this we need we're going to select everything from the user's database where the username is equal to the user's desired username so here we will do prepared statement check user exists we set that equal to connection dot prepare statement and then our sql statement will be select all from users which is our table name where username equals question mark and the question mark is where we are actually going to fill in the username that the user typed in that's what a prepared statement is it's basically better than a regular statement because it refers security purposes i'm not going to go too in depth onto that but just know that for this video and so then what we're going to do is we're going to do check user exists and we're going to set string and what we're going to do is the first parameter which essentially means this question mark here if we had another one here then that could be that would be like um ps check yourself exists dot set string and the parameter would be two because that's the second one but we're working with the first one and the username is what we want to insert in here so the username that the user typed in into this box to sign up with we're going to query the database and check if any of those exist let me go over this one and so that's what we're going to do from this prepared statement and so now that we've done that we just need to execute the query which returns a result set so we're going to do result set equals ps check user exists dot execute query and now if our result set is empty this means that the user does not exist and this means that the user can sign up with that desired username and to do that to check this is we use a method if resultset.is before first like this and the method is before first is used to check if the result set is empty is before first will return false if the result set is empty so if it returns true then this means that the username has already been taken so if the username has already been taken we can print to the console that the user already exists and we can create a javafx alert that notifies the user that they cannot use that username so i'm just doing systeml.print user already exists just like this and then we are going to create an alert alert and we'll set that equal to new alert and then we set the type in this constructor so it'll be alert oh if i can spell it right alert dot alert type dot error because there's an error in signing them up and then we will set the text to be you cannot use this username and that's because it has already been taken i won't say that for security purposes but i'm just going to say that and then i'm going to do dot show so we actually show it and on the other hand so outside of here let's have an else if the username has not been taken then we can insert this user into the database so in our else clause we're going to write our second prepared statement so that's the ps insert and we're going to set that equal to use our connection object again dot prepare statement and this time the sql will be insert into users and of course users is this table here so we're inserting into this table which currently has nothing in it um let me go back insert into users what we want to insert into it is the username password their favorite channel and then we have to specify the values which because we're using a prepared statement will all be user input so we're going to do question mark question mark question mark like this and then the values that we want to insert under a database of course are the username password and channel so we'll do ps.insert dot set string one and the first is the username and then we'll do ps insert dot set string second one will be the password and then we'll also want to set for three their favorite channel just like this and then of course we have to actually execute this prepared statement so we're going to do execute update i believe an update is for things like inserting or updating where it doesn't actually return something on like a select statement we're returning we're getting a result set because the database is returning something this is essentially just we're updating the database and now that we've added our user into the database we want to change the scene to the logged in page so they've done this let's say we sign up okay so on the signup page let me just make a crazy username and some weird password favorite use channel of course is wait code and we sign up and it of course when you sign up it takes you to the logged in page that says welcome you're signed in so we're gonna of course use the method we made up here change scene to do this so we are going to say change scene of course we pass in the event from the click but this time we're going to logged in dot fxml and then we pass the title will be welcome because they'll say welcome at the top and then we also have to pass in the custom information to be displayed which is their username that they made and the favorite channel so for example here it says welcome this which is our username welcome this our fav channel and welcome is the title up here and then logged in fxml of course is this here so let's just go back in here and then all we have to do is just capture exceptions that's why everything's red right in here so we have to do catch of course it's an input output exception e and we're just going to print the stack trace like this or so it's not an input output exception of course we're working with sql so this will be s ql exception like that and now everything's gone red which is always a nice thing to see and now something that you should always do when you're done with the connection to the database is close it along with the result set the prepared statements to release any database resources that the connection could be holding onto which would slow your program down and it's just generally not a thing to do and this should always be done or usually be done in a finally block so we have a try catch and then another block you can have is finally like this and the final block is executed no matter what after the try or catch block so if the you know the try um an error occurs and we go into the catch finally we'll always be executed if we go through try with no error finally we'll still be executed and this is good because we always want to free our database resources so what we're going to do for is in our final block we're going to check if each one of these up here is null and if it isn't null then we can close it down and these are closed with the close method so let me show you one we're going to do if result set does not equal null because if we did call this on it when it was null of course we would get a null pointer error and that is of course would cause a lot of issues so we're going to do result set dot close so this is how you close on result set and of course we have to wrap each one of these in a try catch there are other ways to do this but for just simplicity i'm just going to do that like this and e dot print stack trace and then we are essentially just going to do this for the rest of them so we're going to for the prepared statement and then the connection and also just to note the best order to close these in is result set then prepared statement and then connection so just keep that in mind but then we're gonna do close each of our prepared statements okay so now we have checked everything if it's an articulate null so we've worked with our connections our prepared statements and result sets and then closed everything at the end which is so we can free all our resources and now we've added the functionality to sign up user so let's work on the functionality to log them in and this won't be too difficult it's basically just different sql statements so let's make this function starts here so let's make a function here and let's call it public static again void and this is login user and it's going to take essentially the same things an action event so we can get the stage and everything the username that user is trying to log in with and the password that they're trying to log in with and then once again we'll import our or we'll use a connection initially set these to null we're going to use one prepared statement this time so i'm just going to call it like that and then of course our result set return from that and we will set that also equal to null and so once again let's just form our connection to the database so we can query it and work with it so i'm just going to get that from up here so i'm going to copy that paste that in here and then i'll just do the catch block now and that'll be sql exception e you don't print stack trace like this and so the query that we're going to be doing so the prepared statement that we're going to be doing so let's just set that up real quick uh prepare statement is we're going to be selecting the password and favorite channel from the table where the username is equal to the one that the user typed in so in our gui when they are in the login page and they type in like witcode we want to retrieve their password and their favorite channel because we want to compare it to the password that they blog that they put in here so let's focus on that so this will just be select password fave channel from our table users where similar to the other query in a way where username equals question mark like this and then you know the drill of we're going to do period statement dot set string and it's going to be this one question mark here the first one and that will be our username so find the password and favorite channel where the username is the one that the user typed in and then we're going to do we're going to get a result set from this so because we're selecting we're going to do period statement dot execute query and then once again we will check if the provided username is in the database and we will do this again by of course using of course again by using the is before first method if you remember from last time so if result set but this time we want to do the opposite truthy of this so we're going to do that and then if this and if you remember this returns false if there are no rows in the result sets we will say use we will print to the console user not found in the database like this but then let's create another alert equal to new alert and we're going to do error again like this and then we will set the context to be provided credentials are in correct and then we of course just show our alert like this so this is essentially if the user is not in the database on the other hand so something is returned or the user does exist in the database then we need to compare the password they provided with the one we have in our database and we will do this by looping through a result set and retrieving the password and favorite channel from the result set so on the other hand so a username was found we're going to resultset.next which essentially loops through the results even though we have just one i believe you still have to do this you still have to loop through it then we can get our password from what is retrieved so we can let's call it um receive password and then we will use result set so remember this will contain all the information that we got from the database based off the select query what we want to get is the string password and its password because that is the name of our column so in here we have the password column here so when it returns a result set which will essentially be this row we want to get their password and their favorite channel and so we will do that and then we can also do retrieved channel that's resultset.string and that's fave channel oh make sure you spell everything right which will be equal to this here fav channel so we have that like that and also i should let you know that this is get string because what these hold are strings if you remember when we set up this table i believe i can do actually right click here table inspector if we go to our columns you can see we have far char 45 our 45 was essentially a string this so when we are retrieving these that's why we are saying get string if it was like um say like get int for example that's because our user id column is an int so just know that's why we're using getstring that's not the only method that you can use now of course let's let's compare our retrieve password to the one that user provided so the password we retrieved from the uterbase the database where um the username provided was given we want to change compare that to the password that the user typed in here so let's go back into here and all we do to do this is we're just going to say if um actually we can do it in here i believe let's just yeah we'll say if retrieved password and because it's a string we'll do dot equals if that equals password which is the password of course that is passed into here when the user is trying to log in then we will do call the change scene event again and so we'll pass in the event so we can get the stage from it and this will be logged in fxml because that's the scene that we want to take them to and they've logged in so we'll show them the message welcome at the top and then we want to pass in the information so retrieve channel because we want to show their username and everything if they've logged in correctly and then on the other hand so the passwords did not match then let's just first let's just out print passwords did not match like this and then let's create another alert so alert once again it's type error and we'll do alert dot set content text to be provided credentials are in correct and then of course we always have to show our alert so then we'll do dot show like that and then of course with the sign up method so we have our try catch and the same way we did in here we need to close everything so we'll do that once again in a finally block so we'll do finally and we just have to check everything and remember the order is goes result set prepared statements and then connection so the first thing we're going to do rule set does not equal null and then repeat this for the others okay cool and so now this should be we just chuck it we have these three here and then we're closing them and this is our login user function of course we're done with that one now too okay so now we've basically we have finished our db utils class which is essentially the brains of our application and also i would say the hardest part to create now we just have to create our controller for the login page and our controller for the signup page so let's start with the controller for a login page which is just called controller.java it's the one that the project made when we just did file new project and javafx project but all we need to do in this is add the functionality for our two buttons once again let's implement the initializable interface and over ride that initialize method so that we can work with our injected fxml widgets so in here and then if we go into where is this i think this is called sample fxml let's just move it over here and then we can see go to scene builder our widgets like we have our code here button login and we have to match up these ids because also we have text field username and text field password so this is so we can interact with these but let's import them so we had at fxml and then private button don't import java awt because that's for java swing but we're using javafx so this one down here and then button and it's button underscore log in and then we're also doing at fxml private text field and i believe it was tf username then we had another one private text field and this is tf password like this and so the first thing we're going to do is let's just add the functionality to our button so we will all we have to do for this is button login login and we're going to set on action new event handler like this and then all we're going to do is because we have everything basically set up with our dbutils class we're going to do that it's a static method so we call the class name and then dot login user and we're passing in the event from the button we're going to get the text from the login field so we'll do tf username and then dot get text and then tf password get text just like that so we'll pass those in and that will do everything that we wrote in our login method so this is essentially when they're logging in here they'll click log in it'll run through our db utils class and check everything that we wrote in there to make sure that they can actually log in and actually if you can remember we actually did have one more button and it's this down here which is button sign underscore up so we also need to inject that in here so let's do this with the buttons we can group them and we'll do fxml private button and this button sign up and for this all we're doing is changing the scene so we can do button sign up set on action new event handler and of course we made all these methods already so we just have to call the change scene method pass in the event and then this is going to take them to the sign up page so we'll do signup.fxml and then we will make the title to be sign up like this and then we're not passing any custom information because the user is just switching scenes they're not actually logging in or anything and then let's repeat this for a signup controller so just go in here and once again we want to implement the initializable interface and then implement the initialize method like this and then let's inject all our fxml components so i'm going to get this i'm just going to move it over here and then go to scene builder and we have like um check whatever things called button sign up that's just you got to make sure these names match so like in this one we had button underscore sign up like that so make sure in this one it is i'm not here but at fxml private button and it was button underscore sign up like this and let's check the other ones and then we do our radio buttons and this was wait code i believe then we had another one that was rb someone else let me just double check yep rb someone else then we just have our text field so we have username and password cool so we've got all our fmxl started up and then let's just start with our logic and now the only real difference between our login controller and this one is the presence of the radio buttons and to associate our radio buttons together so these this is a radio button here it's basically just something where you can only have one clicked at a time and so we need to create a toggle group and then set the toggle group of each radio button so to be that toggle group so we can group them together so this is done through toggle group equals new toggle group and then we will do rb wit code dot set toggle group to be toggle group and then we'll do rb someone else and we'll set that not selected but set toggle group to be that toggle group too because this will make it so if you click only on one of these then the other one will be unclicked because radio buttons should be like that and that's why we have the same toggle but we didn't if they weren't part of the same toggle group then we could click them both at once they could both be filled in and then also initially we want the wic code radio button so rb wic code we want to set the selected of that to true which essentially means when you start the program which code right here will have it filled in now let's start working with our sign up button so once again this shouldn't be too bad so we'll do button sign up set on action pass in the event handler and so when it is clicked first we want to make sure that everything is filled out and if it isn't we display an error message so we need to make sure that each one of these fields and everything is filled out for them to actually attempt to sign up so when the button is clicked we want to get the text from the selected radio button and this will be inserted into our database as the user's favorite youtube channel so i'm going to do out here i'm going to say string i'm going to call it toggle name equal to we're going to have to cast it to a radio button and then we do toggle group dot get selected toggle and then from this we want to get the text so essentially what this will do is within this toggle group we want to get when the user clicks this sign up button so when we click sign up here whichever one of these is filled in so this one or this one will get the text from that and we'll set that to the toggle name and now we want to do is check if the username and password text fields are filled in if they are we can sign up the user however we want to use the trim method on the text retrieve from the username field because we don't want a username appear white space in our database so we don't want a username of say just like this or you know just anything with just a lot of white space so let's make sure that they aren't empty so we'll say if tf username.gettext and then we want to trim it and then we'll say call the method is empty or and we're checking if it isn't notice the exclamation mark there so we're seeing if it isn't empty and the password isn't empty so another exclamation mark in tf password and then we're going to do get text dot trim dot is empty so if those aren't empty then we're going to do db utils and that handy method we made sign up user pass in the event so we can get the scene from it the username dot get text and then we don't want to trim it here because say they their username is like multiple words like wait code is awesome we don't want to get rid of the white space in there because then when they try to sign up again it wouldn't be the same username we're just doing that so that they you know don't have just an empty thing like this and then we'll do username password dot get text and then for the favorite channel is we're going to pass in the toggle name and i don't have to check if this is empty because initially we're setting this one to true so something will always be passed in no matter what and on the other hand if they are not filled out let's output something saying please fill in all information and then let's do create an alert like we've been doing before so alert equals new alert it's going to be of the type error and then we will set the content text to be so it'll tell the user please fill in all information to sign up like this and then with your alert remember you always have to show them so then we'll do dot show and then finally the last thing we just need to do so this is where the button ends here is we just need to have um change the scene to a login page when they click that button so in here on the on the signup page if they click login we just want to take them back here and that's really simple to do because we've already implemented all that we'll do button login we'll set on action new event handler and then we'll do just the change scene method fasten our event sample.fxml and then um we'll pass in log in because i'll be on the login page and then we're they're not signing in so we're just going to pass null for these because they don't need any actual information set but so this should be the whole program so now is the moment of truth of pressing play and hoping that everything i wrote in here works so let's just fingers crossed let's see what happens okay so you can see we have it here um the reason it's this size is actually it's set here yeah so we don't want it this small we're going to do 600 by 400 is i believe what it was so let's close this also close this one so i don't get them mixed up and then let's press play cool and so it looks pretty similar so let's do kind of i'm always nervous about this part let's do this and let's do subscribe and let's press log in and so if something is on you can see it's unresponsive so something is unresponsive like this it usually means that we don't have our controller linked up of our fxml file so this is here controller and sample also each this is hello world we should change this to log in but so usually if you have like unresponsiveness like this means they're not linked so if we go into our sample fxml you can see yeah that we don't have an fx controller so our parent element or essentially our parent element right here is this hbox it's the outermost element and on those you need to set a property called fxcontroller and this will be sample dot controller for this because this is where we are working with all these elements and so this is why that wasn't doing anything so now let's close this and run it again first thing let's check this cool okay that's good so we can see we're flipping between login and sign up oh we're also having an issue on this page so let's go to sign up controller or signup.fxml let's go into our text it seems like we don't have in here i could have sworn i remember putting these in but so once again we need sample dot um this one is sign up controller so dot sign up controller and then my maybe it's gone with this one too might have been when we deleted these in here but so i'm going to go to text from the scene builder okay this has it so that one looks good all right now let's try and run it again we've got sign up login okay we didn't add a cursor to this but you can see the buttons filled in now too and everything you can flip between these sign up please fill in all our information okay that looks promising um let's log in provided credentials are incorrect and we're not saying like um giving them any more information because we don't want them to know for security reasons like if the username is already taken or if the password is wrong but the username is right so try and keep it as broad as possible that's just a side note but let's say so let's create a user let's do the usual with code subscribe favorite youtube channel and then let's press sign up so you can see when we clicked this we got an error and it said line 63. so there must be something wrong with our um statement here and you can clearly see that we just forgot a parenthesis it's really simple in these about autocomplete when using strings but so in into users these parentheses and then values these parentheses okay let's try this again okay now let's go to the signup page let's do the same thing quick code subscribe favorite youtube channel is wic code and let's sign up awesome welcome which code your favorite youtube channel is wic code and now let's actually go into our database check the users there awesome now we've got one user so you can see we've got one user signed up with a username password and everything and now let's log out of here that'll look good we can go back some of the styling is off of course i didn't spend too much time installing on this but i feel like you all can make it look the way you want and if you want it to look like the original of course it'll be in my github so don't worry about that but log in so let's try and log in let's get it wrong okay providing credentials are incorrect let's try it again okay cool but then let's fix it so let's do an e here awesome welcome white code your favorite youtube channel oh man okay this is promising and then let's do um username mic password123 one two three pizza and then favorite channel is someone else don't know why but let's sign them up welcome mike your favorite youtube channel is someone else awesome and then check in here and then we got our other user here and then just one last thing is let's sign in as him so mike the password is one two three pizza one two three pizza awesome all right cool so looks like everything is working so this was the a pretty cool video to make um if you want to see me make more of these let me know in the comments but or if you have any questions just let me know in the comments i'll try it back to you but i guess i'll see you in the next video thank you for watching

Channel: WittCode

Views: 8,197

Keywords: javafx gui, javafx gui login signup, javafx login signup with database, javafx gui login signup form, javafx database connection, javafx pass data between controllers, javafx gui and login form with database connection, javafx scene builder login form, javafx scene builder login form with database connection, javafx build a gui with database connection, javafx scene builder, javafx sign up form, javafx login form, javafx database connection form, javafx connect to database, javafx

Id: ltX5AtW9v30

Length: 78min 49sec (4729 seconds)

Published: Tue Jun 22 2021