본문 바로가기
웹 개발

[14주차] 마이 페이지 구현 #3 - 비밀번호 변경 기능

Haemaa 2023. 6. 24. 00:49

이제 마이 페이지 마지막 포스팅입니다. 3번째!

 

이번엔 비밀번호 변경 기능을 만들어보겠습니다.

 

 

마이페이지입니다. 비밀번호 변경 페이지로 갈 수 있는 버튼을 하나 만들었습니다.

 

 

마이 페이지에 추가된 버튼의 코드는 다음과 같습니다.

mypage.php

<p>
<br><br>
    <a href="./mypage_update.php"><button class="btn btn-outline-secondary">수정</button></a>
    &nbsp;&nbsp;&nbsp;<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 - 문의 글 작성  (0) 2023.06.25
[13주차] 마이 페이지 구현 #2 - 개인 정보 수정 기능 구현  (0) 2023.06.22
[13주차] 마이 페이지 구현 #1 - 자신의 정보 확인  (0) 2023.06.20
[13주차] 게시판 구현 #10 - 날짜,조회,추천 순 정렬 기능  (0) 2023.06.19

'웹 개발' Related Articles

티스토리툴바