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="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" class="inputStyle" name="youEmail" placeholder="이메일을 적어주세요." required>
</div>
<div>
<label for="youName" class="required">이름</label>
<input type="text" id="youName" class="inputStyle" name="youName" placeholder="이름을 적어주세요." required>
</div>
<div>
<label for="youPass" class="required">비밀번호</label>
<input type="password" id="youPass" class="inputStyle" name="youPass" placeholder="비밀번호를 적어주세요." required>
</div>
<div>
<label for="youPassC" class="required">비밀번호 확인</label>
<input type="password" id="youPassC" class="inputStyle" name="youPassC" placeholder="다시 한번 비밀번호를 적어주세요." required>
</div>
<div>
<label for="youPhone" class="required">연락처</label>
<input type="text" id="youPhone" class="inputStyle" name="youPhone" placeholder="연락처를 적어주세요." required>
</div>
<button type="submit" class="btnStyle">회원가입 완료</button>
</fieldset>
</form>
</div>
</div>
</main>
<!-- //main -->
</body>
</html>PHP와 HTML을 사용하여 만든 회원가입 페이지의 소스 코드입니다.
<?php include "../include/head.php" ?> : 다른 파일의 내용을 이 파일에 포함합니다. 이 경우 "../include/head.php" 파일의 내용을 포함합니다.
<?php include "../include/skip.php" ?> : 웹 접근성을 높이기 위한 스킵 내비게이션을 구현하는 코드를 포함합니다.
<?php include "../include/header.php" ?> : 웹 페이지의 헤더를 구현하는 코드를 포함합니다.
main 태그 안에는 회원 가입시 필요한 영역들(이메일, 이름, 비밀번호, 비밀번호 재확인, 연락처)을 정의했습니다.
<form action="joinSave.php" name="join" method="post">
회원가입 폼을 나타내는 form 태그입니다. action 속성은 폼을 제출할 때 이동할 페이지를 지정합니다.
name 속성은 폼의 이름을 지정하며, method 속성은 폼을 전송할 HTTP 메서드를 지정합니다.
<legend class="blind">회원가입 영역</legend>
폼의 범위를 나타내는 legend 태그입니다.
이 태그는 화면에는 보이지 않지만, 스크린 리더 등 보조기기를 사용하는 사용자들에게 폼의 목적을 전달합니다.
<label for="youEmail" class="required">이메일</label>
입력항목의 라벨을 나타내는 label 태그입니다. for 속성은 해당 라벨과 연결된 입력항목의 id를 지정합니다.
class 속성으로 required 값을 지정하여, 이 입력항목이 필수항목임을 나타냅니다.
<input type="text" id="youEmail" class="inputStyle" name="youEmail" placeholder="이메일을 적어주세요." required>
입력항목을 나타내는 input 태그입니다. type 속성이 text로 지정되어 있으므로, 이 입력항목은 텍스트 입력을 받습니다.
id 속성은 해당 입력항목을 식별하는 고유한 값입니다.
name 속성은 입력항목의 이름을 지정하며, placeholder 속성으로 입력항목에 대한 설명을 표시합니다.
<button type="submit" class="btnStyle">회원가입 완료</button>
회원가입 폼을 제출하는 버튼을 나타내는 button 태그입니다. type 속성이 submit으로 지정되어 있으므로, 이 버튼을 클릭하면 폼이 제출됩니다.
class 속성으로 btnStyle 값을 지정하여, 버튼의 스타일을 지정합니다.
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>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 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;
// 메세지 출력
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')";
$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>
../connect/connect.php 파일을 include 함수를 사용하여 불러와서 데이터베이스에 접속할 수 있습니다.
회원가입 폼에서 사용자가 입력한 정보들을 $_POST 메서드로 전송받아 각각의 정보들을 변수에 저장하고, 이를 유효성 검사하여 올바른 값인지 확인하는 코드입니다.
이메일, 이름, 전화번호가 유효한지 검사하기 위해 정규식을 사용합니다.
이름이 한글이며 3~5글자 사이인지, 비밀번호와 비밀번호 확인 값이 일치하는지, 이메일과 휴대폰 번호가 유효한 형식인지 등을 검사합니다.
검사를 통과한 경우, 해당 이메일과 휴대폰 번호 중복 검사를 통해 이미 등록된 회원인지 확인합니다.
이미 등록된 회원 정보면 '이미 회원가입이 되어있습니다. 로그인 해주세요!'라는 문구가 나오게 됩니다.
등록되지 않은 경우에만 회원 정보를 데이터베이스에 입력하고, 입력 후에는 회원가입을 축하하는 메세지와 함께 로그인 페이지로 이동할 수 있는 링크가 제공됩니다.
만약 입력 중 오류가 발생하면 관리자에게 문의하도록 안내합니다.
로그인 화면
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 btStyle bmStyle">
<form action="loginSave.php" name="logSave" 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>PHP와 HTML을 사용하여 만든 로그인 페이지의 소스 코드입니다.
<?php include "../include/head.php" ?> : 다른 파일의 내용을 이 파일에 포함합니다. 이 경우 "../include/head.php" 파일의 내용을 포함합니다.
<?php include "../include/skip.php" ?> : 웹 접근성을 높이기 위한 스킵 내비게이션을 구현하는 코드를 포함합니다.
<?php include "../include/header.php" ?> : 웹 페이지의 헤더를 구현하는 코드를 포함합니다.
main 태그 안에는 로그인 시 필요한 영역들(이메일, 비밀번호)과 회원가입, 아이디찾기, 비밀번호찾기 영역들을 정의했습니다.
<form action="loginSave.php" name="logSave" method="post">
로그인 폼을 나타내는 form 태그입니다. action 속성은 폼을 제출할 때 이동할 페이지를 지정합니다.
name 속성은 폼의 이름을 지정하며, method 속성은 폼을 전송할 HTTP 메서드를 지정합니다.
<label for="youEmail" class="required">이메일</label>
입력항목의 라벨을 나타내는 label 태그입니다. for 속성은 해당 라벨과 연결된 입력항목의 id를 지정합니다.
class 속성으로 required 값을 지정하여, 이 입력항목이 필수항목임을 나타냅니다.
<input type="email" id="youEmail" name="youEmail" class="inputStyle" placeholder="이메일을 적어주세요." required>
입력항목을 나타내는 input 태그입니다. type 속성이 text로 지정되어 있으므로, 이 입력항목은 텍스트 입력을 받습니다.
id 속성은 해당 입력항목을 식별하는 고유한 값입니다.
<button type="submit" class="btnStyle2 mt20">로그인</button>
회원가입 폼을 제출하는 버튼을 나타내는 button 태그입니다. type 속성이 submit으로 지정되어 있으므로, 이 버튼을 클릭하면 폼이 제출됩니다.
class 속성으로 btnStyle 값을 지정하여, 버튼의 스타일을 지정합니다.
로그인 폼 아래에는 회원가입, 아이디 찾기, 비밀번호 찾기 링크가 포함된 <ul> 태그가 있습니다.
각각의 링크는 <a> 태그를 사용하여 구성하고, href 속성을 사용하여 해당 페이지의 경로를 지정합니다.
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>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 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>../connect/connect.php 파일과 ../connect/session.php 파일을 include 함수를 사용하여 불러옴으로써 데이터베이스에 접속하고, 세션을 생성할 수 있습니다.
로그인 폼에서 사용자가 입력한 정보들을 $_POST를 사용하여 이메일과 비밀번호 값을 가져옵니다.
함수 msg는 인자로 전달된 문자열을 출력하는 함수입니다.
데이터 조회 후에 결과가 없으면, 이메일 또는 비밀번호가 틀렸다는 알림 메시지를 출력하기 위해 사용됩니다.
데이터 조회를 위해 SQL 쿼리를 사용하여 members 테이블에서 이메일과 비밀번호가 모두 입력한 값과 일치하는 행을 검색합니다.
조회한 결과를 $result 변수에 저장합니다.
조회 결과를 검증하기 위해 $result 객체의 num_rows 속성을 사용하여 결과 행의 수를 확인합니다.
만약 결과 행의 수가 0이면, 이메일 또는 비밀번호가 틀렸다는 알림 메시지를 출력합니다.
조회 결과가 있다면, $result 객체의 fetch_array 메서드를 사용하여 결과를 배열 형태로 가져옵니다.
이렇게 함으로써, 로그인한 사용자의 정보를 세션에 저장할 수 있습니다.
마지막으로, 세션을 생성하고 Header 함수를 사용하여 로그인 성공 후에는 ../main/main.php 페이지로 이동하도록 설정합니다.