-
2주차모의해킹스터디_과제 2023. 11. 14. 23:42
과제 내용
[1] 복습 (Database, SQL)[2] Mini Mission (사진 확인)
[3] 회원가입 페이지 만들기 (기능 구현)
[4] 로그인 페이지 (DB 연동)
+ 추가 미션 (호오오옥시나.. 다해서 심심하면)
-> 가입한 나의 정보를 보는 "마이페이지" 개발
1. Mini Mission 사진
[2] Mini Mission
위의 이미지만 완성하면 될거라고 생각해서 간단하게 php 코드 짜서 실행했다. (db_test.php)
<?php define("DB_SERVER", 'localhost'); define("DB_USERNAME", 'admin'); define("DB_PASSWORD", 'student1234'); define("DB_NAME", 'db_test'); $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME); $sql = "select * from user where name = '{$_GET['name']}'"; $result = mysqli_query($db_conn, $sql); $row = mysqli_fetch_array($result); $print = $row['name']." 학생의 점수는 ".$row['score']." 입니다."; echo "<h1>$print</h1>"; ?>실제로 실습 때는 POST 방식을 사용하지만 과제에서는 GET 방식을 사용했다.
2. user 테이블 과제를 위해 만든 DB 테이블이다. 주요 과제인 로그인 페이지에는 score 속성이 필요가 없지만 이번 과제 때문에 추가했고, doldol의 점수만 입력했다.
3. 과제[2] 실습 화면 db_test.php를 열고 주소창에 name=doldol을 입력한 후 나온 결과를 캡쳐한 화면. DB 이름과 학생 이름, 점수까지 과제 사진과 똑같이 만들었다. 간단한 과제였다.
[4] 로그인 페이지 (DB 연동)
기존에 만들어 놓은 로그인 페이지는 DB 없이 그저 ID가 'admin'이고 비밀번호가 'admin1234'면 로그인하도록 코드로 구현했었다.
이번에는 DB를 연동해야 하기에 먼저 DB를 만들었다. DB 구조는 위와 똑같은 형태다. 그리고 DB를 연결하는 코드를 작성했다.
<?php session_start(); define("DB_SERVER", 'localhost'); define("DB_USERNAME", 'admin'); define("DB_PASSWORD", 'student1234'); define("DB_NAME", 'db_test'); //login.php에서 입력받은 userName, password $userName = $_POST['userName']; $password = $_POST['password']; //userName에 아무것도 입력받지 않았을 때 if ($userName == "") { echo "<script>alert('please enter your ID.');</script>"; echo "<script>location.replace('login.php');</script>"; exit; } else if ($password == "") { echo "<script>alert('please enter the password.');</script>"; echo "<script>location.replace('login.php');</script>"; exit; } //DB 접근 $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME); $sql = "SELECT * FROM user WHERE userName = '{$userName}'"; $result = mysqli_query($db_conn, $sql); mysqli_close($db_conn); //쿼리결과가 존재하지 않을 때(userName가 DB에 존재하지 않을 때) if ($result->num_rows == 0) { echo "<script>alert('Login userName \"$userName\" is not found');</script>"; echo "<script>location.replace('login.php');</script>"; exit; } //쿼리결과가 존재한다면 레코드 저장 $row = mysqli_fetch_array($result); //userName는 존재하지만 비밀번호가 다를 때 if ($password != $row['password']) { echo "<script>alert('Wrong password');</script>"; echo "<script>location.replace('login.php');</script>"; exit; } //userName와 비밀번호가 맞다면 세션 변수 생성 else { $_SESSION['userName'] = $row['userName']; $_SESSION['name'] = $row['name']; echo "<script>location.replace('index.php');</script>"; exit; } ?>mysqli_connect() 함수로 DB에 연결이 가능하다. 그 인자로는 서버IP, phpmyadmin ID, phpmyadmin 비밀번호, DB 이름을 입력한다. 그 뒤에 port와 socket을 더 입력할 수 있지만 생략 가능하다. 만약 DB가 로컬 컴퓨터 안에 있다면, 서버 IP 대신 'localhost'라고 입력해도 된다. 함수의 리턴값으로는 DB 연결을 나타내는 객체를 반환한다. 이제 이것을 사용하여 해당 DB에 접근할 수 있다.
define("DB_SERVER", 'localhost');define("DB_USERNAME", 'admin');define("DB_PASSWORD", 'student1234');define("DB_NAME", 'db_test');
$db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);mysqli_query() 함수로 연결된 DB에 SQL을 삽입할 수 있다. 인자로 DB 연결을 나타내는 객체, SQL구문을 입력한다.
함수의 리턴값으로는 삽입한 SQL 구문의 결과가 포함된 정보가 반환된다.
$sql = "SELECT * FROM user WHERE userName = '{$userName}'";
$result = mysqli_query($db_conn, $sql);반환된 결과를 보면 여러 값들이 포함된 정보의 집합이 나온다.
4. mysqli_query() 결과 예시 mysqli_fetch_array() 함수를 사용하면 위의 mysqli_query()에서 반환된 결과 중 가장 위의 행을 반환한다. 그리고 각각의 속성에 맞는 값을 필요한 곳에 사용하면 된다.
$row = mysqli_fetch_array($result);
echo $row['password'];마지막으로 mysqli_close() 함수를 사용하면 연결했던 DB 객체를 삭제한다. 사용자가 많은 경우라면 mysqli_close()를 사용하는 게 속도의 이점이 있다고 한다.
mysqli_close($db_conn);
[3] 회원가입 페이지 만들기 (기능 구현)
기존에 로그인 가능한 페이지 만들기에 사용된 파일.
index.php, login.php, login_check.php, logout.php (+login.css)
회원가입 페이지와 추가 과제인 마이페이지를 위해 새로 만든 파일
register.php, register_check.php, mypage.php, mypage_update.php, mypage_update_check.php
register.php
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="login.css"> <title>회원가입</title> </head> <body> <div class="container"> <a href="index.php" title="Button border blue/green" class="button btnBorder btnBlueGreen">Home</a> </div> <div class="register-wrapper"> <h2>회원가입</h2> <form method="POST" action="register_check.php" id="register-form"> <input type="text" name="name" placeholder="이름" required> <input type="text" name="userName" placeholder="사용할 ID" required> <input type="password" name="password" placeholder="비밀번호" required> <input type="password" name="passConfirm" placeholder="비밀번호 확인" required> <input type="text" name="phone" placeholder="전화번호(ex.010-xxxx-xxxx)" required> <input type="text" name="email" placeholder="이메일" required> <input type="submit" value="회원 가입"> </form> </body> </html>register_check.php
<?php define("DB_SERVER", 'localhost'); define("DB_USERNAME", 'admin'); define("DB_PASSWORD", 'student1234'); define("DB_NAME", 'db_test'); //register.php에서 입력받은 정보 $name = $_POST['name']; $userName = $_POST['userName']; $password = $_POST['password']; $passConfirm = $_POST['passConfirm']; $phone = $_POST['phone']; $email = $_POST['email']; //password와 passConfirm이 다르다면 if($password != $passConfirm){ echo "<script>alert('The password entered is different.');</script>"; echo "<script>location.replace('register.php');</script>"; exit; } //정상적으로 userName을 입력받았다면 if(!is_null($userName)){ //DB연결 후 입력받은 userName에 대해 검색 $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME); $sql = "SELECT userName FROM user WHERE userName = '{$userName}'"; $result = mysqli_query($db_conn, $sql); $row = mysqli_fetch_array($result); mysqli_close($db_conn); //userName이 이미 존재한다면 if($result->num_rows!=0){ echo "<script>alert('userName \"$userName\" already exists.');</script>"; echo "<script>location.replace('register.php');</script>"; exit; } //userName이 존재하지 않는다면 else{ $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME); $sql = "INSERT INTO user(name, userName, password, phone, email) VALUES ('{$name}', '{$userName}', '{$password}', '{$phone}', '{$email}')"; $result = mysqli_query($db_conn, $sql); mysqli_close($db_conn); if($result){ echo "<script>alert('Your account is set up.');</script>"; echo "<script>location.replace('login.php');</script>"; exit; } else{ echo "<script>alert('Failed to insert');</script>"; echo "<script>location.replace('register.php');</script>"; exit; } } } ?>mypage.php
<?php session_start(); if (!isset($_SESSION['userName'])) { echo "<script>alert('You are not logged in.');</script>"; echo "<script>location.replace('index.php');</script>"; exit; } else { define("DB_SERVER", 'localhost'); define("DB_USERNAME", 'admin'); define("DB_PASSWORD", 'student1234'); define("DB_NAME", 'db_test'); $userName = $_SESSION['userName']; $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME); $sql = "SELECT * FROM user WHERE userName = '{$userName}'"; $result = mysqli_query($db_conn, $sql); $row = mysqli_fetch_array($result); mysqli_close($db_conn); } ?> <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="login.css"> <title>마이페이지</title> </head> <body> <div class="container"> <a href="index.php" title="Button border blue/green" class="button btnBorder btnBlueGreen">Home</a> </div> <div class="mypage-wrapper"> <h2> <?php echo "My Page"; ?> </h2> <table> <tbody> <tr> <th>ID</th> <td> <?= $row['userName'] ?> </td> </tr> <tr> <th>이름</th> <td> <?= $row['name'] ?> </td> </tr> <tr> <th>연락처</th> <td> <?= $row['phone'] ?> </td> </tr> <tr> <th>Email</th> <td> <?= $row['email'] ?> </td> </tr> </tbody> </table> <button type="button" class="btn" onclick="location.href='mypage_update.php'"> 수정하기 </button> </div> </body> </html>mypage_update.php
<?php session_start(); if (!isset($_SESSION['userName'])) { echo "<script>alert('You are not logged in.');</script>"; echo "<script>location.replace('index.php');</script>"; exit; } else { define("DB_SERVER", 'localhost'); define("DB_USERNAME", 'admin'); define("DB_PASSWORD", 'student1234'); define("DB_NAME", 'db_test'); $userName = $_SESSION['userName']; $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME); $sql = "SELECT * FROM user WHERE userName = '{$userName}'"; $result = mysqli_query($db_conn, $sql); $row = mysqli_fetch_array($result); mysqli_close($db_conn); } ?> <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="login.css"> <title>마이페이지</title> </head> <body> <div class="container"> <a href="index.php" title="Button border blue/green" class="button btnBorder btnBlueGreen">Home</a> </div> <div class="mypage_update-wrapper"> <h2> <?php echo "UPDATE"; ?> </h2> <form method="POST" action="mypage_update_check.php" id="mypage_update-form"> <table> <tbody> <tr> <th>ID</th> <td> <p> <?= $row['userName'] ?> </p> </td> </tr> <tr> <th>이름</th> <td><input type="text" name="name" placeholder="이름" required></td> </tr> <tr> <th>비밀번호</th> <td><input type="password" name="password" placeholder="비밀번호" required></td> </tr> <tr> <th>비밀번호 확인</th> <td><input type="password" name="passConfirm" placeholder="비밀번호 확인" required></td> </tr> <tr> <th>연락처</th> <td><input type="text" name="phone" placeholder="전화번호(ex.010-xxxx-xxxx)" required></td> </tr> <tr> <th>Email</th> <td><input type="text" name="email" placeholder="이메일" required></td> </tr> </tbody> </table> <input type="submit" value="적용"> </form> </div> </body> </html>mypage_update_check.php
<?php session_start(); if (!isset($_SESSION['userName'])) { echo "<script>alert('You are not logged in.');</script>"; echo "<script>location.replace('index.php');</script>"; exit; } else { define("DB_SERVER", 'localhost'); define("DB_USERNAME", 'admin'); define("DB_PASSWORD", 'student1234'); define("DB_NAME", 'db_test'); $userName = $_SESSION['userName']; $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME); $sql = "SELECT userName FROM user WHERE userName = '{$userName}'"; $result = mysqli_query($db_conn, $sql); $row = mysqli_fetch_array($result); mysqli_close($db_conn); } // 기존 DB정보 저장 $name_pre = $row['name']; $password_pre = $row['password']; $phone_pre = $row['phone']; $email_pre = $row['email']; //mypage_update.php에서 입력받은 정보 $name = $_POST['name']; $password = $_POST['password']; $passConfirm = $_POST['passConfirm']; $phone = $_POST['phone']; $email = $_POST['email']; // 비밀번호가 비어있을 때 if ($password == "") { echo "<script>alert('Password cannot be empty!');</script>"; echo "<script>location.replace('mypage_update.php');</script>"; exit; // 입력한 비밀번호가 서로 다를 때 } else if ($password != $passConfirm) { echo "<script>alert('The password entered is different.');</script>"; echo "<script>location.replace('mypage_update.php');</script>"; exit; // 이름이 비어있을 때 } else if ($name == "") { echo "<script>alert('Name cannot be empty!');</script>"; echo "<script>location.replace('mypage_update.php');</script>"; exit; } // 기존 정보와 비교하여 변경된 부분 체크 $change_cnt = 0; if ($name != $name_pre) { $change_cnt++; } if ($password != $password_pre) { $change_cnt++; } if ($phone != $phone_pre) { $change_cnt++; } if ($email != $email_pre) { $change_cnt++; } // 변경된 부분이 없다면 if ($change_cnt == 0) { echo "<script>alert('Nothing has changed!');</script>"; echo "<script>location.replace('mypage_update.php');</script>"; exit; } // DB 업데이트 $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME); $sql = "UPDATE user SET name='{$name}', password='{$password}', phone='{$phone}', email='{$email}' WHERE userName='{$userName}'"; $result = mysqli_query($db_conn, $sql); mysqli_close($db_conn); // 변경사항 알린 후 mypage로 이동 if ($result) { echo "<script>alert('My information has changed!');</script>"; echo "<script>location.replace('mypage.php');</script>"; } ?>여러 사이트를 구글링해서 만든거라 정돈된 느낌은 아닐 수 있다. 그래도 최대한 주석을 작성하면서 알고리즘을 알기 쉽게 작성해봤다.
결과
5. 과제 결과 화면
참조
[웹개발] 마이페이지 개인 정보 조회 및 수정 기능
* 개인적인 공부 내용을 기록한 글입니다. 설명 개인 정보 조회 및 수정 기능에 대해 다뤄본다. 전체적인 CSS 및 네비바 구현 등에 관한 내용은 생략한다. 최종 화면 마이페이지 개인 정보 조회 기
www.cho-log.io