이제 마이 페이지 마지막 포스팅입니다. 3번째!
이번엔 비밀번호 변경 기능을 만들어보겠습니다.
마이페이지입니다. 비밀번호 변경 페이지로 갈 수 있는 버튼을 하나 만들었습니다.
마이 페이지에 추가된 버튼의 코드는 다음과 같습니다.
mypage.php
<p>
<br><br>
<a href="./mypage_update.php"><button class="btn btn-outline-secondary">수정</button></a>
<a href="./password_change.php"><button class="btn btn-outline-secondary">비밀번호 변경</button></a>
<a href="./main.php" class="btnLIst btn"><button class="btn btn-outline-warning">메인 페이지로</button></a>
</body>간단히 a 태그의 href 속성을 통해 클릭 시 password_change.php로 이동합니다.
변경 버튼을 누르면 비밀번호를 확인하는 창이 나옵니다.
꽤 깔끔하죠?
password_change.php의 코드는 다음과 같습니다.
password_change.php
<!DOCTYPE html>
<?php
session_start();
//세션 아이디 $login_id에 저장
$login_id =$_SESSION['id'];
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비밀번호 변경</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<?php
require('nav.html');
?>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<br><br>
<form style="margin-left:10px;" class="row g-3" action="pass_proc.php" method="POST">
<div class="col-auto">
<label for="staticEmail2" class="visually-hidden">비밀번호 확인</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="비밀번호 확인">
</div>
<div class="col-auto">
<label for="inputPassword2" class="visually-hidden">Password</label>
<input type="password" name="input_pass" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-secondary mb-3">확인</button>
</div>
</form>
<?php
//에러 표시해줌
echo $_SESSION['msg'];
unset($_SESSION['msg']);
?>
</body>
</html>이 페이지에서는 단순히 비밀번호를 입력받고 그 값을 pass_proc.php로 전달합니다.
pass_proc.php에서 검증한 결과 DB에 저장된 값과 다르다면 header를 통해 다시 password_change.php로 되돌아오게 강제하고 세션 변수를 통해 비밀번호가 틀렸다는 것을 알려줍니다.
의도적으로 비밀번호를 틀려보았습니다
세션 변수를 통해 비밀번호가 잘못되었다는 메세지를 출력시켜줍니다.
올바른 비밀번호를 치고 들어가면 비밀번호를 변경할 수 있는 창이 나옵니다.
이 페이지가 비밀번호를 실제로 검증하는 pass_proc.php 입니다.
pass_proc.php
<!DOCTYPE html>
<?php
session_start();
//세션 아이디 $login_id에 저장
$login_id =$_SESSION['id'];
//입력한 비밀번호 받음
$input_pass = $_POST['input_pass'];
//DB연결
$con = mysqli_connect('localhost','root','1234','test');
//타입 때문에 $login_id에 작은 따옴표 꼭 붙여야 함
$pass_query = "SELECT * FROM user WHERE username='$login_id'";
$pass_result = $con->query($pass_query);
$pass = $pass_result->fetch_array();
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비밀번호 변경</title>
</head>
<body>
<?php
$_SESSION['msg']='비밀번호가 잘못되었습니다';
//차후에 해쉬처리하면 변경해야함 md5나 SH256
if($input_pass == $pass['password']){
echo '<form action="pass_proc2.php" method="POST">
변경할 비밀번호 : <input type="password" name="new_pass"/>
<input type="submit" value="변경"/>
</form>';
} else {
echo $_SESSION['msg'];
header('Location: ./password_change.php');
};
?>
</body>
</html>비밀번호가 맞았다면 위 그림과 같이 변경할 비밀번호를 입력받을 창을 보여주고 그 값을 pass_proc2.php로 전달합니다.
변경하고싶은 비밀번호를 입력해주고 변경버튼을 누르면
변경되었다는 문구와 함께 되돌아가기 버튼이 나옵니다.
이 페이지가 마지막 pass_proc2.php입니다.
pass_proc2.php
<?php
session_start();
//세션 아이디 $login_id에 저장
$login_id =$_SESSION['id'];
//DB연결
$con = mysqli_connect('localhost','root','1234','test');
$new_pass = $_POST['new_pass'];
$pass_update_query = "UPDATE user SET password='$new_pass' WHERE username='$login_id'";
$pass_update_res = $con->query($pass_update_query);
if (isset($pass_update_res)){
echo "변경되었습니다!";
echo "<a href='password_change.php'><button >되돌아가기</button></a>";
} else {
echo "오류가 발생했습니다. 되돌아가서 다시 진행해주세요";
}
?>
여기서 이제 pass_proc.php에서 입력받은 값을 토대로 쿼리문을 실행시킵니다.
$pass_update_query = "UPDATE user SET password='$new_pass' WHERE username='$login_id'";
$pass_update_res = $con->query($pass_update_query);UPDATE 구문을 현재 로그인 중인 $login_id를 WHERE 조건문에 넣고 실행시킵니다.
update 구문을 사용할 때는 fetch_array()까지 작성하지 않고 query함수만 실행시키면 코드가 진행됩니다.
그럼 잘 바뀌었는지 한번 살펴볼까요? 바꾸기 전 비밀번호를 입력해줍니다.
어라라 비밀번호가 잘못되었다고 뜨네요 그럼 변경된 비밀번호를 입력하면?
비밀번호 변경창이 나오는 걸로 보아 잘 변경되었네요 ^^
이렇게 마이페이지 구현이 끝났습니다.
물론 UI를 좀 더 세련되게 해야겠지만 기능은 정상적으로 작동하는 걸 확인했습니다
이제 웹 개발이 좀 익숙해진 느낌이 드네요
봐주셔서 감사합니다
'개발 > 웹 개발' 카테고리의 다른 글
| [14주차] 문의 게시판 구현 #2 - 비밀번호 인증 (0) | 2023.06.27 |
|---|---|
| [14주차] 문의 게시판 구현 #1 - 문의 글 작성 (1) | 2023.06.25 |
| [13주차] 마이 페이지 구현 #2 - 개인 정보 수정 기능 구현 (0) | 2023.06.22 |
| [13주차] 마이 페이지 구현 #1 - 자신의 정보 확인 (0) | 2023.06.20 |
| [13주차] 게시판 구현 #10 - 날짜,조회,추천 순 정렬 기능 (0) | 2023.06.19 |