반응형
WAMP 설치하기 및 php 실행해보기
bitnami wamp를 사용해서 php를 사용할 웹 서버를 구축하기로 하였다 bitnami.com/stack/wamp/installer Install WAMP, Download WAMP show MD5 2546fbf796a57704538f9695e1701527 SHA1 00e63a4a67e7e2bf22d47e141..
loy124.tistory.com
사전준비를 진행해두도록 한다.
회원가입
먼저 DB를 생성한다
WAMP manager에 있는 mysql database의 Port를 확인해두고
mysql workbench에 접속한다.
포트에 맞게 셋팅을 진행하고 나서
DB를 생성한다
우클릭 -> create schema 로 schema를 생성하고 나서
테이블을 생성해주었다.
테이블의 컬럼은 아래와같다
테이블을 생성한다.
부트스트랩 v5 를 적용하였다.
signup.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>
</head>
<body>
<form action="signupProcess.php" method="POST" id="signup-form">
<div class="w-50 ml-auto mr-auto mt-5">
<div class="mb-3 ">
<label for="email" class="form-label">아이디</label>
<input type="email" name="email" class="form-control" id="email" placeholder="아이디를 입력해 주세요.">
</div>
<div class="mb-3 ">
<label for="password" class="form-label">비밀번호</label>
<input name="password" type="password" class="form-control" id="password" placeholder="비밀번호를 입력해 주세요.">
</div>
<div class="mb-3 ">
<label for="passwordCheck" class="form-label">비밀번호 체크</label>
<input type="password" class="form-control" id="password-check" placeholder="비밀번호를 입력해 주세요.">
</div>
<button type="button" id="signup-button" class="btn btn-primary mb-3">회원가입</button>
</div>
</form>
<script>
const signupForm = document.querySelector("#signup-form");
const signupButton = document.querySelector("#signup-button");
const password = document.querySelector("#password");
const passwordCheck = document.querySelector("#password-check");
signupButton.addEventListener("click", function(e) {
if(password.value&& password.value === passwordCheck.value){
signupForm.submit();
}else{
alert("비밀번호가 서로 일치하지 않습니다");
}
});
</script>
</body>
</html>
회원가입 시
id및 비밀번호를 signupProcess.php에 보낸다
다만 비밀번호를 평문으로 저장하는것은 보안에 굉장히 좋지 않기때문에
비밀번호를 해시 알고리즘을 통해 암호화를 시켜줘야한다.
password_hash(비밀번호, 암호화 방식)
위와 같은 방식으로 암호화를 지정해서 비밀번호를 저장할 수 있다.
DB 접근은 mysqli_connect("해당 mysql 주소", "mysql아이디", "mysql비밀번호", " 포트")를 맞춰주면 된다!
signupProcess.php
<?php
$conn = mysqli_connect(주소, 아이디, "비밀번호", DB 스키마 이름, 포트);
$hashedPassword = password_hash($_POST['password'], PASSWORD_DEFAULT);
echo $hashedPassword;
$sql = "
INSERT INTO user
(email, password, created)
VALUES('{$_POST['email']}', '{$hashedPassword}', NOW()
)";
echo $sql;
$result = mysqli_query($conn, $sql);
if ($result === false) {
echo "저장에 문제가 생겼습니다. 관리자에게 문의해주세요.";
echo mysqli_error($conn);
} else {
?>
<script>
alert("회원가입이 완료되었습니다");
location.href = "index.php";
</script>
<?php
}
?>
test를 활용해서 회원가입을 진행한다.
회원가입이 성공적으로 진행되면 회원가입이 완료되었습니다. alert가 동작하고 index.php로 이동하게된다.
DB를 조회해보면
email및 비밀번호(암호화되있는 상태)로 저장이 되있는것을 확인 할 수 있다.
이로써 회원가입 구현을 완료하였다.
로그인
로그인을 위해서는 아래와 같은 방식들이 필요하다.
1. 아이디및 비밀번호로 로그인을 진행한다(form 제출)
2. 입력받은 아이디와 DB의 아이디를 비교하고 입력받은 비밀번호와 암호화된 DB의 비밀번호를 검증한다
3. 아이디와 비밀번호가 둘다 일치 할 경우 로그인 성공 처리를 한다
4. 로그인이 되어있다는 정보를 세션에 저장한다(stateful 방식)
login.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>
</head>
<body>
<form method="POST" action="loginProcess.php">
<div class="w-50 ml-auto mr-auto mt-5">
<div class="mb-3 ">
<label for="exampleFormControlInput1" class="form-label">아이디</label>
<input name="email" type="text" class="form-control" id="exampleFormControlInput1" placeholder="id">
</div>
<div class="mb-3 ">
<label for="exampleFormControlInput1" class="form-label">비밀번호</label>
<input name="password" type="password" class="form-control" id="exampleFormControlInput1" placeholder="password">
</div>
<button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
</div>
</form>
</body>
</html>
아까 회원가입헀던 test를 기반으로 로그인을 진행한다 .
DB에서 암호를 가져와서
password_verify(원본 DB, 암호화된 DB)
를 통해 암호화를 검증해주고
세션에 id를 저장한다.
loginProcess.php
<?php
$conn = mysqli_connect("localhost", "root", "비밀번호", "test", 3307);
//아이디 비교와 비밀번호 비교가 필요한 시점이다.
// 1차로 DB에서 비밀번호를 가져온다
// 평문의 비밀번호와 암호화된 비밀번호를 비교해서 검증한다.
$email = $_POST['email'];
$password = $_POST['password'];
// DB 정보 가져오기
$sql = "SELECT * FROM user WHERE email ='{$email}'";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result);
$hashedPassword = $row['password'];
$row['id'];
foreach($row as $key => $r){
echo "{$key} : {$r} <br>";
}
// echo $row['id'];
// DB 정보를 가져왔으니
// 비밀번호 검증 로직을 실행하면 된다.
$passwordResult = password_verify($password, $hashedPassword);
if ($passwordResult === true) {
// 로그인 성공
// 세션에 id 저장
session_start();
$_SESSION['userId'] = $row['id'];
print_r($_SESSION);
echo $_SESSION['userId'];
?>
<script>
alert("로그인에 성공하였습니다.")
location.href = "index.php";
</script>
<?php
} else {
// 로그인 실패
?>
<script>
alert("로그인에 실패하였습니다");
</script>
<?php
}
?>
index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>
</head>
<body>
<ul class="nav justify-content-end">
<?php
if (isset($_SESSION['userId'])) {
echo "{$_SESSION['userId']}님 환영합니다 ";
?>
<li class="nav-item d-flex align-items-center" onclick="logout()">로그아웃</li>
<?php
} else {
?>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="signup.php">회원가입 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.php">로그인</a>
</li>
<?php
}
?>
</ul>
<script>
function logout() {
console.log("hello");
const data = confirm("로그아웃 하시겠습니까?");
if (data) {
location.href = "logoutPrcoess.php";
}
}
</script>
</body>
</html>
로그인 성공시
해당 메세지가 alert 되며
해당과 같이 header에 나타난다.
로그아웃 버튼 클릭시
로그아웃처리가 되고 해당 메인화면이 나오게 된다.
logoutProcess.php
<?php
session_start();
session_destroy();
?>
<script>
location.href = "index.php";
</script>로그아웃 처리를 진행하면
index.php로 돌아오게 된다.
반응형
'PHP' 카테고리의 다른 글
| php mysql 연동하기 (0) | 2020.10.07 |
|---|---|
| PHP 반복문/ 배열 (0) | 2020.10.06 |
| PHP 기초 - 변수/상수 (0) | 2020.10.05 |
| php.ini 파일 셋팅하기 (0) | 2020.10.05 |
| WAMP 설치하기 및 php 실행해보기 (3) | 2020.10.05 |
