JavaFX Tutorial | Login and Register Screen GUI In IntelliJ & Scene Builder With MySQL - Part 1|2

Hi! Welcome to our channel in this video i am going to show you how to develop a Log-in window using JavaFX we are going to code using IntelliJ it will be our main IDE we will design our user interface in Scene Builder we will utilize MySQL for our Database then i am going to show you to create the table and insert an initial user that we can use to authenticate the login so after you complete this video you should be able to code using JavaFX working with controller FXML annotations StageStyle and among others... you will also have a know-how on connecting to database using JDBC and incorporate SQL in your code then we will have a familiarity with Scene Builder on working with common user interface elements like labels, buttons , textfields and panes. you may consider this video as both demonstration and tutorial i am trying to get a balance of teaching and making it a step by step guide at the same time. Let's start! open IntelliJ create new project select JavaFX now you just entered your desired project name I call mine BirdEggSolution next... just wait to load up now we are in we have our main Controller... and sample.fxml make it more descriptive that align to its purpose login Refactor there you go. it was renamed successfully Ok we are now going to design a login form in scene Builder we just need to open login.fxml it will be in our project source folder source > sample login open we need to delete this anchorpane and replace with borderpane just drag down here you can double click it actually. 520 that is for our layout anchorpane on left should be 228 407 another one on the right 332 by 400 that is about right. good. Now we need an ImageView search the library there you go grab it drop it here in the left angchorpane do some adjustments what we want is to match the layout of left anchorpane and the ImageView and this for our branding we can assign 228 x 407 it should match alright. then let's load up an image and we have an image avaialble for that just in Images click this open and adust it a little bit now we can set the background color i have a hex code #ECECE7 then we need another imageview. or we can just grab it here and adjust it to the appropriate size about here now let's set the image we need that lock open this should be about right let sets the size to 46 x 32 all the layout 119 x 51 Next. we move to user input design let's start with label just drag it here that is about right adjust the font Let's name it username next! we need a textfield just drag it and align it with username just use this redline to position it good we can refine it in Layout 173 x 26 now we can duplicate this we need the passwordfield but for alignment purposes we can just duplicate ok drag it down give it space good ok let's name it Password ok opps... let's delete this first alright passwordfield this is a text field in a sense but it is a textfield being masked so when you type you only see dot. but behind it, It is still a textfield you can adjust this layout 173 good this time we will set the buttons search button just drag it, give it a good spacing align it to username and password you can set the size here in the Layout 249 technically we can adjust it from here let's name our button as Login then let's take care of the background the Style and then change the background color i have a Hex Code #E96151 then we can set the font, it's White there you go, it's White Scene Builder it's black but it's white duplicate that can save us time name is Cancel see this Textfill? it's White what else... set the font to 13 do the same for Cancel when you running in IntelliJ the text font color will be white let's preview just ignore that blue line when you are running in IntelliJ it will be a rectangle box login cancel button... close before we move on let's fix this white line in the middle Borderpane background color #ECECE7 and let's duplicate this between password and login there you go this login message indicator or the status of your login stretch here and adjust it a little bit and make it center and say invalid login. please try again now we just need to change the font color red that should do it and for aesthetic username this one is password and now we are ready to assign the FX ID's we are going to use that in the code later so for my naming convention I use this usernametextfield and for this one enterpasswordfield good and ofcourse our buttons we are going to assign one for our buttons as well now login button cancel button and they are here if query result will get the result getint 1 and have 1 field == 1 we are saying that if field 1 result is equal to 1 and we are going to say we will use the label we will have we know what the status we are going to say settext hey congrats no let's put it in full Congratulations go back congratulations... that is much better and if we have a zero you will going to say we want to use this login message first copy this and gettext say invalid login try again ok let's preview this first let's try invalid login test test is the easiest there you go now we are going to test a blank enter username and password now we have a valid user it should retun a 1 we will have a congratulations when you press this login good. cool there you have it you have a Log-in form that I was able to authenticate your user and you have a basic and checks as well or it is a blank or invalid user ok On our next video we are going to design and code a Registration form we can add new user ok let me know what you think about JavaFX in comment section thank you for watching! and Please Subscribe!

Channel: tookootek

Views: 68,353

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 user registration, Java database, javafx database, javafx table, java programming, javafx control javafx, javafx scene builder tutorial, javafx login screen, gui

Id: DH3dWzmkT5Y

Length: 47min 55sec (2875 seconds)

Published: Mon May 25 2020