PHP

PHP로 사이트 만들기 (회원가입, 로그인)

이미사용 2023. 4. 19. 23:39
명언
-
728x90
반응형

※메인 화면

<?php
        include "../connect/connect.php";
        include "../connect/session.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 bmStyle">
            <picture class="intro__images">
                <source srcset="../assets/img/intro01.png, ../assets/img/intro01@2x.png 2x, ../assets/img/intro01@3x.png 3x" />
                <img src="../assets/img/intro01.png" alt="소개이미지">
            </picture> 
            <p class="intro__text">
                어떤 일이라도 노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다.
                신입의 열정과 도전정신을 깊숙히 새기며 배움에 있어 겸손함을 
                유지하며 세부적인 곳까지 파고드는 개발자가 되겠습니다.
            </p>
        </div>
    </main>
    <!-- //main -->
</body>
</html>

 

main에 필요한 정보를 가져와 실행 해주거나 직접 입력하였습니다.

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

- 맨 처음에 있는 이것은 sql에 에있는 회원 정보 와 php 세션을 시작하는 함수 가져오고 있습니다.

 

connect.php

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

- sql의 에 접속을 해 그곳에 있는 회원의 정보를 가져오고 있습니다.

 

session.php

<?php
    session_start();
?>

- 세션을 시작하는 함수 입니다.

- 웹 애플리케이션에서 사용자 상태를 추적하거나 데이터를 저장하기 위해 세션을 사용합니다

- 이 함수로 인해 로그인을 하면 회원의 값을 가져오거나 로그인이 된 상태 인지를 알수있게 해줍니다.

 


 

<?php include "../include/head.php" ?>를 사용해서 head.php 에있는 정보를 가져옵니다.

 

head.php

    <!-- CSS -->
    <link rel="stylesheet" href="../html/assets/css/style.css">
    <!-- SCRIPT -->
    <script defer src="../html/assets/js/common.js"></script>

- 여기에는 css의 정보와 운영체제의 정보가 있습니다.

 


 

 

헤더 부분과 스킵부분은 창이 바뀌어도 고정으로 나오기 때문에 항상 고정시켜줍니다.

<?php include "../include/skip.php" ?> 과 <?php include "../include/header.php" ?>를 이용해 정보를 가져와 따로 만들어 두었던 스킵과 헤더을 불러옵니다.

 

skip.php

<div id="skip">
    <a href="#header">헤더 영역 바로가기</a>
    <a href="#main">컨텐츠 영역 바로가기</a>
    <a href="#footer">푸터 영역 바로가기</a>
</div>
    <!-- //skip -->

- 탭을 눌렀을때 각 영역으로 바로갈수 있는 기능을 넣어 놓았습니다.

 

header.php

<header id="header">
    <div class="header__inner container">
        <div class="left">
            <a href="../index.html" class="star">
                <span class="blind">메인으로</span>
            </a>
        </div>
        <h1 class="logo">
            <a href="../main/main.php">Developer Blog</a>
        </h1>
        <div class="right">
            <!-- 로그인이 된 경우 -->
            <?php
                if(isset($_SESSION['memberID'])){ ?>
                    <ul>
                        <li><a href="../mypage/mypage.php"><?=$_SESSION['youName'] ?>님 환영합니다.</a></li>
                        <li><a href="../login/logout.php">로그아웃</a></li>
                    </ul>
            <?php  } else { ?>
                <ul>
                    <li><a href="../join/join.php">회원가입</a></li>
                </ul>
                <?php   } ?>
                <!-- 로그인이 안된 경우 -->
        </div>
    </div>
    <nav class="nav__inner">
        <ul>
            <li><a href="../join/join.php">회원가입</a></li>
            <li><a href="../login/login.php">로그인</a></li>
            <li><a href="#">게시판</a></li>
            <li><a href="#">블로그</a></li>
        </ul>
    </nav>
</header>
<!-- //header -->

- 사이트 맨위에 있는 창으로 로고와 회원가입, 네비등의 역활을 하고있습니다.

- if(isset($_SESSION['memberID']))를  사용해 만약 있다면 헤더 옆에 이름을 넣어 환엽합니다를 붙여주어 로그인인 상태와 로그아웃 알려줍니다. 만약 없다면 회원가입 창을 보여줍니다.

 

logout.php

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

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

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

- 로그 아웃을 하는 곳이며 unset 을 사용하여 회원을 값을 삭제 하여 로그아웃을 진행 합니다.

 


 

※회원가입

<!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="text" 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>
    </main>
    <!-- //main -->
</body>
</html>

- 회원 가입에 필요한 정보를 입력하는 곳 입니다. 

