본문 바로가기
개발과제

마이페이지 CSS 꾸미기

언Sung 2023. 6. 14. 19:41

안녕하세요 이번에 css 꾸미기 마지막인 마이페이지을 꾸미겠습니다.

 

-my_info.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Welcome! HACKER!</title>
        <link rel="stylesheet" href = "/css/style_my.css">
    </head>
    <body>
        <h1>MY PAGE!</h1>
        <div class='who-0'>
            <?php 
                include 'DB_INFO.php'; //데이터 베이스 정보

                //데이터베이스 연결
                $conn = mysqli_connect($host,$username,$password,$dbname); //로그인
                $conn_for_board = mysqli_connect($host,$username,$password,$db_board); //게시판

    
                //데이터베이스 오류시 종료
                if(mysqli_connect_errno()) {
                    die("데이터 베이스 오류: ". mysqli_connect_error());
                }

                session_start(); //세션 시작

                if(!isset($_SESSION['login_id'])) {
                    //로그인하지 않은 사용자
                    header("Location: login.php"); //login 화면으로 바꾼다
                    exit(); //이 페이지를 바로 닫는다
                }

                echo "<div class='who-1'> 당신은 ", $_SESSION['login_id'], " 입니다 </div>";
            ?>
            
            <form class='who-id' action="change_id.php">
                <input class='who-id-btn' type="submit" value="ID 수정하기">
            </form>

            <form class='who-pw' action="change_pw.php">
                <input class='who-pw-btn' type="submit" value="PW 수정하기">
            </form>
            
            <div class='who-2'>
                <form class='who-out' action="process_logout.php" method="POST"> 
                    <input class='who-out-btn' type="submit" name="logout" value="로그아웃">
                </form>
                
                
                <form class='who-menu' action="board.php">
                    <input class='who-menu-btn' type="submit" value="메뉴">
                </form>
            </div>
            <?php //오류문 출력
                    if (isset($_SESSION['write_error'])) {
                        echo $_SESSION['write_error'];
                        unset($_SESSION['write_error']);
                    }
            ?>
        </div>
    </body>
</html>

 

 

 

-style_my.css

 

body{
    background-color:#f5f6f7;   
}

h1 {
    text-align: center;
    padding: 10px 10px;
    padding-bottom: 30px;
    border-bottom:1px solid #848484;
}
.who-0 {
    display: grid;
    place-items: center;
}

.who-1 {
    margin-top: 10px;
    font-size: 20px;
}

.who-id {
    margin-top: 30px;
}

.who-id-btn{
    border:1px solid #03c75b;
    background-color: #03c75b;
    width:350px;
    height: 50px;
    font-size:120%;
    color: white;
    text-align: center;
    Cursor:pointer;
}

.who-pw {
    margin-top: 10px;
}

.who-pw-btn {
    border:1px solid #03c75b;
    background-color: #03c75b;
    width:350px;
    height: 50px;
    font-size:120%;
    color: white;
    text-align: center;
    Cursor:pointer;
}

.who-2 {
    margin-top: 30px;
    display: flex;
}

.who-2 form+form::before{
    content: '|';
    width: 1px;
    margin: 0 5px;
    display: inline-block;
}

.who-out-btn {
    padding: 5px 10px;
    border: none;
    background-color:#f5f6f7;
    Cursor:pointer;

    font-size: 16px;
}

.who-menu-btn {
    padding: 5px 10px;
    border: none;
    background-color:#f5f6f7;
    Cursor:pointer;

    font-size: 16px;
}

 

 

 

 

