JavaFx is a most famous framework for building desktop application. In this post we will teach how to implement the login and registration
using javafx and mysql step by step.i attached the video tutorials below. How to step by step by step it is easy to learn.
First Create the View page inside the view package
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<AnchorPane fx:id="root" prefHeight="475.0" prefWidth="840.0" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="controller.LoginFormController">
<children>
<AnchorPane layoutY="-1.0" prefHeight="438.0" prefWidth="406.0">
<children>
<TextField fx:id="txtUserName" layoutX="45.0" layoutY="117.0" prefHeight="38.0" prefWidth="292.0" promptText="UserName" style="-fx-background-color: black;">
<font>
<Font size="16.0" />
</font>
</TextField>
<PasswordField fx:id="txtPassword" layoutX="45.0" layoutY="179.0" prefHeight="38.0" prefWidth="292.0" promptText="Password" style="-fx-background-color: black;">
<font>
<Font size="16.0" />
</font>
</PasswordField>
<Label layoutX="45.0" layoutY="28.0" text="Login" textFill="#2b0b9c">
<font>
<Font name="System Bold" size="23.0" />
</font>
</Label>
<Separator layoutX="45.0" layoutY="73.0" prefHeight="7.0" prefWidth="301.0" />
<Button layoutX="50.0" layoutY="285.0" mnemonicParsing="false" onAction="#btnSignIn" prefHeight="38.0" prefWidth="292.0" style="-fx-background-color: blue;" text="SignIn" textFill="WHITE">
<font>
<Font size="16.0" />
</font>
</Button>
<Button layoutX="50.0" layoutY="374.0" mnemonicParsing="false" onAction="#btnSignup" prefHeight="38.0" prefWidth="292.0" style="-fx-background-color: red;" text="SignUp" textFill="WHITE">
<font>
<Font size="16.0" />
</font>
</Button>
<Label layoutX="179.0" layoutY="331.0" text="OR">
<font>
<Font name="System Bold" size="16.0" />
</font>
</Label>
<Separator layoutX="49.0" layoutY="236.0" prefHeight="7.0" prefWidth="301.0" />
</children>
</AnchorPane>
<ImageView fitHeight="323.0" fitWidth="345.0" layoutX="407.0" layoutY="74.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../assets/login.jpg" />
</image>
</ImageView>
</children>
</AnchorPane> After that Create the Controller of LoginFormController package
package controller;
import db.DBConnection;
import javafx.event.ActionEvent;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class LoginFormController {
public TextField txtUserName;
public PasswordField txtPassword;
public AnchorPane root;
public void btnSignIn(ActionEvent actionEvent) {
try {
String Username = txtUserName.getText();
String Password = txtPassword.getText();
Connection connection = DBConnection.getInstance().getConnection();
PreparedStatement preparedStatement = connection.prepareStatement("select * from user where username =? and password = ?");
preparedStatement.setString(1,Username);
preparedStatement.setString(2,Password);
ResultSet resultSet = preparedStatement.executeQuery();
if(resultSet.next())
{
Parent parent = FXMLLoader.load(this.getClass().getResource("../view/MainForm.fxml"));
Scene scene = new Scene(parent);
Stage primarystage = (Stage) root.getScene().getWindow();
primarystage.setScene(scene);
primarystage.setTitle("Main Form");
primarystage.centerOnScreen();
}
else
{
Alert alert = new Alert(Alert.AlertType.CONFIRMATION, "UserName or Password Do not Match");
alert.showAndWait();
txtUserName.clear();
txtPassword.clear();
txtUserName.requestFocus();
}
}
catch (Exception ex)
{
ex.printStackTrace();
}
}
public void btnSignup(ActionEvent actionEvent) throws IOException {
Parent parent = FXMLLoader.load(this.getClass().getResource("../view/RegistationForm.fxml"));
Scene scene = new Scene(parent);
Stage primaryStage = (Stage) root.getScene().getWindow();
primaryStage.setScene(scene);
primaryStage.setTitle("Register Form");
primaryStage.centerOnScreen();
}
}
After that Create the Registration Form inside view package
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<AnchorPane fx:id="pane" prefHeight="514.0" prefWidth="462.0" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="controller.RegistationFormController">
<children>
<TextField fx:id="txtfullName" layoutX="60.0" layoutY="147.0" prefHeight="38.0" prefWidth="292.0" promptText="FullName" style="-fx-background-color: black;">
<font>
<Font size="16.0" />
</font>
</TextField>
<PasswordField fx:id="txtPassword" layoutX="60.0" layoutY="269.0" prefHeight="38.0" prefWidth="292.0" promptText="Password" style="-fx-background-color: black;">
<font>
<Font size="16.0" />
</font>
</PasswordField>
<Label layoutX="49.0" layoutY="14.0" text="Registation" textFill="#2b0b9c">
<font>
<Font name="System Bold" size="35.0" />
</font>
</Label>
<Separator layoutX="49.0" layoutY="59.0" prefHeight="7.0" prefWidth="301.0" />
<Button layoutX="65.0" layoutY="435.0" mnemonicParsing="false" onAction="#btnSignup" prefHeight="38.0" prefWidth="292.0" style="-fx-background-color: red;" text="Registation" textFill="WHITE">
<font>
<Font size="16.0" />
</font>
</Button>
<Separator layoutX="29.0" layoutY="400.0" prefHeight="7.0" prefWidth="390.0" />
<TextField fx:id="txtMobile" layoutX="60.0" layoutY="207.0" prefHeight="38.0" prefWidth="292.0" promptText="Mobile" style="-fx-background-color: black;">
<font>
<Font size="16.0" />
</font>
</TextField>
<PasswordField fx:id="txtConfirmPassword" layoutX="60.0" layoutY="334.0" onAction="#txtConfirmPasswordOnAction" prefHeight="38.0" prefWidth="292.0" promptText="Confirm Password" style="-fx-background-color: black;">
<font>
<Font size="16.0" />
</font>
</PasswordField>
<Label fx:id="lblpassword1" layoutX="224.0" layoutY="307.0" text="Password do not match" textFill="#a90000" />
<Label fx:id="lblpassword2" layoutX="224.0" layoutY="372.0" text="Password do not match" textFill="#a90000" />
<Label fx:id="lblAutoID" layoutX="280.0" layoutY="80.0" textFill="#9e0000">
<font>
<Font name="System Bold" size="18.0" />
</font>
</Label>
</children>
</AnchorPane>
}
After that Create the Registration Form inside controller package
package controller;
import db.DBConnection;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
import java.io.IOException;
import java.net.URL;
import java.sql.*;
public class RegistationFormController {
public TextField txtfullName;
public TextField txtMobile;
public PasswordField txtConfirmPassword;
public AnchorPane pane;
public PasswordField txtPassword;
public Label lblpassword1;
public Label lblpassword2;
public Label lblAutoID;
public void initialize() {
lblpassword1.setVisible(false);
lblpassword2.setVisible(false);
try {
AutoID();
} catch (SQLException e) {
e.printStackTrace();
}
}
public void AutoID() throws SQLException {
Connection connection = DBConnection.getInstance().getConnection();
Statement statement = connection.createStatement();
ResultSet resultSet = statement.executeQuery("select id from user order by id desc limit 1");
boolean a = resultSet.next();
if(a)
{
String uid = resultSet.getString(1);
uid = uid.substring(1,4);
int intID = Integer.parseInt(uid);
intID++;
if(intID < 10)
{
lblAutoID.setText("U00" + intID);
}
else if(intID < 100)
{
lblAutoID.setText("U0" + intID);
}
else
{
lblAutoID.setText("U" + intID);
}
}
else
{
lblAutoID.setText("U001");
}
}
public void btnSignup(ActionEvent actionEvent) throws IOException, SQLException {
register();
DBConnection object = DBConnection.getInstance();
System.out.println(object);
}
public void txtConfirmPasswordOnAction(ActionEvent actionEvent) throws SQLException {
register();
}
public void register() throws SQLException {
String newPassword = txtPassword.getText();
String ConfirmPassword = txtConfirmPassword.getText();
if(newPassword.equals(ConfirmPassword))
{
setBorderColor("transparent");
lblpassword1.setVisible(false);
lblpassword2.setVisible(false);
txtPassword.requestFocus();
try {
Connection connection = DBConnection.getInstance().getConnection();
String id = lblAutoID.getText();
String name = txtfullName.getText();
String mobile = txtMobile.getText();
String cpass = txtConfirmPassword.getText();
PreparedStatement preparedStatement = connection.prepareStatement("insert into user(id,username,email,password)values(?,?,?,?) ");
preparedStatement.setString(1, id);
preparedStatement.setString(2, name);
preparedStatement.setString(3, mobile);
preparedStatement.setString(4, cpass);
int i = preparedStatement.executeUpdate();
if (i != 0) {
Alert alert = new Alert(Alert.AlertType.CONFIRMATION, "Success");
alert.showAndWait();
Parent parent = FXMLLoader.load(this.getClass().getResource("../view/LoginForm.fxml"));
Scene scene = new Scene(parent);
Stage primarystage = (Stage) pane.getScene().getWindow();
primarystage.setScene(scene);
primarystage.setTitle("Login Form");
primarystage.centerOnScreen();
}
}
catch (SQLException | IOException ex)
{
ex.printStackTrace();
}
}
else
{
setBorderColor("red");
lblpassword1.setVisible(true);
lblpassword2.setVisible(true);
txtPassword.requestFocus();
}
}
public void setBorderColor(String color)
{
txtPassword.setStyle(" -fx-border-color: " + color);
txtConfirmPassword.setStyle(" -fx-border-color: " + color);
}
}
create the MainForm.fxml inside the view package
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<AnchorPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="controller.MainFormController">
<children>
<Label layoutX="166.0" layoutY="127.0" text="Welcome">
<font>
<Font size="65.0" />
</font>
</Label>
</children>
</AnchorPane> create the MainFormController.java inside the controller package
Java Server Pages (JSP) is a powerful technology used to develop dynamic web applications by…
Spring Boot is a powerful backend framework for developing Java-based web applications. Pairing it with…
The Rise of Spring Boot As technology advances, frameworks and tools that developers depend on…
Laravel Print Version: An Essential Guide Laravel is a powerful PHP framework widely used for…
Laravel cache clear , you can use the Artisan command-line tool that comes with Laravel.…
Vue.js is a powerful JavaScript framework for creating dynamic user interfaces, while Laravel is a…