Normaltic 모의해킹 취업반 스터디 8기 - 2주차 과제(마이페이지)

containerxox·2025년 6월 10일

Normaltic 모의해킹 취업스터디 8기

목록 보기

9/23

🟢 mypage.php

session_start() : 세션 이용

세션에서 username이 없으면, 로그인 페이지로 리다이렉트함.

DB접속하여 로그인한 사용자의 username을 DB에서 조회.

조건에 맞춰 조회된 row에서 username컬럼과 email컬럼을 추출하여 화면에 출력.

<?php
session_start();

// 세션에서 username이 없으면 로그인페이지로 리다이렉트
if(!isset($_SESSION['username'])){
        header("Location: /project-folder/login.html");
        exit();
}

// DB접속하기
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'admin');
define('DB_PASSWORD', 'student1234');
define('DB_NAME', 'mywebsite');
$db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

// DB접속 확인하기
if(!$db_conn){
        echo "DB Connect Fail<br>";
        echo "에러 원인: " . mysqli_connect_error();
        exit();
}


$username = $_SESSION['username'];
$sql = "select * from user_info where username='$username'";
$result = mysqli_query($db_conn, $sql);
$user = mysqli_fetch_assoc($result);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyPage</title>
    <script src="https://kit.fontawesome.com/242c7614be.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/project-folder/css/mypage.css">
</head>
<body>
    <div class="mypage">
        <div class="mypage__form">
                <h1 class="mypage__title">마이페이지</h1>
                <div class="mypage__box">
                    <div class="mypage__icon-circle"><i class="fa-solid fa-user mypage__icon" style="color: #4ad395;"></i></div>
                    <h3 class="mypage__name"><?php echo $user['username']; ?></h3>
                     <a href="#" class="mypage__logout">로그아웃</a>
                </div>
                <div>
                    <h3 class="mypage__userInfo">회원정보</h3>
                </div>
                <div class="mypage__userInfo-container">
                    <div class="mypage__userInfo-box">
                        <div class="label">이름</div>
                        <div class="value"><?php echo $user['username']; ?></div>

                        <div class="label">비밀번호</div>
                        <div class="value">•••••••</div>

                        <div class="label">이메일</div>
                        <div class="value"><?php echo $user['email']; ?></div>
                    </div>
                </div>
        </div>
    </div>

    
</body>
</html>

🟢 login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <script src="https://kit.fontawesome.com/242c7614be.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
    <div class="login">
        <div class="login__forms">
            <!-- login form -->
            <form action="./php/login.php" method="POST" class="login__register block" id="login-in">
                <h1 class="login__title">Sign In</h1>
                <div class="login__box">
                    <i class="fas fa-user login__icon"></i>
                    <input type="text" placeholder="Username" class="login__input" name="username" required>
                </div>
                <div class="login__box">
                    <i class="fas fa-lock login__icon"></i>
                    <input type="password" placeholder="Password" class="login__input" name="password" required>
                </div>
                <a href="#" class="login__forgot">Forgot Password?</a>
                <button type="submit" class="login__button">Sign In</button>
                <div>
                    <span class="login__account login__account--account">Don't Have an Account?</span>
                    <span class="login__signin login__signin--signup" id="sign-up">Sign Up</span>
                </div>
            </form>

            <!-- create account form -->
            <form action="./php/signUp2.php" method="POST" class="login__create none" id="login-up">                <h1 class="login__title">Create Account</h1>
                <div class="login__box">
                    <i class="fas fa-user login__icon"></i>
                    <input type="text" placeholder="Username" class="login__input" name="username" required>
                </div>
                <div class="login__box">
                    <i class="fa-solid fa-at login__icon"></i>
                    <input type="email" placeholder="Email" class="login__input" name="email" required>
                </div>
                <div class="login__box">
                    <i class="fas fa-lock login__icon"></i>
                    <input type="password" placeholder="Password" class="login__input" name="password" required>
                </div>
                <button type="submit" class="login__button">Sign Up</button>
                <div>
                    <span class="login__account login__account--account">Already have an Account?</span>
                    <span class="login__signup login__signup--signup" id="sign-in">Sign In</span>
                </div>
                <div class="login__social">
                    <a href="#" class="login__social--icon"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="login__social--icon"><i class="fab fa-x-twitter"></i></a>
                    <a href="#" class="login__social--icon"><i class="fab fa-google"></i></a>
                    <a href="#" class="login__social--icon"><i class="fab fa-github"></i></a>
                </div>
            </form>
        </div>
    </div>

    <script src="./js/login.js"></script>
</body>
</html>

🟢 login.php

➕ 로그인 상태 유지하기 위해 session 이용함.

<?php
session_start(); //세션 시작

// 1. DB 접속하기 
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'admin');
define('DB_PASSWORD', 'student1234');
define('DB_NAME', 'mywebsite');
$db_conn = mysqli_connect(DB_SERVER, DB_USERNAME,DB_PASSWORD, DB_NAME);

// 2. DB접속 확인하기
if(!$db_conn){
        echo "DB Connect Fail!<br>";
        echo "에러 원인: " . mysqli_connect_error();
        exit();
}

// 3. 로그인 폼의 각 데이터를 받아오기
$username = $_POST['username'];
$pw = $_POST['password'];

// < Prepared Statment 사용>
// 4. sql 쿼리 준비하기
$sql = "select * from user_info where username = ?";
$stmt = mysqli_prepare($db_conn, $sql);

if($stmt){
        // 6. 값 바인딩하기
        mysqli_stmt_bind_param($stmt, "s", $username);
        //7. 바인딩 마친 sql쿼리를 실제로 실행하기
        mysqli_stmt_execute($stmt);
        // 8. DB로부터 sql쿼리조건에 부합한 결과 테이블 받아오기
        $result = mysqli_stmt_get_result($stmt);

        //9. 받아온 결과 테이블에서 하나의 행을 가져옴.
        //나는 db에서 username을 unique로 설정해서 결과가 0개 또는 1개임.
        //즉, username이 중복 X
        $row = mysqli_fetch_assoc($result);

        // 10. 사용자 존재 + 비밀번호 일치하는지 확인
        if($row && password_verify($pw, $row['pw'])){
                $_SESSION['username'] = $row['username']; //로그인 세션 저장 !
                //header("Location: loginSuccess.php?username=" . urlencode($row['username']));
                //header("Location: loginSuccess.php"); //로그인 성공페이지(welcome username출력)
                header("Location: mypage.php");
                exit();
        }else{
                // 로그인 실패
                echo "<script>alert('로그인 정보가 일치하지 않습니다.'); window.location.href='/project-folder/login.html';</script>";
        }

        // 11. sql 쿼리 종료
        mysqli_stmt_close($stmt);
}
else{
        //쿼리 준비 실패 시, 출력됨.
        echo "쿼리 준비 실패: " . mysqli_error($db_conn);
}

// 12. DB 연결 종료
mysqli_close($db_conn);

?>

🟣 동작 확인하기

👉 http://192.168.35.69:1018/project-folder/login.html
👉 username: user01
👉 password: user01user01

👉 http://192.168.35.69:1018/project-folder/php/mypage.php
→ user01로 로그인 했으므로, 세션아이디 username의 값이 user01이다.
→ 이걸 가지고 DB에서 username=user01인 row를 찾아서 각 자리에 데이터를 추출하여 화면에 출력됨.

containerxox

이전 포스트