PHP 회원가입, 로그인하는 방법

코딩 공부/PHP

PHP 회원가입, 로그인하는 방법

천서리 2023. 4. 19. 23:22

QUOTE THE DAY

“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”

- 이글슨 (Eagleson)

PHP란?

PHP는 Hypertext Preprocessor의 약어로, 서버 측에서 실행되는 스크립트 언어입니다. PHP는 주로 동적 웹 페이지를 생성하고 관리하는 데 사용됩니다. PHP는 오픈 소스 언어이며, 웹 서버에서 무료로 실행될 수 있습니다.

PHP는 HTML과 함께 사용되며, PHP 코드를 HTML 문서 안에 포함시킬 수 있습니다. 이렇게 함으로써 PHP는 웹 페이지를 동적으로 생성하고 데이터베이스와 상호 작용할 수 있는 능력을 갖춥니다. PHP는 또한 파일 업로드, 이메일 전송, 세션 관리, 암호화, 데이터베이스 연결 등과 같은 기능도 제공합니다.

PHP는 많은 유명한 CMS(Content Management System) 및 프레임워크(Framework)에서 사용됩니다. 예를 들어, WordPress, Drupal, Joomla, Laravel, CodeIgniter 등이 있습니다.

회원가입 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="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>

먼저 HTML 파일을 작성하였습니다. HTML 파일의 기본 구조에 맞게 <html>, <head>, <body> 등의 요소를 사용하였습니다.
<head> 요소 안에서는 문서 제목(title), 인코딩 방식(charset), 뷰포트 설정(viewport), 외부 파일을 가져오는데 사용되는 <link> 태그, <script> 태그 등이 포함되어 있습니다. 여기서는 PHP를 사용하여 include로 다른 파일을 가져오는 것도 구현되어 있습니다.
<body> 안에서는 회원가입 페이지의 구성 요소들이 들어가게 됩니다. 가장 먼저 스킵 네비게이션을 포함한 헤더(header) 부분이 작성되었습니다. 그리고 메인(main) 요소 안에서는 회원가입을 안내하는 인트로(intro) 영역과 실제 회원가입 폼(form)이 위치하게 됩니다. 인트로 영역 안에는 이미지와 안내 문구가 들어가게 됩니다. 그리고 폼 안에서는 사용자로부터 이메일, 이름, 비밀번호, 비밀번호 확인, 연락처를 입력받는 입력 요소들과 회원가입 버튼이 들어가게 됩니다.
마지막으로 CSS 파일을 작성하여 회원가입 페이지를 스타일링하였습니다. CSS 파일에서는 주로 폰트, 색상, 레이아웃 등의 스타일을 지정하게 됩니다.

회원가입 완료 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;
    // $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_mail = preg_match("/^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/", $youEmail);
    if($check_mail == false){
        msg("이메일이 잘못되었습니다. 다시 한번 확인해주세요!!");
    }

    //이름 유효성 검사
    $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;
    }


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

?>

            <div class="intro__btn">
                <a href="#">메인으로</a>
                <a href="#">로그인</a>
            </div>
        </div>
        <!-- //intro__inner -->
    </main>
    <!-- //main -->
</body>
</html>

PHP로 작성된 서버 측 웹 애플리케이션입니다. 이 코드는 회원가입 페이지에서 사용자가 입력한 정보를 검증하고, 데이터베이스에 새로운 회원 정보를 추가합니다.
입력된 이메일, 이름, 비밀번호, 전화번호를 검증합니다. 검증 절차에서 이메일 형식, 이름 길이와 문자열의 한글 여부, 비밀번호 일치 여부, 전화번호 형식을 확인합니다. 검증에 실패하면, 사용자에게 메시지를 표시하고, 회원가입 절차를 중단합니다.
코드는 중복된 이메일과 전화번호가 있는지 데이터베이스에서 검색합니다. 이메일 또는 전화번호가 중복되면, 회원가입을 중단하고 메시지를 표시합니다. 중복이 없으면, 새로운 회원 정보를 데이터베이스에 추가하고, 회원가입이 완료됐음을 사용자에게 알리는 메시지를 출력합니다.

