PHP 회원가입 페이지, 로그인 페이지

728x90

PHP 회원가입 페이지, 로그인 페이지

PHP

PHP는 서버 측에서 실행되는 프로그래밍 언어로 HTML을 프로그래밍적으로 생성해주고, 데이터베이스와 상호작용 하면서 데이터를 저장하고, 표현합니다. PHP는 웹을 위해서 만들어졌고, 지금도 웹을 위해서 발전하고 있는 웹을 위한 언어입니다. 웹프로그래밍을 위한 높은 생산성을 제공하는 언어입니다. 특히 서버에 직접 설치해서 운영할 수 있는 설치형 웹에플리케이션(제로보드, 텍스트큐브, 워드프래스, PHPBB등)의 과반이 PHP로 만들어졌습니다. 따라서 PHP를 배워두시면 이러한 솔루션들에 대한 운영, 문제해결 능력이 향상됩니다. 무엇보다 쉽습니다.

PHP 장점

웹에 최적화된 언어
웹개발에 필요한 수많은 로직들이 함수의 형태로 미리 제공됨
크로스플랫폼
거의 모든 데이터베이스를 지원
가장 많은 공개 소프트웨어가 PHP로 만들어짐

PHP 사용

웹페이지와 연동할 수 있는 PHP 폴더를 만들어줍니다.

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

    if(mysqli_connect_errno()){
        echo "Database Connect False";
    } else {
        // echo "Database Connect True";
    }
?>

페이지 만들기

먼저 페이지 구상을 미리 짜놓고 만들면 편합니다.

회원가입 페이지

코드 블럭

<!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="email" 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>

구성

html 코드 작성하듯이 작성을 해줍니다.
style css는 <?php include "../include/head.php" ?>로 포함시켜줍니다.
웹 페이지 유형상 skip메뉴는 <?php include "../include/skip.php" ?>로 포함시켜줍니다.
header 구역도 <?php include "../include/header.php" ?>로 포함시켜줍니다.
main 구역에는 알맞게 태그를 작성해서 텍스트를 입력해줍니다.

회원가입 완료 페이지

코드 블럭

<?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')";
        $result = $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;
    }
?>

구성

html 코드는 회원가입 페이지와 비슷하게 style css, skip 메뉴, header 구역을 include를 사용해서 가져옵니다.
main 구역에 <?php ?>를 작성하고 그 안에 이제 내용을 작성을 해줍니다.
먼저 include "../connect/connect.php";를 입력해서 페이지와 연동을 시켜줍니다.
그리고 변수를 저장해줘서 회원가입에 입력했던 각각의 내용이 같은지 확인을 해줍니다.
다음 회원가입 페이지에서 입력한 정보들이 맞는지 유효성 검사를 해줍니다.
// 이메일 유효성 검사에서 변수를 저장하고 preg_match를 사용해서 ("/^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/", $youEmail);를 입력하는데 " " 안에는 이메일 유형의 정규식 표현을 입력하고 $youEmail과 같은지 확인을 해줍니다. 그리고 if문을 사용해서 잘못됐는지 아닌지 판단하고 메세지를 띄어줍니다.
// 이름 유효성 검사에서 변수를 저장하고 preg_match를 사용해서 ("/^[가-힣]{9,15}$/", $youName);를 입력하는데 " " 안에는 이름 유형의 정규식 표현을 입력하고 $youName과 같은지 확인을 해줍니다. 그리고 if문을 사용해서 잘못됐는지 아닌지 판단하고 메세지를 띄어줍니다.
// 비밀번호 유효성 검사에서는 비밀번호 $youPass와 비밀번호 확인 $youPassC와 같은지 확인을 해줍니다. 그리고 if문을 사용해서 잘못됐는지 아닌지 판단하고 메세지를 띄어줍니다.
// 휴대폰 유효성 검사에서 변수를 저장하고 preg_match를 사용해서 ("/^(010|011|016|017|018|019)-[0-9]{3,4}-[0-9]{4}$/", $youPhone);를 입력하는데 " " 안에는 휴대폰 유형의 정규식 표현을 입력하고 $youPhone과 같은지 확인을 해줍니다. 그리고 if문을 사용해서 잘못됐는지 아닌지 판단하고 메세지를 띄어줍니다.
// 이메일 중복 검사에서 변수 $isEmailCheck의 데이터를 false로 저장하고 변수 $sql의 데이터를 회원 정보 중 작성한 이메일이 있는 지 확인해주는 "SELECT youEmail FROM members WHERE youEmail = '$youEmail'";을 입력하고 쿼리문을 작성해서 확인해줍니다. if문을 사용해서 확인한 결과가 있는지 정보의 열이 있는지 숫자로 변수를 저장하고 if문을 사용해서 0이면 사용가능한 데이터이고 아니면 이메일 정보가 있는 것이므로 다시 이메일을 작성하게 해줍니다.
// 휴대폰 중복 검사에서 변수 $isPhoneCheck의 데이터를 false로 저장하고 변수 $sql의 데이터를 회원 정보 중 작성한 이메일이 있는 지 확인해주는 "SELECT youPhone FROM members WHERE youPhone = '$youPhone'";을 입력하고 쿼리문을 작성해서 확인해줍니다. if문을 사용해서 확인한 결과가 있는지 정보의 열이 있는지 숫자로 변수를 저장하고 if문을 사용해서 0이면 사용가능한 데이터이고 아니면 휴대폰 정보가 있는 것이므로 다시 휴대폰을 작성하게 해줍니다.
// 회원가입으로 가서 $isEmailCheck과 $isPhoneCheck의 값이 true이고 회원정보가 정확하게 입력이 됐으면 변수 $sql을 "INSERT INTO members(youEmail, youName, youPass, youPhone, regTime) VALUES('$youEmail', '$youName', '$youPass', '$youPhone', '$regTime')";을 각각의 정보가 맞는지 값을 불러오고 쿼리문을 작성해서 맞으면 회원가입 완료 문구를 띄워줍니다.

