직접 php로 서버를 만들어보자 !
동적 사이트 만들기
메인 페이지
<?php
include "../connect/connect.php";
include "../connect/session.php";
// echo "<pre>";
// var_dump($_SESSION);
// echo "</pre>";
?>
<!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 bmStyle">
<picture class="intro__images">
<source srcset="../assets/img/intro01.png, ../assets/img/intro01@2x.png 2x, ../assets/img/intro01@3x.png 3x" />
<img src="../assets/img/intro01.png" alt="소개이미지">
</picture>
<p class="intro__text">
어떤 일이라도 노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다.
신입의 열정과 도전정신을 깊숙히 새기며 배움에 있어 겸손함을
유지하며 세부적인 곳까지 파고드는 개발자가 되겠습니다.
</p>
</div>
</main>
<!-- //main -->
</body>
</html>
코드 설명
include 함수: 다른 PHP 파일에서 코드를 가져올 때 사용하는 함수입니다. 이 코드에서는 ../connect/connect.php, ../connect/session.php, ../include/head.php, ../include/skip.php, ../include/header.php 파일을 가져와서 사용하고 있습니다.
$_SESSION: PHP에서 제공하는 전역 변수 중 하나로, 웹 브라우저와 웹 서버 간에 데이터를 저장하는 데 사용됩니다. 이 코드에서는 session.php 파일에서 session_start() 함수를 호출하여 세션을 시작하고, $_SESSION 변수를 사용하여 세션 데이터를 저장하고 있을 수 있습니다.
HTML 태그: PHP 코드 안에서 HTML 태그를 사용하여 웹 페이지를 작성하고 있습니다. 이 코드에서는 <!DOCTYPE html>, <html>, <head>, <meta>, <title>, <body>, <main>, <div>, <picture>, <source>, <img>, <p> 태그를 사용하고 있습니다.
회원가입 페이지
<!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 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="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>
코드 설명
코드가 너무 길지만 짧게 설명하자면 회원가입을 하기 위한 필수 정보들을 입력하여 조건에 맞게 입력하면 입력한 데이터가 세션에 저장이 되어 로그인 상태가 유지 되며 회원가입을 했던 데이터가 저장 됩니다.
회원가입 실패 페이지
<!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>
<?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')";
$result = $connect -> query($sql);
if($result){
msg("회원가입을 축하합니다! 로그인 해주세요! <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코드에 if문을 이용하여 맞지 않는 조건을 설명해주며 회원가입을 실패 했다는 정보를 알려주기 위하여 이에 맞게 코드를 작성 하였습니다.
로그인 페이지
<!DOCTYPE html>
<html lang="en">
<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="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>
코드 설명
<?php include "../include/head.php" ?> - 다른 php 파일을 현재 파일에 포함시키는 역할을 합니다. "../include/head.php" 파일을 현재 파일에 포함시키기 위해 사용되었습니다.
<?php include "../include/skip.php" ?> - "../include/skip.php" 파일을 현재 파일에 포함시키는 역할을 합니다. 이 코드는 스킵 링크를 추가하기 위해 사용되었습니다.
<?php include "../include/header.php" ?> - "../include/header.php" 파일을 현재 파일에 포함시키는 역할을 합니다. 이 코드는 헤더 영역을 추가하기 위해 사용되었습니다.
<?php와 ?> - PHP 코드를 쓰기 위한 시작과 끝을 나타냅니다. 이 코드 사이에 PHP 코드를 작성할 수 있습니다.
action="loginSave.php" - 폼 데이터를 전송할 URL을 지정합니다. 이 코드는 로그인 폼을 전송할 때 "loginSave.php" 파일을 호출합니다.
name="loginSave" - 폼의 이름을 지정합니다. 이 코드는 로그인 폼의 이름을 "loginSave"로 지정합니다.
method="post" - 폼 데이터를 전송할 HTTP 메서드를 지정합니다. 이 코드는 POST 메서드를 사용하여 폼 데이터를 전송합니다.
type="email" - 이메일 입력 필드를 나타내는 HTML 속성입니다. 입력 값이 유효한 이메일 주소인지 확인합니다.
type="password" - 비밀번호 입력 필드를 나타내는 HTML 속성입니다. 입력한 값이 마스킹되어 표시됩니다.
class="inputStyle" - HTML 요소에 클래스를 지정합니다. 이 코드는 CSS 스타일을 적용하기 위한 클래스를 지정합니다.
required - 입력 필드에 필수 입력 속성을 부여합니다. 이 코드는 이메일과 비밀번호 필드 모두에 적용되었습니다.
로그인 실패 페이지
<!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>
코드 설명
회원가입을 하여 저장되어 있던 이메일(아이디)와 비밀번호를 알맞게 입력하였을때 로그인이 되며 우측 상단에 로그인 중이라는 표시가 되며 로그인이 되어있기에 로그아웃 버튼이 생기며 버튼을 누르면 로그아웃이 됩니다.
로그인을 실패 한다면 로그인을 실패 했다는 문구가 화면에 출력이 되며 다시 로그인을 할 수 있도록 로그인 버튼이 생깁니다.
로그아웃 페이지
<?php
include "../connect/session.php";
unset($_SESSION['memberID']);
unset($_SESSION['youEmail']);
unset($_SESSION['youName']);
Header("Location: ../main/main.php");
?>
코드 설명
로그아웃을 누르게 되면 메인 화면으로 돌아가게 만들었습니다. 자세히 설명하자면
세션을 초기화하기 위해 unset() 함수를 사용하여 $_SESSION 배열에서 회원 정보를 삭제합니다. 이때, unset() 함수를 사용하여 세션에서 정보를 삭제하면 해당 정보가 다시 복구되지 않으므로, 로그아웃 기능을 구현할 때 이 함수를 사용합니다.
마지막으로, Header() 함수를 사용하여 로그아웃 후에는 ../main/main.php 경로로 이동시킵니다. Header() 함수는 HTTP 헤더를 변경하고, 새로운 페이지로 이동시키는 역할을 합니다.