MySQL

MYSQL PHP html연동해서 회원가입, 로그인,로그아웃 사이트 만들기

김도현2 2023. 4. 19. 23:18
반응형

MYSQL PHP html연동해서 회원가입, 로그인 사이트 만들기

html과 php를 연동하여 회원가입, 로그인 하는 사이트를 만들어 보겠습니다.

 

 

 

 

우선 인덱스 화면 입니다. 

 

이 사이트의 목적은 회원가입을 데이터베이스를 관리할 수 있고 로그인을 할 수 있는 사이트를 만드는 것입니다.

 

메인화면을 보겠습니다.

 

 

큰 제목아래 회원가입, 로그인, 게시판, 블로그 목록들이 있습니다.

 

회원가입을 하기전 데이터베이스와 테이블을 만드셔야합니다.

 

그 전에 웹페이지와 연동할 수 있는 php를 만들어 주겠습니다.

 

 

 

 

//connect.php
<?php
    $host = "localhost";
    $user = "root";
    $pw = "root";
    $db = "phpclass";
    $connect = new mysqli($host,$user,$pw,$db);
    $connect -> set_charset("utf-8");
?>

 

 

그 다음 위에 connect.php에서 db를 phpcalss라고 써놨으니

phpclass란 데이터 베이스가 필요합니다. 콘솔창에서 하나 만들어 줍니다.

 

 

 

< phpclass 생성 >

 

 

 

 

그 후 테이블을 만들어야 합니다. 

 

<?php
    include "../connect/connect.php";
    $sql = "create table members(";
    $sql .= "memberID int(10) unsigned auto_increment,";
    $sql .= "youEmail varchar(40) UNIQUE NOT NULL,";
    $sql .= "youName varchar(10) NOT NULL,";
    $sql .= "youPass varchar(20) NOT NULL,";
    $sql .= "youPhone varchar(40),";
    $sql .= "regTime int(40) NOT NULL,";
    $sql .= "PRIMARY KEY(memberID)";
    $sql .= ") charset=utf8;";
    $result = $connect -> query($sql);
    if($result){
        echo "create tables Complete";
    } else {
        echo "create tables false";
    }
?>

 

../connect/connect.php" 파일을 포함하여 데이터베이스에 연결합니다.

그리고 나서, "members"라는 이름의 테이블을 생성하는 SQL 문을 작성합니다.

 

생성된 SQL 문을 $result 변수에 할당하고, 이를 $connect -> query() 함수를 사용하여 실행합니다.

실행이 성공되면 "create tables Complete"가 메시지가 출력되고 테이블 생성에 성공합니다.

실행이 실패하면 "create tables false" 메시지를 출력하고 테이블 생성에 실패합니다.

 

데이터베이스와 테이블이 준비됐으니 회원가입을 할 수 있습니다.

 

 

 

회원가입

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입 페이지</title>

    <?php include "../include/head.php" ?>
</head>
<body  class="gray">

    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- //header -->

    <main id="main" class="container">
        <div class="intro__inner center bmStyle">
            <picture class="intro__images">
                <source srcset="../assets/img/join01.png, ../assets/img/join01@2x.png 2x, ../assets/img/join01@3x.png 3x">
                <img src="../assets/img/join01.png" alt="회원가입 이미지">
            </picture>
            <p class="intro__text">
                회원가입을 해주시면 다양한 정보를 자유롭게 볼 수 있습니다.
            </p>
        </div>
        <!-- join__inner  -->
        <div class="join__inner">
            <h2>회원 가입</h2>
            <div class="join__form">
                <form action="joinSave.php" name="join" method="post">
                    <fieldset>
                        <legend class="blind">회원가입 영역</legend>
                        <div>
                            <label for="youEmail" class="required">이메일</label>
                            <input type="text" id="youEmail" name="youEmail" class="inputStyle" placeholder="이메일을 적어주세요!" required>
                        </div>
                        <div>
                            <label for="youName" class="required">이름</label>
                            <input type="text" id="youName" name="youName" class="inputStyle" placeholder="이름을 적어주세요!" required>
                        </div>
                        <div>
                            <label for="youPass" class="required">비밀번호</label>
                            <input type="password" id="youPass" name="youPass" class="inputStyle" placeholder="비밀번호 적어주세요!" required>
                        </div>
                        <div>
                            <label for="youPassC" class="required">비밀번호 확인</label>
                            <input type="password" id="youPassC" name="youPassC" class="inputStyle" placeholder="다시 한번 적어주세요!" required>
                        </div>
                        <div>
                            <label for="youPhone" class="required">연락처</label>
                            <input type="text" id="youPhone" name="youPhone" class="inputStyle" placeholder="연락처를 적어주세요!" required>
                        </div>
                        <button type="submit" class="btnStyle">회원가입 완료</button>
                    </fieldset>
                </form>
            </div>
        </div> 
    </main>
    <!-- main -->
</body>
</html>

 

 

사용자가 이메일, 이름, 비밀번호, 비밀번호 확인, 연락처 정보를 입력하여 회원가입을 할 수 있는 페이지입니다.

 

