MYSQL/php

php로 홈페이지 만들기_회원가입, 로그인, 로그아웃

아라라_ 2023. 4. 19. 23:36

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

Frederick Philips Brooks
Mythical Man-Month 저자
728x90

오늘은 php을 통해 실시간으로 홈페이지를 만들고 수정합니다. 이때 데이터 베이스에 값을 저장하여 진짜 회원가입하고 로그인까지 하는 것을 구현하였습니다.

 

join.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/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>
        <!-- //intro__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="email" id="youEmail" class="inputStyle" name="youEmail" placeholder="이메일을 적어주세요!" required>
                        </div>
                        <div>
                            <label for="youName" class="required">이름</label>
                            <input type="text" id="youName" class="inputStyle" name="youName" placeholder="이름을 적어주세요!" required>
                        </div>
                        <div>
                            <label for="youPass" class="required">비밀번호</label>
                            <input type="password" id="youPass" class="inputStyle" name="youPass" placeholder="비밀번호을 적어주세요!" required>
                        </div>
                        <div>
                            <label for="youPassC" class="required">비밀번호확인</label>
                            <input type="password" id="youPassC" class="inputStyle" name="youPassC" placeholder="다시 한번 비밀번호을 적어주세요!" required>
                        </div>
                        <div>
                            <label for="youPhone" class="required">연락처</label>
                            <input type="text" id="youPhone" class="inputStyle" name="youPhone" placeholder="연락처를 적어주세요!" required>
                        </div>
                        <button type="submit" class="btnStyle">회원가입 완료</button>
                    </fieldset>
                </form>
            </div>
        </div>
         <!-- //join__inner -->
    </main>
    <!-- //main -->
</body>
</html>

이 HTML 코드는 회원가입 페이지를 만드는 코드입니다. 페이지에는 회원가입을 유도하는 이미지와 메시지, 이메일, 이름, 비밀번호, 비밀번호 확인, 연락처 등 회원가입에 필요한 정보를 입력할 수 있는 폼이 포함되어 있습니다. 폼은 "joinsave.php" 라는 PHP 스크립트를 통해 전송됩니다. 또한, 이 코드는 웹사이트의 공통적인 요소들을 포함하는 다른 PHP 파일을 include하여 사용합니다.

 

 

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>
</head>