- 정보를 다 입력하고 회원 가입 완료 버튼을 누르면 joinSave.php가 실행 되며 정보가 제대로 입력이 되었는지 확인을 해줍니다.

 

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>
            <?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_mail = preg_match("/^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/", $youEmail);

                if($check_mail == 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("번호가 정확하지 않습니다. 올바른 번호(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')";
                    $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;
                }

                
                // 사용자가 데이터 입력 ---> 유효성 검사(o) ---> 통과 --> 회원가입(쿼리문 정송)
                // 사용자가 데이터 입력 ---> 유효성 검사(o) ---> 통과(이메일주소/핸드폰 ) --> 통과 --> 회원가입(쿼리문 정송)
                // 사용자가 데이터 입력 ---> 유효성 검사(x) ---> 통과 --> 회원가입(쿼리문 정송)
            ?>
            
                <a href="#">메인으로</a>
        </div>
        <!-- intro__inner -->
    </main>
    <!-- //main -->
</body>
</html>

- 정보가 제대로 입력 되었는지 확인하는 곳입니다

 

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

- 회원 가입에서 입력한 값을 가져오고 있습니다.

 

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

                if($check_mail == 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("번호가 정확하지 않습니다. 올바른 번호(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;
                }

- preg_match() 함수를 사용하여 회원가입의 정보를 규정에 맞게 입력 하였는지 확인하고 그값이 틀렸다면 틀린부분을 알려 주고, exit를 통해 다음 정보의 검사를 멈추게 됩니다.

- 핸드폰과 이메일의 중복 사용을 막기위해 중복확인을 합니다.

- 우선 회원정보가 들어있는 sql에  핸드폰과 이메일을 찾아볼 수 있게 $sql을 이용해 sql의 검색조건을 저장해 주었습니다.

- 그후 그값을 sql의 정보가 저장 되어 있는 $connect 에 query()을 이용하여 실행을 해준 값을 $result로 저장 하여 줍니다.

- 그 다음 조건문으로 $result 를 실행 했을때 num_rows로 인하여 값이 있다면 반환된 값 마다 숫자로 가져오고 만약 없다면 0을 가져 옵니다 그값을 $count에 저장합니다.

- 그렇게 $count가 0일때는 true가 나와서 회원가입이 가능한 상태가 되고, 0이 아닐때는 이미 만들어진 이메일과 폰 번호이기에 로그인을 해달라고 메세지를 주고 있습니다. 그외에 에러는 관리자에게 문의 하라고 하고 있습니다.


※로그인

<!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="blind required"></label>
                            <input type="email" id="youEmail" class="inputStyle" name= "youEmail" placeholder="이메일" required>
                        </div>
                        <div>
                            <label for="youPass" class="blind required"></label>
                            <input type="password" id="youPass" class="inputStyle" name= "youPass" 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>
        </div>
    </main>
    <!-- //main -->
</body>
</html>

- 로그인을 하는 창입니다. 로그인에 필요한 정보를 입력한후 로그인 버튼을 클릭하면 loginSave.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>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'>로그인</a></div>");
        } else {
            //로그인 성공
            $memberInfo = $result -> fetch_array(MYSQLI_ASSOC);

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

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

- 회원 가입 때와 마찬 가지로 사용자의 입력값을 가져와 sql에 그값이 있는지 확인을 하여 있고 없음을 확인 한후  없을경우에는 메세지를 보내고 있을 경우에는 로그인이 성공 되며 $memberInfo 에 $result를 실행하여 나온 유저의 값을fetch_array(MYSQLI_ASSOC)을 통해 배열로 가져와 $_SESSION로 세션을 생성하여 사용자의 정보를 가져옵니다.

- 그후 Header("Location: ../main/main.php")를 통해 값의 정보를 수정한후 main 페이지로 넘어가게 해줍니다.

(로그인을 계속 유지하게 하기위해선 위에서 말했던 session_start() 가 필요합니다.)

 

 

 

 

session_start() -PHP에서 세션을 시작하는 함수입니다.
-세션은 웹사이트의 사용자와 서버간의 정보 교환을 유지하기 위한 메커니즘입니다. 예를 들어, 로그인 세션을 사용하면 사용자가 로그인한 후에도 웹사이트를 계속 사용할 수 있습니다.
unset  PHP에서 변수나 배열 등의 값을 삭제하는 함수입니다.
preg_match() - PHP에서 제공하는 정규표현식 함수 중 하나로, 문자열이 정규표현식과 일치하는지를 검사합니다.
- 정규표현식과 검사할 문자열을 매개변수로 받으며, 일치하는 문자열이 있으면 1을 반환하고, 일치하는 문자열이 없으면 0을 반환합니다.
exit PHP에서 스크립트의 실행을 중지하고, 현재까지의 출력을 전송하는 함수입니다
query MySQLi 객체의 메서드 중 하나로, MySQL 데이터베이스에서 SQL 쿼리를 실행합니다.
num_rows MySQLi 객체의 메서드 중 하나로, SELECT 쿼리에 대한 결과 집합에서 반환된 행(row)의 수를 반환합니다.
fetch_array(MYSQLI_ASSOC) MySQLi_result 객체에서 호출하는 메서드 중 하나로, 결과 집합에서 다음 행(row)을 배열로 반환합니다.
Header("Location: ")  PHP에서 제공하는 함수 중 하나로, HTTP 헤더(header)를 수정하여 브라우저를 다른 페이지로 이동시킵니다.