로그인 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 bmStyle btStyle">
                <form action="loginSave.php" name="loginSave" method="post">
                    <fieldset>
                        <legend class="blind">로그인 영역</legend>
                        <div>
                            <label for="youEmail" class="blind" class="required">이메일</label>
                            <input type="email" id="youEmail" name="youEmail" class="inputStyle" placeholder="이메일" required>
                        </div>
                        <div>
                            <label for="youPass" class="blind" class="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="login.html">아이디 찾기</a></li>
                    <li>비밀번호가 기억이 나지 않는다면! <a href="#">비밀번호 찾기</a></li>
                </ul>
            </div>
        </div>
    </main>
    <!-- //main -->

</body>
</html>

HTML5 문서를 선언하고, 한글 언어를 사용하도록 설정하였습니다.
head 태그 내부에 문서의 인코딩, 브라우저 호환성, 뷰포트 설정, 페이지 타이틀 등을 지정하였습니다. 또한, include 폴더 내부에 있는 head.php 파일을 포함시켜서 공통된 head 영역을 적용하도록 했습니다.
body 태그 내부에 전체적인 레이아웃을 구성하는 코드가 위치하고 있습니다.
skip.php 파일을 include하여, 스킵 내비게이션 역할을 하는 링크를 제공합니다.
header.php 파일을 include하여, 상단 네비게이션 바를 구성합니다.
main 태그 내부에 로그인 페이지에 필요한 요소들을 구성합니다.
로그인 폼의 input 요소들은 사용자로부터 입력을 받을 수 있도록 하고, required 속성을 적용하여 필수 입력 필드임을 나타냅니다.
form 태그의 action 속성을 "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>회원가입 완료페이지</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);

            // 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 문서가 작성되고 필요한 부분에 PHP include 문을 사용하여 다른 파일의 내용을 가져옵니다. 이 페이지에서는 head, skip, header 등의 파일이 포함됩니다.
이후에는 PHP로 구성된 로그인 로직이 실행됩니다. 먼저, 회원이 입력한 이메일과 비밀번호를 POST 방식으로 전달받아 변수에 저장합니다. 그리고 데이터 출력을 위한 msg 함수를 정의합니다.
데이터베이스에서 회원 정보를 조회하는 SQL 쿼리를 작성합니다. 이 쿼리는 입력된 이메일과 비밀번호를 이용하여 members 테이블에서 일치하는 정보를 찾습니다.
쿼리 실행 결과를 $result 변수에 저장하고, 결과가 있는 경우 결과의 행 수를 $count 변수에 저장합니다. $count가 0이면 이메일 또는 비밀번호가 틀렸다는 메시지를 출력합니다. 그렇지 않으면 로그인이 성공하였으므로, $memberInfo 변수에 회원 정보를 저장합니다. 이후에는 세션을 생성하여 회원 정보를 저장하고, 메인 페이지로 리다이렉트합니다.
마지막으로 HTML 문서의 마무리를 지으며, 회원가입 완료 이미지를 출력하고, 페이지 내용 중간에 PHP 로직이 삽입되어 있으므로 PHP 코드가 끝나는 지점을 나타내는 닫는 div 태그를 삽입합니다.

로그아웃 logout.php

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

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

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

해당 코드는 로그아웃 페이지입니다.

session.php 파일을 포함시켜서 세션을 사용할 수 있도록 합니다.
unset() 함수를 사용하여 현재 세션 변수에 저장된 사용자 정보를 모두 삭제합니다.
Header() 함수를 사용하여 로그아웃 후에 메인 페이지로 이동하도록 합니다. 이 때, Location: 속성을 사용하여 이동할 페이지를 지정합니다.

이렇게 로그아웃이 완료되면, 사용자는 세션에 저장된 정보가 모두 삭제되어 로그인하지 않은 상태가 됩니다.

현재글PHP 회원가입, 로그인하는 방법

GIT 블로그

Loading data ...

코딩, 텍스트유형, mysql, 선언적함수, 이미지텍스트유형, xor연산, 자바스크립트, 리턴 함수, or연산, 함수, 매개변수 함수, 오서방닭개장, jabascript, 안산순두부짬뽕, 마우스이펙트, javascript, 시흥순두부맛집, function, HTML, 카드 유형,

Today :
Yesterday :

SEOLHEE