회원가입 / ID 중복확인

Box Maker 2022. 11. 4. 23:02

2022. 11. 4. 23:02

1. signup.php

<!DOCTYPE html>
<?php session_start(); ?>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Join</title>
        <script type="text/javascript" src="./checkid.js"></script>
        <script type="text/javascript" src="./decide.js"></script>
        <script type="text/javascript" src="./change.js"></script>
        <script type="text/javascript" src="./address.js"></script>// 각 함수를 불러오는 코드

    </head>
    <body>
        <h2>SignUp</h2>
        <?php if(!isset($_SESSION['user_id']) || !isset($_SESSION['user_name'])) { ?>
        <form method="post" action="signup_ok.php" autocomplete="off">
            <p>이름: <input type="text" name="signup_name" required></p>
            <p>아이디: <input type="text" name="signup_id" id="uid" required></p>
                <input type="hidden" name="decide_id" id="decide_id">
                 <p><span id="decide" style='color:red;'>ID 중복 여부를 확인해주세요.</span>
                <input type="button" id="check_button" value="ID 중복 검사" onclick="checkid();"></p>
            <p>비밀번호: <input type="password" name="signup_pw" required></p>
                <p>비밀번호 확인: <input type="password" name="signup_pw2" required></p>
                <p><div class=subject>주소</div><br>
        <input class=textform type="text" name="sign_addr" id="addr" onclick="address();" placeholder="주소를 검색해주세요." required></p>
            <p><input type="submit" id="join_button" value="SignUp" disabled=true></p>
        </form>
        <small><a href="login.php">You have account?</a><small>
        <?php } else {
                $user_id = $_SESSION['user_id'];
                $user_name = $_SESSION['user_name'];
                echo "<p>$user_name($user_id)already Login";
                echo "<p><button onclick=\"window.location.href='home.php'\">Go to Main</button> <button onclick=\"window.location.href='logout.php'\">로그아웃</button></p>";
        } ?>
    </body>
</html>

2. signup_ok.php

<?php
    if (!isset($_POST['signup_name']) || !isset($_POST['decide_id']) || !isset($_POST['signup_pw'])) {
        header("Content-type: text/html; charset=UTF-8");
        echo "<script>alert('check the content!!')";
        echo "window.location.replace('signup.php');</script>";
        exit;
    }
    $join_name = $_POST['signup_name'];
    $join_id = $_POST['decide_id'];// POST값을 decide_id로 변경한다
    $join_pw = $_POST['signup_pw'];
    $address = $_POST['sign_addr'];
    $conn= mysqli_connect('localhost', 'admin', 'kisec123', 'MEMBER');
    //신규 회원정보 삽입 + ID 재정렬
     $multi = "
        INSERT INTO login (name, id, pw, address) VALUES ('$join_name', '$join_id', '$join_pw', '$address')";
    $res = $conn -> query($multi);
    if($res){
        echo "<script>alert('회원가입이 완료되었습니다.');";
        echo "window.location.replace('login.php');</script>";
        exit;
    }
    else{
       echo "<script>alert('저장에 문제가 생겼습니다. 관리자에게 문의해주세요.');</script>";
    }
    mysqli_close($conn);
?>
<meta http-equiv="refresh" content="0;url=main.php">

3. checkid.js

4. check.php

1) ID 중복검사를 처리하는 코드

<?php
    $conn= mysqli_connect('localhost', 'admin', 'kisec123', 'MEMBER');
    $uid= $_GET["userid"];  //GET으로 넘긴 userid
    $sql= "SELECT * FROM login where id='$uid'";
    $result = mysqli_fetch_array(mysqli_query($conn, $sql));

    if(!$result){
        echo "<span style='color:blue;'>$uid</span> 는 사용 가능한 아이디입니다.";
       ?><p><input type=button value="이 ID 사용" onclick="opener.parent.decide(); window.close();"></p>

    <?php
    } else {
        echo "<span style='color:red;'>$uid</span> 는 중복된 아이디입니다.";
        ?><p><input type=button value="다른 ID 사용" onclick="opener.parent.change(); window.close()"></p>
    <?php
    }
?>

5. decide.js

1) [이 ID 사용]을 클릭했을 때 실행되는 코드

function decide(){
        document.getElementById("decide").innerHTML = "<span style='color:red;'>ID 중복 여부를 확인해주세요.</span>"
        document.getElementById("decide_id").value = document.getElementById("uid").value
        document.getElementById("uid").disabled = true
        document.getElementById("join_button").disabled = false
        document.getElementById("check_button").value = "다른 ID로 변경"
        document.getElementById("check_button").setAttribute("onclick", "change()")
}

6. change.js

1) [다른 ID 사용]을 클릭했을 때 실행되는 코드

function change(){
        document.getElementById("decide").innerHTML = "<span style='color:red;'>ID 중복 여부를 확인해주세요.</span>"
        document.getElementById("uid").disabled = false
        document.getElementById("uid").value = ""
        document.getElementById("join_button").disabled = true
        document.getElementById("check_button").value = "ID 중복 검사"
        document.getElementById("check_button").setAttribute("onclick", "checkid()")
}

'Web Development' 카테고리의 다른 글

로그인 case (0)	2022.10.24
로그인/로그아웃 (0)	2022.10.20

HackBox