오늘은 PHP로 회원가입과, 로그인, 로그아웃을 하는 방법에 대해 알아보겠습니다.
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>PHP 회원가입 페이지</title>
<?php include "../include/head.php" ?>
</head>
<body class="pink">
<?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>1. 먼저, HTML 태그를 이용하여 페이지의 전반적인 구조를 생성합니다. <head> 태그 안에서는 문서의 문자 인코딩 방식과 뷰포트 설정, 그리고 페이지 제목 등의 정보를 지정합니다. <body> 태그 안에서는 페이지의 내용을 정의합니다.
2. PHP 코드를 이용하여 다른 파일들을 include 합니다. head.php 파일은 페이지의 헤드 부분에 해당하는 내용을 포함합니다. skip.php 파일은 스킵 네비게이션 링크를 포함합니다. header.php 파일은 페이지의 헤더 부분에 해당하는 내용을 포함합니다.
3. 그 이후로는 실제로 회원가입 폼을 생성합니다. <main> 태그 안에서 회원가입을 유도하는 이미지와 문구를 담은 div 요소를 생성하고, 이어서 회원가입 폼이 위치하는 div 요소를 생성합니다.
4. <form> 태그 안에서는 회원가입 정보를 입력하는 <input> 요소들과 회원가입을 완료하는 <button> 요소가 정의되어 있습니다. <fieldset> 태그를 이용하여 폼 요소들을 그룹화하고, <legend> 태그를 이용하여 폼 요소 그룹의 제목을 설정합니다.
5. <input> 요소들은 각각 type, id, name, class, placeholder, required 속성을 가지고 있습니다. type 속성은 입력 양식의 종류를 지정하고, id 속성은 입력 양식을 식별하기 위한 고유한 이름을 설정합니다. name 속성은 입력 양식의 이름을 지정하며, class 속성은 CSS 스타일을 적용하기 위한 클래스 이름을 지정합니다. placeholder 속성은 입력 양식에 입력해야 할 값의 예시를 제공합니다. required 속성은 해당 입력 양식의 값이 필수적으로 입력되어야 한다는 것을 의미합니다.
6. 회원가입 폼 제출 시 정보를 처리하는 PHP 파일인 joinSave.php를 action 속성으로 지정하여 폼 제출 기능을 구현합니다.
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="pink">
<?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);
// 사용자가 데이터 입력 -> 유효성 검사 -> 통과 -> 회원가입(쿼리문전송)
// 사용자가 데이터 입력 -> 유효성 검사 -> 통과(이메일주소/핸드폰)(O) -> 회원가입(쿼리문전송)
// 사용자가 데이터 입력 -> 유효성 검사 -> 통`과(X) -> 회원가입(쿼리문전송)
// 메세지 출력
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|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;
}
?>
</div>
<!-- //intro__inner -->
</main>
<!-- //main -->
</body>
</html>이 페이지의 내용 중 일부는 PHP 코드로 작성되어 있습니다. 이 코드는 사용자가 입력한 회원가입 양식의 데이터를 받아와 유효성을 검사한 후, 데이터베이스에 저장하게 됩니다. 또한, 이 코드는 중복 가입을 방지하기 위해 이메일 주소와 핸드폰 번호를 검사하고, 이미 가입한 경우 메시지를 표시합니다.
HTML 코드는 페이지의 구조와 디자인을 나타냅니다. 이 페이지에서는 페이지의 제목, 스타일 시트, 헤더, 메인 콘텐츠, 이미지, 그리고 메시지가 포함됩니다. 이 페이지의 구조는 일반적인 HTML 구조를 따르고 있습니다.
🔒로그인
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="pink">
<?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="listStyle2">
<li>회원가입을 하지 않았다면 회원가입을 먼저 해주세요! <a href="join.html">회원가입</a></li>
<li>아이디가 기억이 나지 않는다면? <a href="#">아이디 찾기</a></li>
<li>비밀번호가 기억이 나지 않는다면? <a href="#">비밀번호 찾기</a></li>
</ul>
</div>
</div>
</main>
<!-- //main -->
</body>
</html>1. ?php include "../include/head.php" ?>
include 함수를 사용하여 "head.php" 파일을 포함시킵니다. 이 파일에는 웹 페이지의 <head> 태그 안에 들어갈 내용이 들어 있을 것입니다.
2. <?php include "../include/skip.php" ?>
"skip.php" 파일을 포함시키는데, 이 파일은 웹 페이지 내비게이션을 건너뛸 수 있는 링크를 제공합니다.
3. <?php include "../include/header.php" ?>
"header.php" 파일을 포함시키는데, 이 파일은 웹 페이지 상단에 헤더를 표시하는 역할을 합니다.
form 태그에서 action="loginSave.php"을 사용하여 로그인 기능이 구현된 "loginSave.php" 파일로 이동하도록 합니다.
4. name 속성이 youEmail과 youPass인 input 태그를 사용하여 이메일과 비밀번호를 입력받습니다.
5. type="email"과 type="password" 속성을 사용하여 이메일과 비밀번호를 입력할 때 적절한 형식으로 입력하도록 유도합니다.
6. required 속성을 사용하여 이메일과 비밀번호를 반드시 입력해야 함을 나타냅니다.
7. button 태그를 사용하여 "로그인" 버튼을 만들고, class="btnStyle2"를 사용하여 버튼 스타일을 지정합니다.
8. ul 태그와 li 태그를 사용하여 회원가입 및 아이디/비밀번호 찾기 링크를 제공합니다.
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="pink">
<?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>다시 한 번 확인해주세요! <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>1. include 함수를 사용하여 다른 PHP 파일에 있는 코드를 가져와서 사용합니다. ../connect/connect.php 파일에는 데이터베이스 접속 정보가 있고, ../connect/session.php 파일에는 세션을 설정하는 코드가 있습니다.
2. 로그인 폼에서 POST 방식으로 전달된 youEmail과 youPass 값을 $youEmail과 $youPass 변수에 저장합니다.
3. msg 함수는 전달된 메시지를 화면에 출력하는 역할을 합니다.
4. 데이터베이스에서 이메일과 비밀번호가 일치하는 회원 정보를 조회하는 SQL 문을 작성합니다. $sql 변수에 저장합니다.
5. query 함수를 사용하여 데이터베이스에서 $sql 변수에 저장된 SQL 문을 실행합니다. 결과를 $result 변수에 저장합니다.
$result 변수에 저장된 결과의 개수(num_rows)를 확인하여, 일치하는 회원 정보가 없는 경우 msg 함수를 사용하여 오류 메시지를 출력합니다.
6. 일치하는 회원 정보가 있는 경우, $memberInfo 변수에 회원 정보를 저장합니다.
7. $_SESSION 변수를 사용하여 세션 정보를 설정합니다.
로그인이 성공적으로 처리되면, Header 함수를 사용하여 메인 페이지로 이동합니다. 이때 location 매개변수에 메인 페이지의 URL을 지정합니다.
logout.php
<?php
include "../connect/session.php";
unset($_SESSION['memberID']);
unset($_SESSION['youEmail']);
unset($_SESSION['youName']);
Header("Location: ../main/main.php");
?>먼저, include "../connect/session.php"를 통해 세션을 시작합니다. 그리고 unset() 함수를 사용하여 현재 세션에서 memberID, youEmail, youName 세션 변수를 삭제합니다. 이는 현재 로그인된 사용자 정보를 지우는 것입니다.
마지막으로, Header() 함수를 사용하여 "../main/main.php"로 리다이렉션합니다. 이는 로그아웃 후 메인 페이지로 이동하는 것입니다. 이 코드에서 Header() 함수를 사용하기 위해, 이전에 출력되었던 HTTP 헤더를 모두 삭제하고 새로운 HTTP 헤더를 생성합니다. 그리고 마지막에 exit() 함수를 호출하여 PHP 실행을 종료합니다.