-change_id.php

 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Welcome! HACKER!</title>
        <link rel="stylesheet" href = "/css/style_id.css">
    </head>
    <body>
        <h1>MY PAGE!</h1>
        <div class='id-0'>
            <?php 
                include 'DB_INFO.php'; //데이터 베이스 정보

                //데이터베이스 연결
                $conn = mysqli_connect($host,$username,$password,$dbname); //로그인
                $conn_for_board = mysqli_connect($host,$username,$password,$db_board); //게시판

    
                //데이터베이스 오류시 종료
                if(mysqli_connect_errno()) {
                    die("데이터 베이스 오류: ". mysqli_connect_error());
                }

                session_start(); //세션 시작

                if(!isset($_SESSION['login_id'])) {
                    //로그인하지 않은 사용자
                    header("Location: login.php"); //login 화면으로 바꾼다
                    exit(); //이 페이지를 바로 닫는다
                }        
            ?>
            
            <form class='id-1' action="change_id.php" method="GET"> 
                <input class='id-old' type="text" name="old_id" placeholder="기존 ID입력" required>
                <input class='id-new' type="text" name="new_id" placeholder="변경할 ID" required>
                <input class='id-btn' type="submit" value="수정하기">
            </form>
            
            
            <form class='id-login' action="only_login.php">
                <input class='id-back' type="submit" value="메인으로 돌아가기">
            </form>
            
            <?php
                if(isset($_GET['new_id']) && isset($_GET['old_id'])) {
                    //보안 검사
                    $old_id = filter_var(strip_tags($_GET['old_id']),FILTER_SANITIZE_SPECIAL_CHARS);
                    $new_id = filter_var(strip_tags($_GET['new_id']),FILTER_SANITIZE_SPECIAL_CHARS);

                    if($_SESSION['login_id'] == $old_id) {
                        //ID 변경, 게시물도 전부 id 수정
                        $sql = "UPDATE LOGIN_INFO SET id= ? WHERE id = ? ";
                        $sql_board = "UPDATE BOARD_INFO SET id=? WHERE id = ?";

                        //세션 할당
                        $_SESSION['login_id'] = $new_id;

                        //preparedStatement 적용
                        $stmt = mysqli_prepare($conn, $sql);
                        $stmt_board = mysqli_prepare($conn_for_board,$sql_board);

                        //바인딩
                        mysqli_stmt_bind_param($stmt,'ss',$new_id, $old_id);
                        mysqli_stmt_bind_param($stmt_board,'ss',$new_id,$old_id);

                        //sql 실행
                        if(mysqli_stmt_execute($stmt)) {
                            $_SESSION['write_error'] = "ID가 수정 됬습니다!";
                        } else {
                            //실패시
                            $_SESSION['write_error'] = '작성 중 오류가 발생하였습니다.';
                        }

                        //게시판sql 실행
                        if(mysqli_stmt_execute($stmt_board)) {
                            $_SESSION['write_error'] = "ID가 수정 됬습니다!";
                        } else {
                            //실패시
                            $_SESSION['write_error'] = '작성 중 오류가 발생하였습니다.';
                        }
                        
                        //prepared statement 종료
                        mysqli_stmt_close($stmt);
                        mysqli_stmt_close($stmt_board);

                        //전 페이지로 이동
                        header("Location: my_info.php");
                        exit();

                    } else {
                        $_SESSION['write_error'] = 'ID가 틀립니다!';
                    }
                }
            ?>
            
            <?php 
                    if (isset($_SESSION['write_error'])) {
                        echo $_SESSION['write_error'];
                        unset($_SESSION['write_error']);
                    }
            ?>
        </div>
    </body>
</html>

 

 

 

 

-style_id.css

 

body{
    background-color:#f5f6f7;   
}

h1 {
    text-align: center;
    padding: 10px 10px;
    padding-bottom: 30px;
    border-bottom:1px solid #848484;
}

.id-0 {
    display: grid;
    justify-content: center;
    align-items: center;
}

.id-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.id-old {
    margin-top: 10px;
    width: 335px;
    height: 30px;
}

.id-new {
    margin-top: 10px;
    width: 335px;
    height: 30px;
}   

.id-btn {
    border:1px solid #03c75b;
    background-color: #03c75b;
    width:350px;
    height: 50px;
    font-size:120%;
    color: white;
    text-align: center;
    Cursor:pointer;

    margin-top: 10px;
}

