개발 대상은 [회원정보 수정] 페이지이다.
구성은 다음과 같다.
mypage_edit.php : 회원정보 수정 양식 페이지
mypageedit_proc.php : 회원정보 수정 처리 페이지
mypage_edit.css : 회원정보 수정 CSS
1. Frontend + Backend
<mypage_edit.php>
<?php
session_start();
if (!isset($_SESSION["user_id"])) {
echo "<script>
alert('권한이 없습니다.');
history.go(-1);
</script>";
exit;
}
include "../db/db_con.php";
$sql = "select * from user where user_id = '{$_SESSION['user_id']}'";
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($result);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 수정</title>
<link rel="stylesheet" href="../css/mypage_edit.css">
<script src="./sign_up.js"></script>
</head>
<body>
<?php include "../include/header.php" ?>
<div class="mypage-edit-container">
<h2>회원정보 수정</h2>
<form class="mypage-edit-form" method="post" action="mypageedit_proc.php">
<div class="mypage-edit-row">
<label>아이디</label>
<input value="<?php echo $row["user_id"]?>" disabled>
</div>
<div class="mypage-edit-row">
<label for="input_pw">비밀번호</label>
<input type="password" id="input_pw" name="input_pw" placeholder="새 비밀번호 입력">
</div>
<div class="mypage-edit-row">
<label for="input_pw2">비밀번호 확인</label>
<input type="password" id="input_pw2" name="input_pw2" placeholder="비밀번호 확인">
</div>
<div class="mypage-edit-row">
<label for="input_name">사용자명</label>
<input id="input_name" name="input_name" value="<?php echo $row["user_name"]?>">
</div>
<div class="mypage-edit-row">
<label for="input_mail">이메일(선택)</label>
<input id="input_mail" name="input_mail" value="<?php echo $row["user_mail"]?>">
</div>
<div class="mypage-edit-actions">
<input type="submit" value="수정완료">
<button type="button" onclick="history.back()">이전</button>
</div>
</form>
</div>
</body>
</html>
| mypage_edit.php |
|---|
 |
- 1) 기존 회원정보 불러오기:
세션을 사용하여 user_id 세션값을 조회한다.
이 user_id 세션값을 토대로 user 테이블에서 user_id와 같은 값을 가지는 유저를 조회한다.
- 2) 기존 회원정보 출력:
user 테이블에서 가져온 필드에서 아이디(user_id), 사용자명(user_name), 이메일(user_mail) 값을 추출하여 출력한다.
- 3) 입력값 처리:
회원 정보에서 수정할 수 있는 값은 비밀번호, 사용자명, 이메일 3가지로
사용자가 입력한 비밀번호(확인), 사용자명, 이메일 값은 각각 (input_pw(2), input_name, input_mail) 파라미터에 담겨 POST방식으로 수정 처리 페이지(mypageedit_proc.php)에 전달된다.
2. Backend
<mypageedit_proc.php>
<?php
if ($_POST["input_pw"] != $_POST["input_pw2"]) {
echo "<script>
alert('입력된 비밀번호가 일치하지 않습니다');
history.go(-1);
</script>";
exit;
}
include "../db/db_con.php";
$input_pw = hash('sha256', $_POST["input_pw"]);
$input_name = $_POST["input_name"];
$input_mail = $_POST["input_mail"];
$res = "";
session_start();
$user_id = $_SESSION["user_id"];
if (empty($_POST["input_pw"]) and empty($input_name) and empty($input_mail)) {
echo "<script>
alert('변경 사항이 없습니다.');
location.href='./mypage_edit.php'
</script>";
}
if(!empty($_POST["input_pw"])) {
$sql = "update user set user_pw = '$input_pw' where user_id = '$user_id'";
mysqli_query($con, $sql);
$res .= "[비밀번호] ";
}
if(!empty($input_name)) {
$sql = "update user set user_name = '$input_name' where user_id = '$user_id'";
mysqli_query($con, $sql);
$res.= "[사용자명] ";
}
if(!empty($input_mail)) {
$sql = "update user set user_mail = '$input_mail' where user_id = '$user_id'";
mysqli_query($con, $sql);
$res .= "[이메일] ";
}
mysqli_close($con);
echo "<script>
alert('{$res}이(가) 수정되었습니다.');
location.href='./mypage.php'
</script>";
?>- 1. 입력값 확인:
만약 사용자가 비밀번호를 변경하기 위해 입력하였을때, 비밀번호 값과 비밀번호 확인 값이 일치하지 않는 경우, 이전 페이지로 돌아간다.
만약 사용자가 입력한 값이 아무것도 없는 경우, 이전 페이지로 돌아간다.
- 2. 사용자 정보 update
비밀번호, 사용자명, 이메일 중 사용자가 어떤값을 변경하려고 입력한 경우, 이 입력된 값에 대해서만 user 테이블에 update를 수행한다.
어떤 항목들이 변경되었는지는 알림창을 통해 보여준다.
3. 동작 정리
| 1. 마이페이지 → 회원정보 수정 (영상) |
|---|
 |
| 2. 비밀번호 불일치시 |
|---|
 |
| 3. 회원정보 수정시 |
|---|
 |
| ↑ 회원정보 1개 수정 |
 |
| ↑ 회원정보 2개 수정 |
 |
| ↑ 회원정보 3개 수정 |
