My Melody Kawaii

PHP/사이트 만들기

PHP 사이트 만들기 01 : 회원가입부터 로그아웃까지

younajeong 2023. 4. 20. 01:08

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

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

PHP 사이트 만들기

php를 사용해서 사이트를 만들어 보도록 하겠습니다. html과 php를 사용해서 사이트를 만들어볼 예정입니다. 

먼저 피그마로 전체적인 사이트의 툴을 만들어 주었습니다. 

 

그 후 MAMP를 켜서 php에 접속해서 들어갈 수 있도록 합니다.

 

vscode를  열어서 html폴더를 열어서 assets폴더를 만들어 준 후 그 안에 css,img,js폴더를 만들어 줍니다. 그 안에 join,joinEnd,login,main html를 만들어 줍니다. 그리고 css폴더 안에 commons.css,fonts.css,intro.css,join.css,layout.css,login.css, resets.css,style.css,vars.css를 만들 어 줍니다.

 

CSS 폴더  

commons : 전체적인 공통의 요소의 css가 들어갈 때 설정할 수 있는 속성들을 설정해 줍니다.

fonts : 폰트를 설정 해줍니다.

intro : 첫 메뉴에 나오는 intro이미지에 css속성값을 넣어줍니다.

join : 회원가입 페이지에 들어갈 css속성값을 넣어줍니다.

layout : 전체적인 header와 nav에 필요한 속성값을 넣어주는 곳입니다.

login : 로그인 페이지에 들어갈 css속성값을 넣어줍니다.

resets : 전체적으로 하나하나 태그들에 필요한 속성값을 넣어주는 곳입니다.

style : css로 갈 수 있는 경로를 설정 해주는 곳입니다.

vars : CSS변수 , 커스텀 속성으로 값을 정의하고 재사용할 수 있는 곳입니다.

 

include 폴더  

include폴더를 만들어 줌으로써 전체적인 head, header, skip의 구조를 만들어 준 후 필요한 페이지에 inculde를 사용해서 연결해 주면 포함되어있는 구조가 다 생기게끔 만들어 줄 수 있습니다.

PHP 메인 페이지 만들기

<완성된 페이지>

<php코드>

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

    echo "<pre>";
    var_dump($_SESSION);
    echo "</pre>";
?>

<!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>

php

  • 전체적으로 include로 경로를 설정해 줍니다. 
  • main에는 컨테이너를 걸어주고 intro 의 inner와 imges를 만들어서 img를 넣어주고 text를 만들어서 필요한 문구를 설정해 줍니다.

 

PHP 회원가입 페이지 만들기

 

<완성된 페이지>

 

<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 container">
            <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

  • head안에 head를 넣어주고 skip과 header를 차례대로 넣어줍니다.
  • main안에 container를 만들어 주고 join__form을 만들어 준 후 fidlset안에 legend를 만들어 준 후 div박스를 만들어서 label과 input을 만들어 준 후 회원가입에 필요한 정보를 입력 해줍니다. 그리고 class를 사용해서 공통 css로 만들어준 속성을 부여해 줍니다.
  • form에 액션에는 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">
            <div class="intro__images">
                <picture>
                    <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>
            </div>
        
<?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_mail == 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("번호가 정확하지 않습니다. 올바른 번호 (0000-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>");
        } else {
            msg("에러발생3: 관리자에게 문의하세요!");
            exit;
        }
    } else {
        msg("이미 회원가입이 되어 있습니다. 로그인 해주세요!");
        exit;
    }

?>         
        </div>
        <!-- //intro__inner -->
    </main>
    <!-- //main -->

</body>
</html>

여기에서는 회원가입 완료 페이지를 만들어 주는데 이 때 php를 사용해서 include로 connect.php로 연결을 시켜준 후 회원가입에 필요한 정보들을 POST로 연결 시켜 줍니다. 

 

 메세지 출력으로 function을 사용해서 메세지가 출력될 수 있도록 설정해 줍니다. 그리고 유효성 검사를 통해서 이메일,이름,비밀번호,휴대폰번호들이 올바른 방식으로 적혀져 있는지 확인 할 수 있게끔 설정 해주는데 정규식 표현을 사용하고 if문을 사용해서 출력될 수 있도록 설정해줍니다. 

 

이메일 중복검사와 핸드폰 중복검사도 전체적으로 나올 수 있도록 설정해 줍니다. 

 

 

 

설정을 해주고 회원가입을 잘못하게 된다면 페이지가 이렇게 뜨게 됩니다.

 

회원가입에 올바르게 입력한다면 창이 뜨게 되고 로그인을 누르면 로그인 페이지로 이동하게 됩니다.

 

 

 

 

 

 

 

 

PHP 로그인 페이지 만들기

<완성된 페이지>

<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.html">회원가입</a></li>
                    <li>아이디가 기억나지 않는다면! <a href="#">아이디 찾기</a></li>
                    <li>비밀번호가 기억나지 않는다면! <a href="#">비밀번호 찾기</a></li>
                </ul>
            </div>
        </div>

    </main>
    <!-- //main -->
</body>
</html>

php

  • 로그인 페이지에서도 회원가입 페이지와 비슷한 구조로 만들어 줍니다.
  • 회원가입 페이지와는 다르게 login__inner안에 login__from안에 이메일 영역과 비밀번호 영역을 그대로 남겨두고 버튼은 로그인 버튼만 남겨놓습니다.
  • 회원가입 페이지와 다르게 footer를 만들어서 li를 만들고 그 안에 필요한 멘트를 적어줍니다. 회원가입으로 가는 페이지에는 a태그를 걸어서 join.html로 페이지가 넘어갈 수 있도록 만들어 줍니다.

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>

    <?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">
            <div class="intro__images">
                <picture>
                    <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>
            </div>

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

loginSave에서는 로그인을 실행할 때 나탈수 있는 설정을 해주는 겁니다. 이 때 sesscion이라는 폴더를 만들어서 sesscion start를 설정해 주므로써 로그인을 할 때 로그인한 회원이 페이지 내에서 자유롭게 글을 작성하거나 삭제하거나 자유롭게 활동할 수 있게끔 만들어 줄 수 있습니다.

 

include로 경로를 설정해준 후 이메일과 비밀번호를 $를 사용해서 만들어 준 후 데이터 출력을 위해 function을 사용해서 데이터를 출력해 준 후 데이터 조회를 한 후에 로그인이 실패했을 때와 성공했을 때 메세지를 걸어둡니다. 그리고 세션을 설정해서 main 으로 넘어갈 수 있도록 설정해 줍니다.

 

 

로그인이 완료되면 회원가입시 입력했던 이름이 뜨고 메인페이지로 이동하게 됩니다.

 

로그인이 완료되지 않는다면 확인해달라는 페이지가 뜨며 로그인으로 이동할 수 있게끔 만들어 줍니다.

 

 

 

 

PHP 로그아웃 페이지 만들기

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

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

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

로그아웃 페이지는 session으로 연결 후 unset()함수를 사용해서 세션에 저장돤 memberID, Email,Name변수를 모두 삭제 해줍니다. 이렇게 하면서 사용자가 로그아웃 할 때 서버에서 해당 사용자의 세션 데이터가 삭제되어 로그인한 사용자와 상호작용이 끊어지게 됩니다.

Header()함수를 사용하여 로그아웃후에 사용자를 다른페이지로 이동시킵니다. Location헤더를 설정해 메인 페이지로 이동할 수 있게끔 합니다.

 

<이동한 페이지>