[JAVA] 자바FX로 로그인, 회원가입 창 만들기 + mysql(자세한 설명)
📌목차
디자인은 Canva로 진행했습니다.
팀 이름이 자바칩프라푸치노여서 콘셉트에 맞게 만들어봤어요 ㅎㅎㅎ
- SceneBuilder
우선 SceneBuilder을 설치해 주세요.
SceneBuilder에서 Empty를 누른 후 fxml파일을 열어줍니다.
Library에서 Pane을 검색한 후 Pane을 가운데에 끌어와줍니다.
우측 Layout에서 원하는 크기로 변경해 줍니다.
저는 450, 700으로 설정해 줬어요!
UI 꾸미기는 ImageView를 사용해서 꾸며주시면 됩니다!
Library에 Text를 검색하신 후 해당 TextField를 원하는 위치에 불러와줍니다.
TextField를 클릭한 후 오른쪽 창 Code에서 fx:id를 설정해 줍니다.
PasswordField도 TextField와 같은 방법으로 끌어와준 뒤 fx:id를 설정해 줍니다.
이제 로그인하는 버튼도 있어야겠죠?
ImageView로 로그인 아이콘을 불러와줍니다.
로그인 이미지를 클릭한 후 오른쪽 창 Code에서 On Mouse Clicked에 원하는 id를 입력해 줍니다.
왼쪽 하단에 Controller에서 fxml파일에 기능을 넣어줄 java class와 연결해 줍니다.
저는 package 이름이 kakao여서 kakao.Login 자바파일로 경로를 설정해 주었습니다.
파일을 JAVAFX프로젝트 resources package파일에 Login.fxml이라고 저장해 줍니다.
메뉴에서 View를 클릭하시고 Show Sample Controller Skeleton을 클릭하시면
이런 창이 뜨실 거예요!
그대로 복사하셔서 Login.java에 복붙 해줍니다.
- JAVAFX
import 패키지이름;
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.input.MouseEvent;
import javafx.stage.Stage;
public class Login extends Application {
@FXML
private TextField UserId;
@FXML
private PasswordField UserPw;
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("/package이름/Login.fxml"));
Scene scene = new Scene(root);
double initialX = 600; // X 좌표
double initialY = 100; // Y 좌표
stage.setX(initialX);
stage.setY(initialY);
stage.setTitle("Login");
stage.setScene(scene);
stage.show();
}
@FXML
void ClickLogin(MouseEvent event) {
}
}
- Login 클래스는 Application 클래스를 상속받습니다.
- main 메서드에서 launch(args)를 호출하여 애플리케이션을 실행합니다.
- start 메서드에서는 FXML 파일(Login.fxml)을 로드하여 Scene 객체에 설정합니다.
- Stage(윈도우)의 초기 위치와 제목, Scene을 설정하고 화면에 표시합니다.
@FXML
void ClickLogin(MouseEvent event) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("/패키지이름/로그인 후 보여줄 페이지.fxml/"));
Stage stage = (Stage) ((Node) event.getSource()).getScene().getWindow();
Scene scene = new Scene(root);
stage.setScene(scene);
stage.setX(600); // x 좌표
stage.setY(100); // y 좌표
stage.show();
}
이젠 로그인이미지를 클릭하고 나서 실행할 기능을 추가해 줍니다.
Login.fxml을 화면에 표시해 줄 때처럼 동일하게 로그인 후에 보여줄 fxml파일의 경로를 지정해 줍니다.
여기서 잠깐!
여기까지는 이미지를 누르면 다음 동작을 할 수 있는 튜토리얼이였구요.
mysql에 연동해서 저장되어 있는 Id와 Pw가 동일하면 로그인이 되도록 만들어 보겠습니다.
- MySQL
먼저 MySQL WorkBench를 실행해 줍니다.
다음 Schema를 새로 생성해 줍니다. Apply클릭!
Create Table을 클릭해
Id(PK, NN, VARCHAR(45)type)
Pw(NN, VARCHAR(45)type)
Column을 만들어 줍니다. Apply클릭!
<PK, NN, VARCHAR(45)란?>
Primary Key ( PK )
- 테이블에서 특정 row 하나를 식별하는 역할입니다. 특정 row를 고유하게 나타낼 수 있는 값입니다.
Not Null (NN)
- NULL이 아닌 PK와 함께 반드시 하나의 값을 가지고 있어야 합니다. 빈 값을 가지면 안 될 때 사용합니다.
VARCHAR
- 가변길이 문자열 저장, 최대 길이는 255바이트입니다. 45면 46개까지 문자열을 저장할 수 있습니다.
private static final String DB_URL = "jdbc:mysql://localhost:3306/new_schema";
private static final String DB_USER = "root";
private static final String DB_PASS = "비밀번호";
// MySQL 데이터베이스 연결 메서드
public static Connection getConnection() throws SQLException {
return DriverManager.getConnection(DB_URL, DB_USER, DB_PASS);
}
코드에 아까 만들었던 schema의 위치와 자신의 MySQL 비밀번호를 넣어줍니다.
다음 MySQL 연결 메서드를 작성해 줍니다.
// MySQL에 저장되어 있는 아이디와 비밀번호와 일치하는지 확인하는 메서드
private boolean isLoginSuccessful(String id, String pw) {
try (Connection conn = getConnection();
PreparedStatement stmt = conn.prepareStatement("SELECT * FROM new_table WHERE Id = ?")) {
stmt.setString(1, id);
try (ResultSet rs = stmt.executeQuery()) {
if (rs.next()) {
String hashedPassword = rs.getString("Pw"); // 데이터베이스에서 저장된 암호화된 비밀번호 가져오기
if (verifyPassword(pw, hashedPassword)) {
return true; // 입력한 비밀번호와 저장된 암호화된 비밀번호가 일치하면 로그인 성공
}
}
return false; // 입력한 아이디가 존재하지 않거나 비밀번호가 일치하지 않으면 로그인 실패
}
} catch (SQLException e) {
e.printStackTrace();
return false; // 예외 발생 시 로그인 실패로 처리
}
}
//비밀번호 확인 메서드
private boolean verifyPassword(String inputPassword, String hashedPassword) {
return inputPassword.equals(hashedPassword);
}
기존에 만들어두었던 Id TextFiled에 입력된 문자가 Mysql new_table에 데이터가 있고,
Pw PasswordFiled에 입력된 문자가 Mysql new_table에 Id데이터와 Pw가 일치하면 true를 반환해 주는 메서드입니다.
@FXML
void ClickLogin(MouseEvent event) throws IOException {
String id = UserId.getText();
String pw = UserPw.getText();
if (isLoginSuccessful(id, pw)) {
Parent root = FXMLLoader.load(getClass().getResource("/패키지이름/로그인 후 보여줄 페이지.fxml/"));
Stage stage = (Stage) ((Node) event.getSource()).getScene().getWindow();
Scene scene = new Scene(root);
stage.setScene(scene);
stage.setX(600); // x 좌표
stage.setY(100); // y 좌표
stage.show();
System.out.println("로그인 성공!");
}
else {
System.out.println("로그인 실패");
}
}
아까 ClickLogin 메서드에 넣었던 코드를
if(isLoginSuccessFul(id, pw)에 넣어줍니다.
String id는 id TextField에 id를 입력하면 받아오는 값입니다.
String pw는 pw PasswordField에 pw를 입력하면 받아오는 값입니다.
테스트하기 전에
MySQL에 들어가서 테이블을 누른 후 맨 오른쪽 아이콘을 클릭해 줍니다.
만들어둔 id, pw에 원하는 데이터를 입력한 후 Apply를 눌러 데이터를 저장해 줍니다.
MySQL에 저장했던 데이터대로 입력해 보겠습니다.
제가 미리 만들어둔 fxml파일로 이동이 되고
터미널에 로그인 성공이 뜨는 것을 확인하실 수 있습니다😆
이렇게 말씀드린 방안들을 활용해 처음 예시처럼 회원가입 페이지도 만드시면 됩니다!
전체코드
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.input.MouseEvent;
import javafx.stage.Stage;
public class Login extends Application {
@FXML
private TextField UserId;
@FXML
private PasswordField UserPw;
private static final String DB_URL = "jdbc:mysql://localhost:3306/new_schema";
private static final String DB_USER = "root";
private static final String DB_PASS = "000814";
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("Test.fxml"));
Scene scene = new Scene(root);
double initialX = 600; // X 좌표
double initialY = 100; // Y 좌표
stage.setX(initialX);
stage.setY(initialY);
stage.setTitle("Login");
stage.setScene(scene);
stage.show();
}
// MySQL 데이터베이스 연결 메서드
public static Connection getConnection() throws SQLException {
return DriverManager.getConnection(DB_URL, DB_USER, DB_PASS);
}
@FXML
void ClickLogin(MouseEvent event) throws IOException {
String id = UserId.getText();
String pw = UserPw.getText();
if (isLoginSuccessful(id, pw)) {
Parent root = FXMLLoader.load(getClass().getResource("More.fxml"));
Stage stage = (Stage) ((Node) event.getSource()).getScene().getWindow();
Scene scene = new Scene(root);
stage.setScene(scene);
stage.setX(600); // x 좌표
stage.setY(100); // y 좌표
stage.show();
System.out.println("로그인 성공!");
} else {
System.out.println("로그인 실패");
}
}
// MySQL에 저장되어 있는 아이디와 비밀번호와 일치하는지 확인하는 메서드
private boolean isLoginSuccessful(String id, String pw) {
try (Connection conn = getConnection();
PreparedStatement stmt = conn.prepareStatement("SELECT * FROM new_table WHERE Id = ?")) {
stmt.setString(1, id);
try (ResultSet rs = stmt.executeQuery()) {
if (rs.next()) {
String hashedPassword = rs.getString("Pw"); // 데이터베이스에서 저장된 암호화된 비밀번호 가져오기
if (verifyPassword(pw, hashedPassword)) {
return true; // 입력한 비밀번호와 저장된 암호화된 비밀번호가 일치하면 로그인 성공
}
}
return false; // 입력한 아이디가 존재하지 않거나 비밀번호가 일치하지 않으면 로그인 실패
}
} catch (SQLException e) {
e.printStackTrace();
return false; // 예외 발생 시 로그인 실패로 처리
}
}
private boolean verifyPassword(String inputPassword, String hashedPassword) {
return inputPassword.equals(hashedPassword);
}
}
궁금한 점은 댓글 달아주세요!
감사합니다❤️
'JAVA > Coding' 카테고리의 다른 글
| [날씨API] JavaScript에 OpenWeatherMap을 사용해 날씨를 불러와보자. (1) | 2024.11.19 |
|---|---|
| [JAVA] ArrayList 말고 배열에 데이터 추가하는 방법 <3 (0) | 2024.05.31 |
| [JAVA] AWT로 창띄우고 버튼과 메모지 만들기 - member, anonymous inner class사용 (0) | 2023.09.05 |
| [JAVA] 자바 소켓(Socket)통신 이란? 코드 구현 (0) | 2023.09.01 |
| [JAVA] TCP/IP란? 자바로 구현해보기 (0) | 2023.08.13 |
