본문 바로가기

웹 개발

[PHP] 회원가입 페이지 만들기

php를 이용한 회원가입 페이지 + mysql db연동

 

1. signup_page.php

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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=Lexend+Deca:wght@100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="signup.css">
    <title>SIGNUP</title>
</head>
<body>
    <form method="POST" action="signup_proc.php" onsubmit="return validateForm()">
        <section>
            <ul class="signup lexend-deca-300">
                <li><h1 class="lexend-deca-600">SIGNUP</h1></li>
                <li>
                    <label>ID</label>    
                    <input type="text" placeholder="Id" name="id" required>
                </li>
                <li>
                <label>Password</label>
                    <input type="password" placeholder="Password" id="password" name="password" required> 
                </li>
                <li>
                    <label>Repeat Password</label>
                    <input type="password" placeholder="Repeat Password" id="repeat_password" name="repeat_password" required>
                </li>
                <li>
                    <label>Name</label>
                    <input type="text" placeholder="name" name="name">
                </li>
                
                <li>
                    <label>Email</label>    
                    <input type="email" placeholder="email" name="email">
                </li>
                <li><input type="submit" id="signup_btn" value="signup" name="submit"></li>
                <li class="login">Already have an account? <a href="login_page.php">Login</a></li>
            </ul>
        </section>
    </form>
</body>
</html>

<script>
        function validateForm() {
            var password = document.getElementById("password").value;
            var repeatPassword = document.getElementById("repeat_password").value;

            if (password !== repeatPassword) {
                alert("비밀번호가 일치하지 않습니다!");
                return false; 
            }
            return true;
        }
    </script>

 

아이디, 비밀번호, 이름, 이메일을 작성하는 회원가입 페이지이다. 비밀번호 입력 실수를 방지하기 위한 repeat password를 통해 다른 비밀번호를 입력하면 회원가입 버튼이 동작하지 않도록 구현하였다. form action을 signup_proc.php로 하여 submit버튼을 누르면 signup_proc.php로 전달한다.

 

 

password와 repeat password의 입력 값이 일치하지 않으면 비밀번호가 일치하지 않는다는 알림창이 뜬다.

 

2. signup_proc.php

 

<?php
require_once('db.php');

	if(isset($_POST['submit'])){

        $signup_res = signup($_POST['id'], $_POST['password'], $_POST['name'], $_POST['email']);

        if($signup_res){
            header("location:login_page.php");
            exit;
        } else {
            header("location:signup_page.php");
            exit;
        }
    }
?>

 

사용자가 입력한 id, password, 이름, 이메일을 db.php의 signup 함수를 통해 회원가입 성공/실패 결과를 받는다. 회원가입에 성공하면 로그인 페이지, 실패하면 회원가입 페이지로 이동한다.

 

3. db.php

 

<?php
	define('DB_SERVER', 'localhost');
	define('DB_USERNAME', '');
	define('DB_PASSWORD', '');
	define('DB_NAME', 'mn');

	$db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

	if($db_conn){
		echo "DB Connect OK";
	}else{
		echo "DB Connect Fail";
	}

    function signup($userid, $userpass, $username, $useremail){
        global $db_conn;

        $sql = "insert into member value(NULL,'$userid','$userpass','$username','$useremail')";
        $result = mysqli_query($db_conn, $sql);

        if($result){
            return $userid;
        } else {
            return 0;
        }
    }
?>

 

먼저 php와 mysql을 연동하고 매개변수로 아이디, 비밀번호, 이름, 이메일을 받는 signup 함수를 정의했다. insert문을 사용하여 매개변수로 받은 정보들을 db에 추가한다. 쿼리 실행에 성공하면 id를 반환한다. 

 

4. 결과

 

 

 

db에 추가된 데이터

member table