PHP include 문을 이용하여 다른 파일에서 필요한 코드를 가져와서 사용하고 있습니다.

가져온 코드는 head.php, skip.php, header.php 파일입니다.

이렇게 파일을 분리하여 작성하면 코드의 재사용성이 높아지며, 코드를 수정하거나 유지보수할 때 효율적입니다.

 

입력 필드에는 이메일, 이름, 비밀번호, 비밀번호 확인, 연락처 정보가 있으며, 이 중 이메일 필드는 required 속성이 추가되어 있어 반드시 입력해야 합니다.

 

회원가입 완료 버튼을 누르면 joinSave.php 파일로 폼에 입력된 정보가 전송되어 회원가입 처리가 이루어집니다.

 

 

 

 

회원가입 완료

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입 완료페이지</title>

    <?php include "../include/head.php" ?>
</head>
<body class="gray">
    <?php include "../include/skip.php" ?>
    <!-- //skip -->
    <?php include "../include/header.php" ?>
    <!-- //header -->

     <main id="main" class="container">
        <div class="intro__inner center bmStyle">
            <picture class="intro__images">
                <source srcset="../assets/img/joinEnd01.png, ../assets/img/joinEnd01@2x.png 2x, ../assets/img/joinEnd01@3x.png 3x" />
                <img src="../assets/img/joinEnd01.png" alt="회원가입 이미지">
            </picture>
                <!-- 회원가입을 축하드립니다.<br>로그인을 해주세요! -->
<?php
    include "../connect/connect.php";
    $youEmail = $_POST['youEmail'];
    $youName = $_POST['youName'];
    $youPass = $_POST['youPass'];
    $youPassC = $_POST['youPassC'];
    $youPhone = $_POST['youPhone'];
    $regTime = time();
    // echo $youEmail,$youName,$youPass,$youPhone;
    
    

    //메세지 출력
    function msg($alert){
        echo "<p class='intro__text'>$alert</p>";
    }

    //이름 유효성 검사
    $check_name = preg_match("/^[가-힣]{9,15}$/", $youName);

    if($check_name == false){
        msg("이름은 한글만 가능합니다. 또는 3~5글자만 써주세요.");
        exit;
    }

    //이메일 유효성 검사
    $check_mail = preg_match("/^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/", $youEmail);

    if($check_mail == false){
        msg("이메일 형식이 잘못 되었습니다.");
        exit;
    }

    //비밀번호,확인 유효성 검사
    if($youPass !== $youPassC){
        msg("비밀번호가 일치하지 않습니다.");
    }

    // $youPass = sha1($youPass);

    //휴대폰 번호 유효성 검사
    $sheck_number = preg_match("/^(010|011|016|017|018|019)-[0-9]{3,4}-[0-9]{4}$/", $youPhone);

    if($sheck_number == false){
        msg("전화번호가 정확하지 않습니다. 올바른 번호(000-0000-0000) 형식으로 작성해주세요.");
        exit;
    }

    // 이메일 중복 검사
    $isEmailCheck = false;

    $sql = "SELECT youEmail FROM members WHERE youEmail = '$youEmail'";
    $result = $connect -> query($sql);

    if($result){
        $count = $result -> num_rows;

        if($count == 0){
            $isEmailCheck = true;
        } else {
            msg("이미 회원가입이 되어 있습니다.");
            exit;
        }
    } else {
        msg("에러발생1: 관리자에게 문의하세요.");
        exit;
    }

    // 핸드폰 중복 검사
    $isPhoneCheck = false;

    $sql = "SELECT youPhone FROM members WHERE youPhone = '$youPhone'";
    $result = $connect -> query($sql);

    if($result){
        $count = $result -> num_rows;

        if($count == 0){
            $isPhoneCheck = true;
        } else {
            msg("이미 회원가입이 되어 있습니다.");
            exit;
        }
    } else {
        msg("에러발생2: 관리자에게 문의하세요.");
        exit;
    }

    //회원가입
    if($isEmailCheck == true && $isPhoneCheck == true){
        // 데이터 입력하기
        $sql = "INSERT INTO members(youEmail, youName, youPass, youPhone, regTime) VALUES('$youEmail', '$youName', '$youPass', '$youPhone', '$regTime')";
        $result = $connect -> query($sql);

        if($result){
            msg("회원가입을 축하합니다! <div class='intro__btn'><a href='../login/login.php'>로그인</div>");
            exit;
        } else {
            msg("에러발생3: 관리자에게 문의하세요.");
            exit;
        }
    } else {
        msg("이미 회원가입이 되어 있습니다.");
        exit;
    }
?>
            <div class="intro__btn"><a href="#">메인으로</a><a href="#">로그인</a></div></div>
        <!-- intro__inner -->
    </main>
    <!-- //main -->

</body>
</html>

< 틀리게 작성시 실패한 원인을 알려줍니다. >

 

 

 

이 페이지는 회원가입 폼에서 입력된 데이터의 유효성을 검사하고, 중복된 이메일과 전화번호를 확인한 후, 데이터베이스에 회원정보를 저장하는 역할을 합니다.

 