로그인 페이지

코드 블럭

<!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 container">
            <h2>로그인</h2>
            <p class="login__text">
                로그인을 하시면 게시글 및 댓글 작성이 가능합니다.<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" name="youEmail" class="inputStyle" placeholder="이메일" required>
                        </div>
                        <div>
                            <label for="youPass" class="blind required">비밀번호</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>

구성

html 코드 작성하듯이 작성을 해줍니다.
style css는 <?php include "../include/head.php" ?>로 포함시켜줍니다.
웹 페이지 유형상 skip메뉴는 <?php include "../include/skip.php" ?>로 포함시켜줍니다.
header 구역도 <?php include "../include/header.php" ?>로 포함시켜줍니다.
main 구역에는 알맞게 태그를 작성해서 텍스트를 입력해줍니다.

로그인 완료 페이지

코드 블럭

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

구성

html 코드는 회원가입 페이지와 비슷하게 style css, skip 메뉴, header 구역을 include를 사용해서 가져옵니다.
main 구역에 <?php ?>를 작성하고 그 안에 이제 내용을 작성을 해줍니다.
먼저 include "../connect/connect.php";를 입력해서 페이지와 연동을 시켜줍니다.
생성한 세션을 include "../connect/session.php";를 입력해서 스타트 해줍니다.
로그인과 이메일과 비밀번호만 입력하므로 이메일과 비밀번호의 정보를 가져옵니다.
// 데이터 조회에서 입력한 이메일 과 비밀번호가 있는지 확인하기 위해 변수 $sql의 데이터를 "SELECT memberID, youEmail, youName, youPass FROM members WHERE youEmail = '$youEmail' AND youPass = '$youPass'";를 입력해서 저장해줍니다. 쿼리문을 작성해서 $result라는 변수로 저장해줍니다. if문을 사용해서 만약에 결과에 대한 내용을 입력해줍니다. if문을 사용해서 확인한 결과가 있는지 정보의 열이 있는지 숫자로 변수를 저장하고 숫자가 0이면 데이터의 정보가 없으므로 다시 한번 입력하게끔 해줍니다. 아니면 결과의 정보 배열을 $memberInfo로 데이터를 저장하고 세션에서 입력한 정보와 결과의 정보가 맞는 지 확인하고 맞으면 메인 페이지로 이동하게 해줍니다.

로그아웃 페이지

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

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

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

구성

먼저 <?php ?>를 작성해줍니다.
다음 include "../connect/session.php";를 입력해서 생성한 세션 정보를 가져옵니다.
unset를 사용해서 세션 정보를 지워줍니다.
로그아웃이 됐으면 메인 페이지로 이동하게 해줍니다.

참고

preg_match

첫 번째 인수 : 정규식 표현 작성.
두 번째 인수 : 검색 대상 문자열.
세 번째 인수 : 배열 변수 반환. 패턴 매치에서 매칭된 값을 배열로 저장.
반환값 : 매칭에 성공하면 1, 실패하면 0이 반환

unset

변수 제거에 사용하는 함수입니다.

728x90

코딩 공부하기

PHP 회원가입 페이지, 로그인 페이지

PHP 회원가입 페이지, 로그인 페이지

코드 블럭

구성

코드 블럭

구성

코드 블럭

구성

코드 블럭

구성

구성

참고

티스토리툴바

PHP 회원가입 페이지, 로그인 페이지

PHP 회원가입 페이지, 로그인 페이지

코드 블럭

구성

코드 블럭

구성

코드 블럭

구성

코드 블럭

구성

구성

참고

관련글

티스토리툴바