간단한 회원가입 페이지 만들기(DB 연동)

gyub·2025년 4월 15일

목록 보기

5/31

이번에는 DB 연동을 통해 간단한 회원가입 페이지를 만들어보겠습니다

1️⃣ 데이터베이스 생성

우선 회원가입 및 로그인과 관련된 데이터들을 저장할 데이터 베이스를 만들어야 합니다

저는 login 이라는 데이터베이스를 만들겠습니다

CREATE DATABASE login DEFAULT CHARACTER SET UTF8;

한글도 처리할 수 있도록 UTF8 기반의 데이터베이스를 생성했습니다

2️⃣ 테이블 생성

데이터베이스를 만들었으니 이제 데이터베이스 안에 테이블을 만들어 줘야겠죠?

계정정보를 저장할 테이블을 만들어야 하니 이름이 account 인 테이블을 생성해 보겠습니다

그럼 이제 이 테이블에 어떤 데이터를 저장할 것인지, 그 데이터의 형식은 무엇인지 정해야 합니다

저는 아이디, 비밀번호, 이름, 전화번호, 이메일 주소를 저장하고, 데이터 형식은 모두 문자열로 설정하려고 합니다

그리고 각 데이터들을 고유하게 구분지어 줄 수 있는 번호를 각 데이터에 할당하겠습니다


CREATE TABLE student_score (
  id INT(20) PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(32) NOT NULL,
  password VARCHAR(32) NOT NULL,
  name VARCHAR(32) NOT NULL,
  phone VARCHAR(20) NOT NULL,
  email VARCHAR(50) NOT NULL
);

3️⃣ 회원가입 페이지 만들기

데이터베이스는 이제 다 준비되었으니, 회원가입 페이지만 만들면 됩니다

우선 회원가입 시 아이디, 비밀번호, 이름, 전화번호, 이메일을 받기로 했으니 해당 정보를 받을 폼을 작성합니다


<form action="" method="post">
      <div class="input-group">
        <label for="userId">아이디</label>
        <input type="text" id="username" name="username" placeholder="아이디 입력" required>
      </div>
      <div class="input-group">
        <label for="password">비밀번호</label>
        <input type="password" id="password" name="password" placeholder="비밀번호 입력" required>
      </div>
      <div class="input-group">
        <label for="name">이름</label>
        <input type="text" id="name" name="name" placeholder="이름 입력" required>
      </div>
      <div class="input-group">
        <label for="phone">전화번호</label>
        <input type="tel" id="phone" name="phone" placeholder="전화번호 입력" required>
      </div>
      <div class="input-group">
        <label for="email">이메일</label>
        <input type="email" id="email" name="email" placeholder="이메일 입력" required>
      </div>
      <button type="submit">회원가입</button>
    </form>

저는 입력받은 데이터를 같은 페이지 내에서 처리하는 로직을 작성할 예정이라 action = “”으로 작성하였습니다

또, 계정 정보는 URL로 노출되면 안되니까 method = “POST” 로 설정합니다

각각의 데이터는 모두 꼭 필요하므로 required를 설정하여 꼭 입력받도록 하였습니다

4️⃣ PHP 작성

이제 DB에 입력받은 정보를 저장하여 실제로 회원가입을 진행하는 로직을 PHP로 작성합니다

1. 데이터베이스 연결

# 상수로 DB 주소, 아이디, 비밀번호, DB 이름 선언
define('DB_SERVER','localhost');
define('DB_USERNAME','admin');
define('DB_PASSWORD','admin1234');
define('DB_NAME','login');

#DB 연결
$db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

2. 폼을 통해 받은 데이터를 변수에 저장

$username = $_POST['username'];
$password = $_POST['password'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];

3. 필요한 데이터가 모두 있는 지 확인 후, 있다면 테이블에 INSERT

if ($username != "" and $password != "" and $name != "" and $phone != "" and $email != ""){
	$sql = "INSERT INTO account VALUES (NULL, '".$username."','".$password."','".$name."','".$phone."','".$email."');";
    $result = mysqli_query($db_conn, $sql);
   }

4. 데이터 INSERT에 성공했다면 성공메세지, 실패했다면 실패메세지 출력

PHP 내에서 조건에 따라 html 요소를 출력하고 싶다면 ,우선 html 요소 전에 PHP 구간을 닫은 뒤 html을 작성하고, 이어지는 PHP문을 작성할 때 다시 PHP 구간을 열면 됩니다


<?php
# 성공메세지 출력
if($result) { ?>
	<!-- 이제 회원가입 완료 문구 띄워주면 됨(리다이렉션 하던 지 등등)-->
    <div class="success-message">
    	회원가입 완료
    </div>
<?php
} else { ?> 	# 실패메세지 출력
	<div class="error-message">
    	아이디 또는 비밀번호를 입력해주세요
    </div>
    <?php
}
?>

위의 내용을 종합하면 전체 코드는 아래와 같습니다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>회원가입 페이지</title>
  <!-- Google Fonts 사용 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

  <!-- 외부 CSS 파일 연결 -->
  <link rel="stylesheet" href="signUp.css">
</head>
<body>
  <div class="login-container">
    <h2>회원가입</h2>
    <form action="" method="post">
      <div class="input-group">
        <label for="userId">아이디</label>
        <input type="text" id="username" name="username" placeholder="아이디 입력" required>
      </div>
      <div class="input-group">
        <label for="password">비밀번호</label>
        <input type="password" id="password" name="password" placeholder="비밀번호 입력" required>
      </div>
      <div class="input-group">
        <label for="name">이름</label>
        <input type="text" id="name" name="name" placeholder="이름 입력" required>
      </div>
      <div class="input-group">
        <label for="phone">전화번호</label>
        <input type="tel" id="phone" name="phone" placeholder="전화번호 입력" required>
      </div>
      <div class="input-group">
        <label for="email">이메일</label>
        <input type="email" id="email" name="email" placeholder="이메일 입력" required>
      </div>
      <button type="submit">회원가입</button>
    </form>

    <?php
        # 상수로 DB 주소, 아이디, 비밀번호, DB 이름 선언
        define('DB_SERVER','localhost');
        define('DB_USERNAME','admin');
        define('DB_PASSWORD','admin1234');
        define('DB_NAME','login');

        #DB 연결
        $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);


        $username = $_POST['username'];
        $password = $_POST['password'];
        $name = $_POST['name'];
        $phone = $_POST['phone'];
        $email = $_POST['email'];

        if ($username != "" and $password != "" and $name != "" and $phone != "" and $email != ""){
            $sql = "INSERT INTO account VALUES (NULL, '".$username."','".$password."','".$name."','".$phone."','".$email."');";
            $result = mysqli_query($db_conn, $sql);

            if($result) {
        ?>
            <!-- 이제 회원가입 완료 문구 띄워주면 됨(리다이렉션 하던 지 등등)-->
            <div class="success-message">
                회원가입 완료
            </div>
        <?php            
            }
        }
    ?>
  </div>
</body>
</html>

gyub

이전 포스트

PHP DB 연결로 간단한 데이터 받아오기

다음 포스트