PHP를 이용하여 회원가입 데이터를 검증하고, 데이터베이스에 저장하는 코드도 포함되어 있습니다.

이 페이지는 PHP를 사용하여 동적으로 생성되므로, 서버 측에서 실행됩니다.

 

 

 

 

 

로그인

<main id="main" class="container">
    <div class="login__inner">
            <h2>로그인</h2>
            <p>로그인을 하시면 게시물 및 댓글 작성이 가능합니다. <br>회원가입을 하면 로그인이 가능합니다.<br>admin@admin.com/1234</p>
            <div class="login__form bmStyle btStyle">
                <form action="loginSave.php" name="loginSave" method="post">
                    <fieldset>
                        <legend class="blind">로그인 영역</legend>
                        <div>
                            <input type="email" id="youEmail" name="youEmail" class="inputStyle" placeholder="이메일" required>
                        </div>
                        <div>
                            <input type="password" id="youPass" name="youPass" class="inputStyle" placeholder="비밀번호" required>
                        </div>
                        <button type="submit" class="btnStyle2 mt20">로그인</button>
                    </fieldset>
                </form>
            </div>
            <div class="login__footer">
                <ul class="listStyle">
                    <li>회원가입을 하지 않았다면 회원가입을 먼저 해주세요! <a href="join.html">회원가입</a></li>
                    <li>아이디가 기억나지 않는다면! <a href="#">아이디 찾기</a></li>
                    <li>비밀번호가 기억이 나지 않는다면! <a href="#">비밀번호 찾기</a></li>
                </ul>
            </div>
    </main>

 

아이디와 비밀번호를 입력하고 로그인 버튼을 누르면 로그인 확인(loginSave.php)로 이동합니다.

 

 

 

 

 

로그인 확인

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP 블로그 만들기</title>
    <?php 
    include "../include/head.php" ?>
</head>
<body class="gray">
    <?php include "../include/skip.php" ?>
    <!-- //skip -->
    <?php include "../include/header.php" ?>
    <!-- //header -->
    <main id="main" class="container">
        <div class="intro__inner center bmStyle">
            <picture class="intro__images">
                <source srcset="../assets/img/joinEnd01.png, ../assets/img/joinEnd01@2x.png 2x, ../assets/img/joinEnd01@3x.png 3x" />
                <img src="../assets/img/joinEnd01.png" alt="회원가입 이미지">
            </picture>
<?php
    include "../connect/connect.php";
    include "../connect/session.php";

    $youEmail = $_POST['youEmail'];
    $youPass = $_POST['youPass'];
    
    // echo $youEmail, $youPass;

    // 데이터 출력
    function msg($alert){
        echo "<p class='intro__text'>$alert</p>";
    }


    // 데이터 조회
    $sql = "SELECT memberID, youEmail, youName, youPass FROM members WHERE youEmail = '$youEmail' AND youPass = '$youPass'";
    $result = $connect -> query($sql);
    
    if($result){
        $count = $result -> num_rows;
        
        if($count == 0){
            msg("이메일 또는 비밀번호가 틀렸습니다. 다시 한번 확인해주세요!<br><div class='intro__btn'><a href='../login/login.php'>로그인</div>");
        } else {
            // 로그인 성공
            $memberInfo = $result -> fetch_array(MYSQLI_ASSOC);

            // echo "<pre>";
            // var_dump($memberInfo);
            // echo("/pre");

            // 세선 생성
            $_SESSION['memberID'] = $memberInfo['memberID'];
            $_SESSION['youEmail'] = $memberInfo['youEmail'];
            $_SESSION['youName'] = $memberInfo['youName'];

            Header("Location: ../main/main.php");
        }
    }
?>
        </div>
        <!-- //intro__inner  -->
    </main>
    <!-- //main -->
</body>
</html>

 

 

  1. 로그인 폼에서 사용자가 입력한 이메일과 비밀번호를 받아옵니다. 
  2. 입력받은 이메일과 비밀번호를 데이터베이스에서 조회합니다. 
  3. 조회 결과, 입력한 이메일과 비밀번호가 일치하면 로그인 성공 후 세션을 생성합니다. 
  4. 일치하지 않으면 에러 메시지를 출력하고 로그인 폼으로 돌아갑니다.

 

 

 

// 세션 생성
$_SESSION['memberID'] = $memberInfo['memberID'];
$_SESSION['youEmail'] = $memberInfo['youEmail'];
$_SESSION['youName'] = $memberInfo['youName'];

Header("Location: ../main/main.php");

로그인에 성공할 시 세션에 테이블 정보를 저장합니다.

이것을 통해 로그인과 로그아웃을 구별합니다.

 

로그아웃을 누를시 

 

 

<?php
    include "../connect/session.php";

    unset($_SESSION['memberID']);
    unset($_SESSION['youEmail']);
    unset($_SESSION['youName']);

    Header("Location: ../main/main.php");
?>

세션에 테이블 정보를 없애서 로그아웃 형태로 만들 수 있습니다.

 

 

 

 

'MySQL'의 다른글

  • 현재글MYSQL PHP html연동해서 회원가입, 로그인,로그아웃 사이트 만들기

관련글

댓글

티스토리툴바