How to develop A login System: How To: Weekly Contest by @kaybiel4u

In this tutorial we’re going to develop a LOGIN SYSTEM that will enable users to sign in to the software. I am going to use Java programming to boost this System. As you comply with this tutorial, it is expected of you to have the fundamental expertise of Java programming language and JavaFx, simply fundamentals understanding will assist you to hold close this tutorial and be able to improve your own. Kindly visit my blog as I have started the java course. I am going to advance a graphical user interface for this LOGIN SYSTEM with the use of JavaFx. JavaFx is use to increase graphical user interface in java. Java swing was once use to improve graphical interface until the arrival of javaFx. Although, some programmers nonetheless use Java swing to advance software program however they will not see any update of java swing again because java swing has been deprecated. The paradigm shift has now been made to javaFx that come with a lot of proper stuff that will make your programming existence clean and worthwhile.

Let us commence the experience

There are a lot of IDEs you can use to develop software; netBeans, eclipse, intelliJ IDEA etc, we can use to develop Applications for clients. For the purpose of this tutorial, I am going to use netbean IDE (Integrated Development Environment) for the development.

1. Open your netBeans IDE
   

2. To create a new project, click on File and click on New project as shown on the screenshot
   

3. When you click on New Project the below will be displayed, click on JavaFx and on JavaFx Application
   

4. Click on next to name the Application any name that you want and click fiinsh, as you can see in the screenshot, I named my Application SignSystem
   

5. The default code will be shown after you click finish.
   

If you run the code it will display Hello World.

For the purpose of this tutorial, I have to delete the default code to start my own from scratch as you can see

After creating a new project successfully, I shall commence the coding for this new babe (LOGIN SYSTEM) .

Let’s start

From the screenshot above you can see the Package Name(which is in lower case and have to always be in lower case) signsystem which end with semi-colon, semi-colon is use to give up every line of code in java, it must not be omitted, alright?

After the package name, import all the classes that will perform the LOGIN SYSTEM.
Below are the classes I imported:
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import static javafx.geometry.HPos.RIGHT;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

The class name is next which must implement the Application, my class name is SignSystem. Note that Java is case sensitive meaning that SignSystem is not the same a signsystem, alright?

public class SignSystem extends Application {

Next is the method that will perform or do the function, the superclass is overridden in the method and we set the Application title to Login System.

@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Login System");

GridPane is imported and so we use lay it out.

GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));

Text class is imported, so we use it to display text ‘Welcome Steemians’ and I set the text font to 20.

Text scenetitle = new Text("Welcome Steemians");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);

Label is imported and used
Label userName = new Label("User Name:");
grid.add(userName, 0, 1);

Text field is where you input text, like this app, you input your username.

TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);

Another label

Label pw = new Label("Password:");
grid.add(pw, 0, 2);

Password field is where you input password

PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);

Button is what you press to perform a function.

Button btn = new Button("Sign in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);

final Text actiontarget = new Text();
grid.add(actiontarget, 0, 6);
grid.setColumnSpan(actiontarget, 2);
grid.setHalignment(actiontarget, RIGHT);
actiontarget.setId("actiontarget");

Action event and event handler imported are to allow users to click sign in and sign in the user when the user click sign in, it will display Sign in button pressed. I would have used lambda for this Action event but for clarity purpose I just use the general way of handling event.

btn.setOnAction(new EventHandler< ActionEvent >() {

        @Override
        public void handle(ActionEvent e) {
            actiontarget.setFill(Color.FIREBRICK);
            actiontarget.setText("Sign in button pressed");
        }
    });

Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
primaryStage.show();
}

This is the main method

public static void main(String[] args) {
    launch(args);
}

}

Lets us now run our babe (new software called ’Login System’).

Did you enjoy the fun in this program?