JOIN 완성화면
코드 보기
<div class="intro__inner center bmstyle">
<picture class="intro__image">
<source srcset="../assets/img/join01-min.png, ../assets/img/join01@2x-min.png 2x, ../assets/img/join01@3x-min.png 3x"/>
<img src="../assets/img/join01.png" alt="joinimg">
</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" placeholder="연락 가능한 연락처를 입력하세요." required>
</div><button type="submit" class="btnStyle">회원가입</button>
</fieldset>
</form>
</div>
</div>
<form action="joinSave.php" name="join" method="post">
: 폼 요소를 생성하는 form 태그이다.
action 속성은 회원가입 정보를 저장할 서버 측 스크립트 파일의 경로를 지정한다.
name 속성은 폼의 이름을 지정하며, method 속성은 HTTP 요청 방식을 지정하는 속성이며, 현재 코드에서는 post 방식을 사용한다.
fieldset
:폼 요소를 그룹화 하는 요소이다.
label의 required
:폼 요소의 필수 입력 항목임을 나타내는 클래스이다.
inpit의 type, id, name, class, placeholder, required
: type 속성은 폼 요소의 타입을 지정한다. email이라면 이메일을, pass라면 비밀번호를, text라면 텍스트(혹은 숫자)를 받아온다.
id 속성은 레이블1과 연결되는 폼 요소의 고유한 식별자이다.
name 속성은 서버 측 스크립트에서 폼 요소를 참조할 때 사용된다.
class 속성은 CSS 스타일링을 위해 지정된 클래스 이름이다.
placeholder 속성은 사용자에게 폼 요소에 입력할 내용을 안내하는 텍스트를 제공한다. ex) 이메일을 작성해주세요.
required 속성은 input의 required와 같이 폼 요소가 필수 항목임을 나타낸다.
JOIN Save 완성 화면
코드 보기
<main id="main" class="container">
<div class="intro__inner center bmstyle">
<picture class="intro__image">
<source srcset="../assets/img/joinEnd01.png"/>
<img src="../assets/img/joinEnd01.png" alt="joinEndimg">
</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("/^[가-힣a-zA-Z]+$/", $youName);
if($check_name == false) {
msg("이름 작성란을 다시 확인해주세요.");
exit;
}
//비밀번호 (password)
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("입력하신 연락처가 정확하지 않습니다. 다시 확인하세요.");
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 ("error : 관리자에게 문의하여 주시길 바랍니다. 불편을 드려 죄송합니다.");
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 ("error 2 : 관리자에게 문의하여 주시길 바랍니다. 불편을 드려 죄송합니다.");
exit;
}
//전부 이상 X -> 회원가입
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("error 3 : 관리자에게 문의하여 주시길 바랍니다. 불편을 드려 죄송합니다.");
exit;
}
} else {
msg("이미 같은 정보로 가입된 회원이 있습니다. 아이디 찾기나 비밀번호 찾기를 진행하세요.");
exit;
}
?>
</div>
<!-- intro__inner -->
</main>
<!-- main -->
include "../connect/connect.php";
:데이터베이스에 연결하기 위해 connect.php 파일을 불러온다.
$_POST['you~']
:회원가입 폼에서 전송된 데이터를 $_POST 배열을 사용하여 변수에 저장한다.각각의 변수는 이메일, 이름, 비밀번호, 비밀번호 확인, 연락처 정보를 저장한다.
$regTime = time( );
: time( ) 함수를 사용하여 현재 시간을 $regTime 변수에 저장한다.이 변수는 회원가입을 한 시간 정보를 확인하기 위해 사용되는 것이다.이렇게 저장된 변수들은 이후에 데이터 베이스에 저장하기 위해 사용된다.
function msg($alert) { ... }
: msg 라는 이름의 함수를 정의한다. 이 함수는 $alert 라는 매개변수를 받는다.
echo "<p class='intro__text'>$alert</p>";
: $alert 변수에 저장된 메시지를 출력하는 역할을 한다이 메시지는 HTML의 <p> 태그 내부에 출력된다.
폼 데이터의 유효성 검사에서 오류 메시지를 출력할 때 사용된다.오류 메시지를 출력하는 다양한 방법 중에서도 이 함수는 출력 내용을 직접 지정하기 때문에 다양한 상황에 적용이 가능하다는 이점이 존재한다.
유효성 검사 - 이메일
preg_match는 정규식 패턴을 사용하여 문자열 검색을 수행하는 PHP 함수이다.preg_match 안의 소괄호에는 검사할 이메일 주소의 패턴을 정규식으로 표현한 문자열이 들어있다.이메일 주소의 유효성을 검사하는 정규식 패턴은 다양하나, 만들어 사용할 수도 있다.
$youEmail은 입력된 이메일 주소 값을 의미하며, if($check_mail == false)는검사한 이메일 주소가 패턴에 맞지 않을 경우 즉, 이메일 주소가 유효하지 않을 경우를 처리하기 위한 조건문이다.유효하지 않을 경우, msg 함수를 호출하여 오류 메시지를 출력한 후 exit;를 통해 프로그램을 즉시 종료한다.이 이후에 처리되어야 할 코드가 있다면 실행되지 않는다.
유효성 검사 - 이름
preg_match 함수를 사용하여 정규식 패턴을 이용, 문자열 검색을 수행한다.소괄호 안에는 검사할 이름의 패턴을 정규식으로 표현한 문자열이 들어있다.이 코드에서는 한글과 영문대소문자만 허용하도록 정의되어 있다.
if($check_name == false)는 검사된 이름 값이 패턴에 맞지 않을 경우를 처리하기 위한 조건문으로, msg 함수를 호출하여 오류 메시지를 출력한 후 exit;를 통해 프로그램을 즉시 종료한다. 마찬가지로 이후에 처리되어야 할 코드는 실행되지 않는다.
유효성 검사 - 비밀번호
if($youPass !== $youPassC)는 입력된 비밀번호 값과 비밀번호 확인 값이 일치하지 않을 경우를 처리하기 위한 조건문으로 일치하지 않을 시 msg 함수를 호출하여 오류 메시지를 출력한 후 exit;를 통하여 프로그램을 즉시 종료한다.
$youPass = sha1($youPass); 는 입력된 비밀번호 값을 SHA-1이라는 이름의 알고리즘을 사용하여 암호화 하는 구문이다.SHA-1은 입력된 값을 160 비트로 압축한 다음 40자리의 16진수 문자열로 변환하는 해시 함수이다.이를 통해 보안성을 높일 수 있다.
유효성 검사 - 연락처
$youPhone 변수에 저장된 값이 정규식에 맞는지 확인한다.이 정규식은 대한민국의 전화번호 형식을 검사하며, 전화번호의 앞 세 자리는 010, 011, 016, 017, 018, 019 중 하나로 시작하고, 그다음에는 -(하이픈)으로 구분된 3-4자리 숫자와 -로 구분된 4자리의 숫자로 이루어져 있어야 한다.
$check_number 변수는 preg_match( ) 함수를 통해 $youPhone 변수에 저장된 값이 정규식과 일치하는지 여부를 확인한 결과를 저장한다.$check_number 변수 값이 false 즉, $youPhone 변수에 저장된 값이 정규식과 일치하지 않는다면 msg 함수를 호출하여 오류 메시지를 출력하고 exit; 를 통해 프로그램을 즉시 종료한다.
이메일 중복 검사
회원가입 시 입력한 이메일이 이미 회원가입이 되어있는지 중복검사를 실행한다.$isEmailCheck 변수를 false로 초기화 한 후 입력받은 이메일을 SELECT 쿼리문을 이용해 members 테이블에서 조회한다.조회한 결과가 있다면 $count 변수에 조회된 행(row) 수를 저장한다.이후 $count 값이 0이라면 입력한 이메일이 이미 회원가입이 되어있지 않다는 뜻이므로 $isEmailCheck 값을 false에서 true로 변경한다.
만약 $count 값이 0이 아니라면 이미 해당 이메일로 가입한 사용자가 존재한다는 뜻이므로, 사용자에게 이를 알리고 회원가입을 중단시킨다.
또한 만약에 SELECT 쿼리문 실행에 실패했다면 데이터베이스와의 연결 문제가 발생한 것이므로 사용자에게 에러 메시지를 출력하여 보여주고 회원가입을 중단 시킨다.
연락처 중복 검사
$isPhoneCheck 변수를 초기화하여 중복되지 않은 연락처인 경우에만 값을 true로 변경한다.SQL 쿼리를 사용하여, 데이터베이스에서 해당 연락처를 가진 회원을 찾고, 결과가 반환되면 결과의 행 수를 확인하여 해당 연락처를 가진 회원이 이미 존재하는지 확인한다.중복되지 않은 경우 $isPhoneCheck를 true로 설정한다.결과가 반환되지 않거나, 에러가 발생하는 경우 msg( ) 함수를 호추랗여 에러 메시지를 출력 시켜 보여준 후 회원가입을 중단 시킨다.
전부 이상이 없을 시 회원가입
이 부분은 회원가입 페이지에서 사용자가 입력한 정보들을 검사하고, 문제가 없으면 회원가입을 완료하는 기능을 수행한다.사용자의 이메일 주소, 이름, 비밀번호, 비밀번호 확인, 연락처가 유효한지 여부를 정규 표현식으로 확인하고 이메일과 전화번호는 중복 검사도 수행하며if($isEmailCheck == true && $isPhoneCheck = true), 중복된 정보가 있는 경우 회원가입을 완료하지 않고 오류 메시지를 출력한다.
회원가입에 필요한 정보들을 검사하여 오류가 발생한 경우 msg 함수를 호출하여 오류 메시지를 출력하고 exit; 함수를 호출하여 프로그램을 종료한다.모든 검사과정이 정상적으로 진행되면, 쿼리문을 사용하여 회원정보를 데이터 베이스에 저장하고 완료 메시지를 출력한다.
($sql = "INSERT INTO members(youEmail, youName, youPass, youPhone, regTime) VALUES('$youEmail', '$youName', '$youPass', '$youPhone', '$regTime')"; $result = $connect -> query($sql); )
LOGIN 완성화면
LOGIN Save 완성화면
코드 보기
<div class="intro__inner center bmstyle">
<picture class="intro__image">
<source srcset="../assets/img/joinEnd01.png"/>
<img src="../assets/img/joinEnd01.png" alt="joinEndimg">
</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 -->
include "../connect/connect.php";와 indclude "../connect/session.php";는 데이터베이스 연결과 세션을 시작하는 코드이다.
$_POST는 폼 데이터를 받아오는 PHP의 슈퍼 글로벌 변수이다.
이 변수를 사용하여 로그인 폼에서 입력한 이메일과 비밀번호를 받아온다.
$youEmail과 $youPass는 받아온 이메일과 비밀번호를 저장하는 변수로, 이후 로그인 과정에서 이 변수들을 사용한다.
메인페이지에서 $_SESSION 슈퍼 글로벌 배열2의 내용을 출력한다.
PHP에서 $_SESSION 배열은 동일한 사용자의 다른 페이지 또는 요청 간에 세션 데이터를 저장하는데 사용된다.
var_dump( ) 함수는 $_SESSION 배열의 내용을 변수의 데이터 유형과 값이 포함된 구조화된 형식으로 출력한다.
pre 태그를 사용하여 출력을 줄 바꿈 및 적절한 들여쓰기와 같이 더 가독성 있게 포맷한다.