.id-login{
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.id-back {
    padding: 5px 10px;
    border: none;
    background-color:#f5f6f7;
    Cursor:pointer;
    font-size: 16px;

}

 

change_pw랑 change_id의 디자인이 같아서 그냥 id의 css을 가져왔습니다.

복붙이죠 그냥

 

 

-change_pw.php

 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Welcome! HACKER!</title>
        <link rel="stylesheet" href = "/css/style_id.css">
    </head>
    <body>
        <h1>MY PAGE!</h1>
        <div class='id-0'>
        <?php 
            include 'DB_INFO.php'; //데이터 베이스 정보

            //데이터베이스 연결
            $conn = mysqli_connect($host,$username,$password,$dbname); //로그인
   
            //데이터베이스 오류시 종료
            if(mysqli_connect_errno()) {
                die("데이터 베이스 오류: ". mysqli_connect_error());
            }

            session_start(); //세션 시작

            if(!isset($_SESSION['login_id'])) {
                //로그인하지 않은 사용자
                header("Location: login.php"); //login 화면으로 바꾼다
                exit(); //이 페이지를 바로 닫는다
            }        
        ?>
        
        <form class='id-1' action="change_pw.php" method="POST"> 
            <input class='id-old' type="password" name="old_pw" placeholder="기존 PW입력" required>
            <input class='id-new' type="password" name="new_pw" placeholder="변경할 PW" required>
            <input class='id-btn' type="submit" value="수정하기">
        </form>
        
        
        <form class='id-login' action="only_login.php">
            <input class='id-back' type="submit" value="메인으로 돌아가기">
        </form>
        
        <?php
            if(isset($_POST['new_pw']) && isset($_POST['old_pw'])) {
                $login_id = $_SESSION['login_id'];

                //PW 찾는 쿼리문
                $sql = "SELECT pw FROM LOGIN_INFO WHERE id='$login_id'";

                //쿼리 실행
                $result = mysqli_query($conn, $sql);

                //쿼리 실행 결과 확인
                if(mysqli_num_rows($result) > 0 ) { 
                    $row = mysqli_fetch_array($result)  ;
                    $hashed_pw = $row['pw']; //결과 배열 중 pw을 가져온다

                    //old_pw와 hashed_pw 비교
                    if(password_verify($_POST['old_pw'],$hashed_pw)) {
                        //일치시

                        //비밀번호는 해싱
                        $hashed_pw = password_hash($_POST['new_pw'], PASSWORD_DEFAULT);

                        $sql = "UPDATE LOGIN_INFO SET pw = '$hashed_pw' WHERE id = '$login_id' ";

                        //sql 실행
                        if(mysqli_query($conn,$sql)) {
                            $_SESSION['write_error'] = "PW가 수정 됬습니다!";
                        } else {
                            //실패시
                            $_SESSION['write_error'] = '작성 중 오류가 발생하였습니다.';
                        }
                        
                        //전 페이지로 이동
                        header("Location: my_info.php");
                        exit();                                            
                
                    } else {
                        //불일치
                        $_SESSION['write_error'] = "비밀번호가 일치하지 않습니다.";
                    }
                }
                
            }
        ?>
        
        <?php 
                if (isset($_SESSION['write_error'])) {
                    echo $_SESSION['write_error'];
                    unset($_SESSION['write_error']);
                }
        ?>
        </div>
    </body>
</html>

 

마이페이지

 

 

 

ID 수정

 

 

 

pw 수정

 

 

 

이렇게 해서 완료가 되었습니다.

 

감사합니다.

 

 

저작자표시 비영리 변경금지

'개발과제' 카테고리의 다른 글

게시판 마무리  (10) 2023.06.16
CSS 문의 게시판 꾸미기 - 게시판 보기, 작성, 수정  (0) 2023.06.13
CSS 꾸미기 게시판 작성 페이지  (0) 2023.06.12
[노말틱 모의 해킹 취업반 추가 개발과제 ] css - 게시판 보기  (0) 2023.05.27
[노말틱 모의 해킹 취업반 추가 개발과제 ] css - 게시판 꾸미기  (3) 2023.05.17

'개발과제' Related Articles

티스토리툴바