<?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";

                    $youEmail = $_POST["youEmail"];
                    $youName = $_POST["youName"];
                    $youPass = $_POST["youPass"];
                    $youPassC = $_POST["youPassC"];
                    $youPhone = $_POST["youPhone"];
                    $regTime = time();

                    // echo $youEmail, $youName, $youPass, $youPhone;

                    //    $sql = "INSERT INTO members(youEmail,youName,youPass,youPhone,regTime) VALUES ('$youEmail','$youName','$youPass','$youPhone','$regTime')";
                    //    $connect -> query($sql);

                    // 메세지 출력
                    function msg($alert){
                        echo "<p class = 'intro__text'>$alert</p>";
                        
                    }
                    // 이메일 유효성 검사
                    $check_meil = preg_match("/^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/", $youEmail);

                    if($check_meil == false){
                        msg("이메일이 잘못되었습니다. 다시 한번 확인해 주세요");
                        exit;
                    }

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

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

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

                    // $youPass = sha1($youPass);

                    //휴대폰 번호 유효성 검사

                    $check_number = preg_match("/^(010|011|016|017|018|019)-[0-9]{3,4}-[0-9]{4}$/", $youPhone);
                    if($check_number == false){
                        msg("번호가 정확하지 않습니다. 올바를 번호(010-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')";
                        $connect -> query($sql);

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

                    // echo $result;

                    //데이터 입력하기
                    // $sql = "INSERT INTO members(youEmail,youName,youPass,youPhone,regTime) VALUES ('$youEmail','$youName','$youPass','$youPhone','$regTime')";
                    // $connect -> query($sql);
                ?>

            
        </div>
        <!-- //intro__inner -->
    </main>
    <!-- //main -->
</body>
</html>
  • 이것은 웹사이트에 가입하려는 사용자의 양식 데이터를 처리하는 PHP 스크립트입니다. 이 스크립트는 입력 필드 (이메일, 이름, 비밀번호 및 전화번호)에 대한 유효성 검사를 포함하고, 모든 유효성 검사를 통과하면 사용자 데이터를 MySQL 데이터베이스에 삽입합니다. 유효성 검사 또는 데이터베이스 삽입 과정 중에 오류가 발생하면 사용자에게 오류 메시지가 표시됩니다.
  • 스크립트는 웹사이트의 헤더, 푸터 및 기타 공통 요소를 포함하는 다른 PHP 파일을 include 함수를 사용하여 먼저 포함합니다. 그런 다음 POST 슈퍼글로벌 배열에서 양식 데이터를 검색하고 개별 변수에 저장합니다. 그 다음, 사용자에게 오류 메시지를 출력하는 msg 함수를 정의합니다. 이 함수는 스크립트 전체에서 발생하는 모든 오류를 표시하는 데 사용됩니다.
  • 그 다음, 스크립트는 양식 데이터에 대해 유효성 검사를 수행합니다. 이메일 주소의 형식, 이름의 길이와 한글 문자, 비밀번호 및 비밀번호 확인 필드의 일치 여부, 전화번호의 형식을 확인합니다. 유효성 검사 중 하나라도 실패하면 스크립트는 msg 함수를 사용하여 오류 메시지를 출력하고 스크립트를 종료합니다.
  • 모든 유효성 검사가 통과하면 스크립트는 SQL 쿼리를 사용하여 데이터베이스에서 이메일과 전화번호가 이미 존재하는지 확인합니다. 데이터베이스에 이미 이메일 또는 전화번호가 있으면 오류 메시지가 표시되고 스크립트가 종료됩니다.
  • 마지막으로, 이메일과 전화번호가 모두 고유한 경우, 스크립트는 SQL INSERT 문을 사용하여 사용자 데이터를 MySQL 데이터베이스에 삽입합니다. 데이터베이스 삽입이 성공하면 msg 함수를 사용하여 성공 메시지와 로그인 페이지로 이어지는 링크가 표시됩니다. 데이터베이스 삽입 중에 오류가 발생하면 사용자에게 오류 메시지가 표시됩니다.

 

 

login.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="login__inner">
             <h2>로그인</h2>
             <p>로그인을 하시면 게시글 및 댓글 작성이 가능합니다.<br>회원가입을 하면 로그인이 가능합니다.<br>admin@admin.com/1234</p>
             <div class="login__form btStyle bmStyle" >
                <form action="loginSave.php" name="loginSave" method = "post">
                    <fieldset>
                        <legend class="blind">로그인 영역</legend>
                        <div>
                            <label for="youEmail" class="required blind">이메일</label>
                            <input type="email" id="youEmail" name="youEmail" class="inputStyle" placeholder="이메일" required>
                        </div>
                        <div>
                            <label for="youPass" class="required blind">비밀번호</label>
                            <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/join.html">회원가입</a></li>
                    <li>아이디가 기억나지 않는다면? <a href="#">아이디 찾기</a></li>
                    <li>비밀번호가 기억나지 않는다면? <a href="#">비밀번호 찾기</a></li>
                </ul>
             </div>
        </div>
         <!-- //login__inner -->

         
        <!-- 
        <div class="intro__inner"></div>    각페이지 소개 배너
        <div class="join__inner"></div>     회원가입
        <div class="login__inner"></div>    로그인
        <div class="intro__inner"></div>    
        <div class="join__inner"></div>    
        <div class="sliders__inner"></div>
        <div class="banners__inner"></div>
        <div class="cards__inner"></div>
        <div class="images__inner"></div>
        <div class="ads__inner"></div>
        <div class="texts__inner"></div>
        <div class="login__inner"></div>
        <div class="blog__inner"></div> -->
    </main>
    <!-- //main -->
</body>
</html>
  • 첫 번째 줄에서는 문서 유형을 선언하고, 다음 줄에서는 한국어를 사용하며, 다음 줄에서는 문서에 대한 메타 데이터를 정의합니다. 그 다음 줄에서는 head 태그를 열고, head 태그 내부에서는 문서의 제목을 설정하고, 다른 파일을 포함시키는 PHP 코드를 사용하여, head 태그 내부에 들어갈 코드를 정의합니다.
  • body 태그 내부에서는 skip, header, main, login__inner 등의 div 태그를 사용하여 문서의 구조를 만듭니다. form 태그를 사용하여 로그인 정보를 입력하고, 로그인 버튼을 클릭하면 loginSave.php로 정보를 전송합니다.
  • 마지막으로, PHP 코드를 사용하여 로그인 페이지의 하단 부분에 회원가입, 아이디 찾기, 비밀번호 찾기 등의 링크를 생성합니다.

 

 

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>회원가입 완료 페이지</title>
</head>

<?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'>로그인</a></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>
  • <html> 태그로 HTML 문서의 시작을 나타냅니다.
  • <head> 태그 안에는 문서의 메타 정보와 스타일 시트, 스크립트 등의 리소스를 로드하는 코드가 들어갑니다.
  • <body> 태그 안에는 실제 페이지의 내용이 들어갑니다.
  • <?php include ... ?> 코드는 다른 PHP 파일을 include하는 코드입니다. 이를 사용하여 코드의 재사용성과 유지보수성을 높일 수 있습니다.
  • $_POST는 HTML 폼에서 전송된 POST 요청 데이터를 담고 있는 PHP의 전역 변수입니다.
  • $connect는 MySQL 데이터베이스에 연결하는 객체입니다. 이 객체는 별도의 PHP 파일을 통해 생성됩니다.
  • $youEmail과 $youPass는 폼에서 전송된 이메일과 비밀번호를 담고 있습니다.
  • msg() 함수는 오류 메시지를 출력하는 역할을 합니다.
  • $sql은 MySQL 데이터베이스에서 실행할 쿼리문을 담고 있습니다.
  • $result는 쿼리 결과를 저장하는 객체입니다.
  • $count는 쿼리 결과의 레코드 수를 저장합니다.
  • $memberInfo는 로그인에 성공한 회원의 정보를 저장합니다.
  • Header() 함수는 HTTP 헤더를 설정하여 페이지를 이동시킵니다.

 

 

logout.php

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

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

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

?>
  • 먼저 include 함수를 사용하여 session.php 파일을 로드합니다. session.php 파일은 세션을 시작하거나 이미 시작된 세션을 재개하기 위한 코드가 포함되어 있습니다.
  • 다음으로, unset 함수를 사용하여 세션 변수 $_SESSION['memberID'], $_SESSION['youEmail'], $_SESSION['youName']을 모두 삭제합니다. 이렇게 하면 현재 로그인된 사용자의 정보가 모두 삭제되므로 로그아웃 상태가 됩니다.
  • 마지막으로, Header 함수를 사용하여 ../main/main.php 페이지로 이동합니다. 이 페이지는 로그아웃 후에 보여질 페이지이며, 이동하기 전에 반드시 로그아웃 처리가 완료되어야 합니다. 따라서 unset 함수를 먼저 호출한 후 Header 함수를 호출하는 것입니다.

 

 

'MYSQL/php'의 다른글

  • 현재글php로 홈페이지 만들기_회원가입, 로그인, 로그아웃

관련글

댓글

티스토리툴바