JavaFX Tutorial | Login Screen with database connection (2021)

Video Statistics and Information

Video

Captions Word Cloud

Reddit Comments

Captions

Hey Everyone! Today I am going to show you how to create a login screen. We are going to design it using Scene Builder then code and build in IntelliJ as JavaFX application we are going to connect and validate the user againts a database table in MySQL well In Summary it is a simple Login Screen with Database Connection Alright let's start with IntelliJ I am using Community Edition 2021.1 New Project Here we pick Java FX > JavaFX Application then we check the Project SDK making sure we are using the correct version Next Name the project i'll name it PlutoPlanetNine Finish Let's check our project folder I got the two classes and a file we have Main.java, our Main program so to speak and we have a lot of reds, ignore them for now and we will address that in a short while. Here you see Sample.fxml Which refer to this FXML file It deals and handle our User Interface then our FX:Controller attribute assigned with the Controller class we choose. Controller class handle the User Interface initialization, events and more This is where the bulk of our code will reside Let's run this and see Here in Build and Run just assign the jdk version you are using. Apply. Run. And we got our first error package javafx.application does not exist This is because we have not added the JAVAFX SDK JARS yet. Normally you setup or config the project before you do anything But this is tutorial, I want to show the errors and share how to handle them. Now, to fix this Go To File > Project Structure... You see here the Project Information and the versions we are using Go To > Modules We can add them here, this is under Dependencies Click Add > Jars or Directories Just locate where you save your JavaFX SDK's in case If you have not downloaded it yet, see Description below for more details Ok now then just select the following JARS. Base. Controls, FXML, and Graphics Open now they are added. Click Apply and see Red ones at the back they are now valid Click Ok If we checked the FXML. it should be valid now too. Good Let's run again We have a new Error JavaFX Runtime components are missing This is because we have not added module-info.java and specify what modules we require and package to open. Let's do that. in Sample > Right Click New module-info.java and here we specify what modules we require controls javafx.fxml and last javafx.graphics these is all we need for now then opens this will allow access to our package Sample sample If you notice, these are the ones we have added in our Project Structure a while ago. the JavaFX SDKs Remember these JARS? Later we will add another for our Database connection but these are all we need for now Ok Let's run again. There you go. It run successfully. Now let's close this up and proceed to the next step. We are now going to Design and Build our login Screen To Start we will utilize what we already have. let's rename this sample.fxml just right Click Refactor Rename... Rename it as login.fxml Refactor Ok, we got it renamed succesfully and make sure that it reflects in the main.java as well. there you go A quick run, just to make sure, all is well. perfect. Close it and we Launch Scene Builder We are going to use this to Design and Build the User Interface of our Login Screen This is a visual layout tool that allow us quickly design User Interfaces In case you don't have it installed yet, see Description for download and install details. Alright From here Click > Open Project then we are going to open the login.fxml from our Project folder so basically whatever we do here generates code directly to login.fxml once we save our work. A quick run down for new users This is our Object Library which they are group accordingly Below here is the Hierarchy, which list out the objects we use, along their layout orders while in this side, we got our Properties, Layout and code related settings Ok now, let's work on our User Interface We start with Deleting this GridPane Replace it with BorderPane just Double-click to add see that below? it shows the sections as well now go to Layout Change the Pref Width to 520 Next we need AnchorPane Just Drag it down to BorderPane-Insert Left then another for Insert-Right there you go next adjust the Pref Width and Height of left AnchorPane 228 x 407 then adjust the right side 332x400 we are going to utilize the JavaFX CSS click this Style fx-background-color set the color you can put common colors like Red, Blue, White and couple more but for now we will use a HEX code just type #263F73 there you go Next we put a Label You can just type it here in the Library. It will show up as search result. Drag it over feel free to design and adjust objects around strecth this label end to end set Alignment as Center change our Font style and size Name it as Pluto set color to White set Effect as Drop Shadow Duplicate this Label 'Command Key' + D Rename as 'Planet Nine' Adjust font style and size to your preference next, we utilize Line object feel free to adjust and align it as well to your liking change the color to White Set Effect as DropShadow set Stroke Width to 2 then, we utilize Circle object feel free to resize and adjust it to your preferences change the color to light gray Effect as InnerShadow Stroke color shades of Gray Good then add another Circle Re-Arrange the Object Order there you go Set the Fill as Transparent Adjust the stroke color play around it and look for color you want this is just a static Orbit so feel free to adjust accordingly we need another Label, we can just duplicate this one Adjust font style and size Make it smaller and... put 'Copyright (c) 2021. All Rights Reserved.' this is just aesthetic Now it looks better Duplicate another label Put it here set Text as 'Secure Login' change Effect as InnerShadow Adjust the font size then change color good We need another Label call it 'Username' we need to increase the font size make it 14 duplicate this label just position and align it with username set text as 'Password' now we are getting close Before we proceed, change Themes to Gluon Mobile Light Go To Preview > Themes > Mobile Light Good then search for TextField Drag it over and align to Username then look for PasswordField Drag it over and align it to Password alright again just adjust size and position to your preference by the way PasswordField is just plain text, it just Mask the display, so the password does not show. next, we look for Button drag it over position it below and adjust size you can name it as Login then change the color to White We will just copy the Anchor Pane color and paste it over Background color then just paste it here there you go Let's duplicate this Button name it as Cancel need some adjustment here let's preview how it looks GO TO Preview > Show Preview In Window there you go Let's test the textfield and passwordfield. as you can see, password field mask the entry by default. that's good. close this One last adjustment, need to give more space in between thats about right adjust the buttons as well good then center them all allright then center them all Save your work. Set the Prompt text as 'Username' then next Prompt text as 'Password' Lets Preview it You can see the Prompt Text were set Close this Save it again. Now we are going to assign FX ID's, it will be utilized in our Controller later. Go to Code I have established my own naming conventions, you may use yours. for example, I name this as UsernameTextField I include Object type for Easy and Readable code purposes It seems long but it will be helpful in the long run next Here our FX ID will be passwordPasswordField Next will be the Buttons we follow same convention, name it as loginButton same thing with Cancel Button cancelButton there you go just a quick review making sure we got FX ID's now we go and assign a Controller as you can see those objects with FX ID's are listed in the Component then we need to assign a controller, that will be sample.Controller if you recall we already have a controller class named Controller under sample package. we are just assigning it Let's save it so the fxml will be updated now let's go back to IntelliJ and see the actual FXML file ok, now lets check login.fxml it have more lines now as we have added alot if you check here, we got the fx:controller assigned. sample.Controller which we apply back here and this is our actual Controller class which we are going to utilized next to work on these objects alright! Now we start coding our first stop is in main.java we need to change the window or Stage size it should match what we have set in the Scene Builder or what is in the fxml Select the BorderPane Go To Layout Copy the Pref Width and Height then change the values here which is b520 x 400 Let's run it and see there you go, all looks good we are going to change the color later right now, this is just a screen, with objects but no action or events Next, we are going to remove this Title Bar and then add action event for the cancel button to close the Login window. so we have a way to exit go to Controller we are going to use Cancel button in our FXML. so we need to annotate @FXML and if you notice IntelliJ automatically add an import here, but you can type it too. then private Button cancelButton Button is on red because we have not imported the Button class yet You can click Import Class here but if you are new or a beginner I really suggest, type it down so you become familiar. alright ok, it is now added again, this cancelButton is the FX ID of the Cancel button in our FXML. this one in Scene Builder this one if viewed as fxml Now we will create an action event method and call it cancelButtonOnAction Stage stage again you need to import the Stage Class I always recommend to manually type it out until you become so familiar. we will determine which Stage the cancelButton is then assign it to 'stage' variable and stage.close this should do it next we will assign this Action Event method in Scene Builder Select Cancel button then here in On Action, assign cancelButtonOnAction method. there you go so when Cancel button is click, On Action event will run this method this one save it if you checked the login fxml you will see the method in OnAction there you go ok, now we can run and test it out good click Cancel to close Good, it works as expected since we have a way to close within our Login screen we can now remove the title bar close this and proceed to main.java it is just a one liner, you just need to set Stagestyle to UNDECORATED. we just comment out the title, it is not needed anymore Let's run and check there you go let's see it with different background. alright, this is how it looks when it run as an app ok, lets segway here quickly as mentioned earlier, I will change the color to do that we just need to change the Left Achor pane and 2 buttons just copy the color looks good save it and now Preview alright close it up before we go back to IntelliJ, we will add a new label this will serve as sort of notification or warning depending on scenario Preview it looks good Now we need to make it a blank text by default A message will only appear depending on scenario assign an FX ID so we can use it ignore that warning save it check the component list there it is now back to IntelliJ here, we are going to annotate and declare the loginMessage label as well import the Label class good now we will create another action event method for login button let's test first the loginmessage label, make sure it is working along with the login button action event loginmessagelabel.setText let say "you try to login" now we go back to Scene Builder and assign the new method to Login button there save it switchback to IntelliJ and run it click Login button there you go, we got it I guess by now you noticed, i keep running every now and then it's because it helps you narrow the area and scope of possible errors let me adjust the login message a little bit save it run good now we are going to add a simple user input validation where we make sure that username and password are not blank. we need to import first a textfield and passwordfield class javafx PasswordFieldd they are in Gray, it means they were not use anywhere yet then here we annotate and declare our usernameTextfield and passwordPasswordfield we are going to put in place a simple user input validation using IF Condition where we ensure Username and Password are not blank so this will be usernameTextField usernameTextField getText() .isBlank() equals False and passwordPasswordField .getText() .isBlank() equals false then if it is true, then we put something here. let's move loginMessageLabel here allright then we copy here another loginMessageLabel and say Please enter Username and Password let's do a test run we will click Login button without any inputs ok we got our message in Red now let's try to put something and try to login and there you are, we got a new Message. close this We are now going to MySQL to create our table and insert sample data that we can use for our Login. Select the Database you want make it your default then Create a new table We just need here a primary key, firstname, lastname, username and password field you may use your own naming conventions on fieldnames set Constraints on them like not null or NN if you want especially for username set it unique or UQ as you dont want duplicate here there should only one username per account click Apply alright review it then Click Apply and Close Let's check our table it was created successfully it has the fields we need create a query so we can check the table SELECT * FROM UserAccounts ok then execute this as you can see we don't have any data yet we just need 2 records for now now let's Insert data that we can use for testing just change this to any appropriate test data you want you can copy this INSERT statement and you can change the data if you want then execute this INSERT there you go one row inserted we need one more just copy and change the data then execute this INSERT alright, we now have two Records in our UserAccounts table this is good to go, lets go the next step we are going to create a new class here in "sample" package Right Click > New java class Name it DatabaseConnection.java We will use this to establish a JDBC connection first lets import java.sql and it on error because we need to add this in our module-info.java before we can import and if you recall when we initially created our module-info.java i mentioned that we will going to add another and this is part of it then we go back to DatabaseConnection.java and we import java.sql.Connection alright import java.sql.DriverManager in here we create a public connection variable we are going to use this later as our return value create a new method, let's call it getConnection There are couple of ways to code your connection. You have couple of options when it comes to connection let's start with database name String databaseName let's make it empty string for now for this tutorial I will use the most basic. You can make and follow your own standard and conventions I always prefer to have a simple and readable code next database user and put it as blank as well this is the one you use as your database login when you login to your MySQL then of course database password and make it blank as well all empty, we are going to fill in them later next is the URL string, it will holds the address that points to our database we specify you can just follow this jdbc mysql localhost + databaseName we need to put a try and catch here i prefer to complete the syntax to avoid missing braces we need a printStackTrace ok this is all we need for now then Class.forname, we will register and load the Driver class to memory and com.mysql.cj.jdbc.Driver next establish our Connection DatabaseLink = DriverManager. getConnection we will get our values from here we will pass these variables as arguments url databaseUser and databasePassword there are couple ways to established a connection however i prefer something readable now we will return databaseLink that is our return value again, you need to put an actual values here before you run don't forget that and this is what you use to login in MySQL and database where your user table is present. for example in my case the databasename is pocBase and will just fill up with username and password Let's go to Controller and we are going to expand this code If a user input pass this validation then we will connect to the database and validate the username and password. however instead of having all the codes here we will create a new method instead. that way, it helps our code to be in a manageable level. it is not a hard rule per se, it is just personal best practices I do feel free to do what you prefer because... when you have your own personal standard it will be easier to navigate to all your codes whether it is present, older or from previous years so long you follow the same practice it will be easier for you alright! Now create a new method public void this is a new method call it validate login copy this over here this will call the method comment it out, we don't need this here First we will create a new instance of our DatabaseConnection DatabaseConnection call it connectNow equals New DatabaseConnection and Connection We need to import Connection class too import java.sql.Connection and here connectDB connectNow getConnection this is simply the new instance of our DatabaseConnection class connectNow is using the only method we created for it if you recall we create this one getConnection() then we build our SQL query to fetch the data my suggestion is build the query in MySQL workbench that way you can test it as well. it will reduce possible error vectors in your code. and this is a very simple query SELECT count(1) FROM UserAccounts WHERE username = '' say Neo and Password = 'kungfu' run it there you go, you got 0, it means, no matching result. this is because 'Neo' is a Firstname and not a username matrix is the actual username for this record change it run it again there you go, you got 1. It means a matching record has been found. copy this and paste it over here then we just need to tweak this a little bit we will replace the hardcoded value by UsernameTextfield and passwordPasswordField ensure that we preserved the single quotes we need that in our concatenation then + for String Concatenations and here and now replace this with what we have so this way, whatever user input in the username and password will be pass over to our SQLQuery and this passwordPasswordField to here semicolon, don't forget that next we need to implement TRY and Catch here Statement alright we need to import it as well see that here? statement = connectDB.createStatement(); here, we are using the connection we declare then we need ResultSet that will handle the query result need to import it first also import class there you go queryResult = statement.executeQuery() use verifyLogin here it just simply execute a query similar to what we did here now we just need to process the query result Using WHILE statement queryResult.next() we just loop around the query result though for this case, we only expect 1 return row now we just need to simply check if we got 1 or 0. queryResult.getInt and columnindex 1. what we are doing is we just want to get the actual value of the first field. it so happen that we only have 1 field but if you have more, you can specify what field you want base on their numeric order base on our constraint we are saying that there should be only one unique username the actual value is the query result here and in our case it is just between 1 and 0 either there is a matching record or none if the result is 1 then we will say loginMessageLabel.setText() Welcome! but if it does not match, if it is zero then it say loginMessagelabel.setText() "Invalid Login. Please Try again" and here e.printStackTrace(); again make sure you put the Database Credentials before you run. and also as I mentioned we have one more SDK to add. but I want to run this and show you another common error we get run it pur a username and password login there goes the error if you scroll up, you will see the actual erorr it says we have error in our createStatement because our ConnectDB is null it simply telling us that it was not able to create a valid connection to the database hence a Null there are many possible reasons why... but in our we simply did not add MySQL j connector SDK yet so we know that is the cause Go To File > Project Strucutre... > Modules then add mysql connector JAR. it should be in the folder where you download it. See Description on how to Download if you have not done it yet. ok let's run it again. alright, let's try with negative test let's try an invalid login first Neo and this one Login there you go, we got the Invalid Login Message means that we dont have any matching record we don't have any user called Neo now let's try to login with a valid account Login perfect! we successully login So there you have it. A login Screen that connects to MySQL database to validate a user account. again this is just a basic tutorial there are other ways to do this in your future project I recommend you setup your project first you Design then Code and test Thank you for watching. Hope you learn something.

Info

Channel: tookootek

Views: 3,916

Rating: undefined out of 5

Keywords: JavaFX, javafx tutorial, javafx tutorial for beginners, javafx scene builder, javafx intellij, javafx project, javafx gui, java, java tutorial, java tutorial for beginners, Java login, JavaFX project, javafx login within database mysql, javafx mysql, javafx user registration, java jdbc connection, java mysql, Java database, javafx database, javafx table, java programming, javafx control javafx, javafx scene builder tutorial, javafx login screen, gui, login form

Id: J0IE5LRyzx8

Channel Id: undefined

Length: 35min 42sec (2142 seconds)

Published: Sat May 15 2021