[과제] 02주차(2) (회원가입/로그인 페이지 구현)

모의 해킹 스터디/모의 해킹 - 과제

[과제] 02주차(2) (회원가입/로그인 페이지 구현)

Gearvirus(junyup2) 2023. 11. 2. 03:09

모의 해킹 스터디 - 2주차 과제(2) (회원가입/로그인 페이지 구현)

모의 해킹 스터디 - 1주차 과제 (간이 로그인 페이지 제작) 제작 조건 DB 연결 X ID / PW == admin / admin1234 입력시 로그인 로그인 페이지 꾸미기 (CSS / Bootstrap 이용) 추후 원하는대로 적용 가능하도록 하

codegear-archive.tistory.com

1주차 (간이 로그인 페이지) 과제의 Develop 과제

회원가입 기능 추가 (기능 구현)
회원 가입 정보 (DB 저장)
로그인 페이지 (DB 연동)

동작 과정

첫 화면인 htt[://192.168.xxx.xxx:1018/ 에 접속
로그인 or 회원가입 선택
로그인 선택
- 올바른 ID / PW입력시 홈으로이동.
회원가입 선택
- 올바르게 정보 입력시 DB에 회원정보 삽입 및 로그인페이지로 이동

사전 준비 (DB - 구성 및 설정)

phpmyadmin 에 접속하여 직접 설정 가능
하지만 코드를 이용하여 해보고싶어서 시도함

DB 생성 코드 순서

create_db.php
create_table.php
db_insert.php

create_db.php

<?php
    $db_conn = mysqli_connect("localhost", "*****", "***********", "") or die("MySQL 접속 실패 !!");

    $sql = "CREATE DATABASE sqlDB DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci";
    $ret = mysqli_query($db_conn, $sql);

    if($ret){
        echo "sqlDB가 성공적으로 생성됨.";
    }else{
        echo "sqlDB 생성 실패 : " . mysqli_error($db_conn);
    }

    mysqli_close($db_conn);
?>

phpmyadmin 에 접속
CREATE DATABASE sqlDB DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci
- sqlDB 라는 이름의 DATABASE를 생성
- DEFAULT CHARACTER SET utf8
  - 디폴트 char 값을 utf8로 설정
- COLLATE utf8_general_ci
  - 데이터 정렬방식을 utf8_general_ci 로 설정
접속 실패시 에러 출력

create_table.php

<?php
    $db_conn = mysqli_connect("localhost", "*****", "***********", "sqlDB") or die("MySQL 접속 실패 !!");

    $sql = "
        CREATE TABLE userTbl
        (   userID  VARCHAR(20) NOT NULL PRIMARY KEY,
            name    VARCHAR(20) NOT NULL,
            pass    VARCHAR(256) NOT NULL,
            email   VARCHAR(30) NOT NULL,
            birth   INT NOT NULL,
            mDate   DATE
        )
    ";

    $ret = mysqli_query($db_conn, $sql);

    if($ret){
        echo "userTBL이 성공적으로 생성됨..";
    }else{
        echo "userTBL 생성 실패 : ". mysqli_error($db_conn);
    }

    mysqli_close();
?>

sqlDB 에 userTbl이라는 이름의 테이블 생성
userID를 기본키로 지정
mDate
- 가입 시간을 기입하기 위함
- phpmyadmin의 SQL에서 시간설정을 해줘야함
- SET GLOBAL time_zone = '+9:00'; : 대한민국 시간

db_insert

<?php
    $db_conn = mysqli_connect("localhost", "*****", "***********", "sqlDB") or die("MySQL 접속 실패 !!");
    
    mysqli_query($db_conn, 'set names utf8');
    $db_conn -> set_charset = "utf8";

    $sql = "
        INSERT INTO userTbl VALUES
        ('LJY', '이준엽', 'ljy1234', 'junyup1234@gmail.com', '1994-03-21', Now()),
        ('ADM', '관리자', 'admin1234', 'admin@test.com', '2023-11-07', Now())
    ";

    $ret = mysqli_query($db_conn, $sql);

    if($ret){
        echo "userTBL에 데이터가 성공적으로 입력됨.";
    }else{
        echo "userTBL 데이터 입력 실패 : " . mysqli_error($db_conn);
    }

    mysqli_close($db_conn);
?>

삽입 테스트

코드 목록 및 구성

WebApp
│
│ index.php
│ login.php
│ login_func.php
│ regist.php
│ regist.post.php
│ home.php
│
├─ inc
│   ├─ db.php
│   └─ header.php
│          
└─  css
    └─ style.css

inc/header.php : 공통 헤더
inc/db.php : 공통으로 이용할 DB 정보

index.php : 초기화면
login.php : 로그인 화면
login_func.php : 로그인 정보 확인
regist.php : 회원가입 화면
regist.post.php : 회원가입 가능여부 확인 및 DB 삽입
home.php : 로그인 완료 화면

css/style.css : 적용할 CSS

inc/header.php

<p style='text-align:right'>
	<?php
	if(!session_id()){
		session_start();
	}

	if(!isset($_SESSION['member_id'])){
	?>
	<a href="/login.php">로그인</a>
	<a href="regist.php">회원가입</a>
	<?php
	}else{
	?>
	<a href="/index.php">로그아웃</a>
	<?php
	}
	?>
</p>

로그인이 되어있지 않은 상태 ( ! isset($_SESSION['member_id']) )
- 로그인 / 회원가입 출력
로그인 되어있는 상태 ( isset($_SESSION['member_id']) )
- 로그아웃 출력

inc/db.php

<?php
    // DB 연결 func
    function db_connect(){
        define('DB_SERVER', 'localhost');
        define('DB_USERNAME', '*****');
        define('DB_PASSWORD', '***********');
        define('DB_NAME', 'sqlDB');
        
        $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
        //한글 인코딩 (utf-8)
        $db_conn -> set_charset("utf8");
        // DB 연결 확인
        if($db_conn -> connect_errno){
            echo "Failed to connect to MySQL: ". $mysqli -> connect_error;
            exit();
        }	
        return $db_conn;
    }
?>

db 연결을 위한 세부정보 및 연결 함수

index.php

<?php
session_start();
unset($_SESSION['member_id']);
unset($_SESSION['member_name']);
?>

<!DOCTYPE html>
<html>
	<head>
		<title>Index Page</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="container">
			<h1 class="spacing grad">Index 페이지</h1>
			<?php require_once("inc/header.php"); ?>
			<h2>로그인해주세요.</h2>
			<p>아이디가 없다면 회원가입.</p>
		</div>
	</body>
</html>

시작화면으로 오면 세션 변수들 초기화
- unset($_SESSION[' ']);

사이트의 첫 화면, inc/header.php 로부터 로그인/회원가입 헤더를 불러옴

<!DOCTYPE html>
<html lang="ko">
	<head>
	<meta charset="utf-8">
		<title>Login Page</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
        <div class="container">
        	<h1 class="shadow spacing grad">로그인 페이지</h1>	
                <form method="POST" action="login_func.php" accept-charset="utf-8" autocomplete="off">
                    <br>
                    <label for="userID">아이디</label>
                    <input type="text" name="userID" placeholder="User ID" autofocus/>
                    
                    <label for="pass">비밀번호</label>
                    <input type="password" name="pass" placeholder="User Password"/>
                    
                    <input type="submit" value="로그인"/>
            	</form>
            <br><br>
            <footer class="footer">
            	<div class="footer-info">아이디와 비밀번호를 입력해주세요.</div>
            </footer>
        </div>
    </body>
</html>

로그인 페이지
입력 데이터 정렬 방식 설정
- accept-charset="utf-8" : 데이터 정렬 방식을 utf8 로 설정

login_func.php

<?php
    require_once("inc/db.php");

	$userID = isset($_POST['userID']) ? $_POST['userID'] : null;
	$pass = isset($_POST['pass']) ? $_POST['pass'] : null;

    // 파라미터 체크
    if($userID == null || $pass == null){
        header("Location: /login.php");
        exit();
    }

    // 회원 데이터 조회
    $db_conn = db_connect();
    $sql = "SELECT * FROM userTbl WHERE userID= '$userID'";
    $ret = mysqli_query($db_conn, $sql);
    
    // 회원 데이터가 없다면
    $row = mysqli_fetch_array($ret);
    $cnt = mysqli_num_rows($ret);
    if($row['userID'] == null || $cnt == 0){
        echo '<script>alert("로그인 정보를 찾을 수 없거나 잘못 입력"); history.back(-1)</script>';
        exit();
    }
    // 비밀번호 일치 여부 확인
    $is_pw = password_verify($pass, $row['pass']);

    if($is_pw === false){
        echo '<script>alert("로그인 정보를 찾을 수 없거나 잘못 입력"); history.back(-1)</script>';
        exit();
    }
    $userName = $row['name'];
    
    session_start();
    $_SESSION['member_id'] = $userID;
    $_SESSION['member_name'] = $userName;

    mysqli_close($db_conn);
    header("Location: /home.php");
?>

파라미터를 변수에 삽입
- $var = isset($_POST[' var ']) ? $_POST[' var '] : null; (기본형)
- POST 값이 잘 들어왔다면 해당 값을 $var 변수에 넣어주고, 아니면 NULL값을 넣어줌
파라미터가 제대로 들어왔는지 확인
- if($userID == null || $pass == null)
- 둘중 하나라도 null값이라면, 로그인 페이지로 돌아감
회원 데이터 (아이디 조회)
- $sql = "SELECT * FROM userTbl WHERE userID= '$userID'";
- 입력된 아이디에 대한 정보가 DB에 있는지 SQL Select를 통해 확인
회원 데이터가 없다면?
- $cnt = mysqli_num_rows($ret); : num_rows 는 입력정보에 대해 같은 것의 갯수를 반환
  - $cnt == 0 이라면, 입력된 정보와 일치하는 정보가 DB에 없다는 것
- $row = mysqli_fetch_array($ret);
  - $row['userID'] == null 이라면, 입력 정보에 대해 조회된 정보가 없다는 것
- 일치 하는 회원 정보가 없다면
  - "로그인 정보를 찾을 수 없거나 잘못 입력" 라는 경고창과 함께 이전페이지로 돌아감
비밀번호 일치 여부 확인
- 삽입시 암호화 되어있기 때문에 password_verify를 이용
  - BCRYPT 방식은 복호화 불가능 하기 때문
  - $is_pw = password_verify($pass, $row['pass']); 는 일치하면 True를 일치하지 않으면 False를 반환
- 비밀번호가 일치하지 않는다면
  - "로그인 정보를 찾을 수 없거나 잘못 입력" 라는 경고창과 함께 이전페이지로 돌아감
  - (아이디와 비밀번호중 무엇이 틀린지 모르도록 두 경고 메시지를 같게 설정)
아이디와 비밀번호가 일치 - 로그인 성공
- $_SESSION['var'] = $var
  - 세션을 이용하여 다른 페이지에서 사용할 수 있도록 함
  - 다른 페이지에서 변수를 받아서 출력 가능
  - 공통 헤더 사용을 위함
- DB 접속 종료 및 홈(로그인 완료) 페이지로 이동
  - mysqli_close($db_conn);
  - header("Location: /home.php");

regist.php

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html"; charset="utf-8">
    <title>Page to Join</title>
    	<link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    	<div class="container">
        	<h1 class="shadow spacing grad">회원가입</h1>
            	<form method="POST" action="regist.post.php" accept-charset="utf-8" autocomplete="off">
                    <br>
                    <label for="name">이름</label>
                    <input type="text" name="name" placeholder="Your Name" autofocus/>
                    <label for="userID">아이디</label>
                    <input type="text" name="userID" placeholder="User ID"/>
                    <label for="pass">비밀번호</label>
                    <input type="password" name="pass" placeholder="User Password"/>
                    <label for="pass_check">비밀번호 재입력</label>
                    <input type="password" name="pass_check" placeholder="Rewrite Password"/>
                    <label for="email">이메일</label>
                    <input type="email" name="email" placeholder="E-mail"/>
                    <label for="birth">생년월일</label>
                    <input type="date" name="birth"/>
                    <input type="submit" value="회원가입">
                    <input type="reset" value="초기화">                 
                </form>
            <br><br>
            <footer class="footer">
            	<div class="footer-info">회원 정보를 입력해주세요.</div>
            </footer>
        </div>
    </body>
</html>

이름, 아이디
- input type = 'text'
- DB : varchar(20)
비밀번호, 비밀번호 재입력
- input type = 'password'
- DB : varchar(256)
- 비밀번호에 대해서만 필요
- varchar(256) 인 이유는 암호화 처리 과정에서 길어지기 때문
- 비밀번호 재입력은 단순히 입력 오류 방지를 위함
이메일
- input type = 'email'
- DB : varchar(30)
생년월일
- input type ='date'
  - 직접입력 가능
  - 달력을 눌러서 설정 가능
- DB : date
  - YYYY-MM-DD 표기
회원가입
- input type : 'submit'
- 정보 전달용
초기화
- input type : 'reset'
- 현재 입력 정보 초기화

regist.post.php

<?php
    require_once("inc/db.php");

    $userID = isset($_POST['userID']) ? $_POST['userID'] : null;
    $name = isset($_POST['name']) ? $_POST['name'] : null;
    $pass = isset($_POST['pass']) ? $_POST['pass'] : null;
    $pass_check = isset($_POST['pass_check']) ? $_POST['pass_check'] : null;
    $email = isset($_POST['email']) ? $_POST['email'] : null;
    $birth = isset($_POST['birth']) ? $_POST['birth'] : null;

    // 파라미터 체크
    if($userID == null || $name == null || $pass == null || $email == null || $birth == null || $pass_check == null){
        echo '<script>alert("입력정보가 부족합니다."); history.back(-1)</script>';
        // header("Location: /regist.php");
        exit();
    }

    // 이미 있는 '아이디'인지 확인
    $db_conn = db_connect();
    $sql = "SELECT * FROM userTbl WHERE userID= '$userID'";
    $ret = mysqli_query($db_conn, $sql);
    $cnt = mysqli_num_rows($ret);

    if($cnt == 1){
        echo '<script>alert("이미 존재하는 \'아이디\' 입니다."); history.back(-1)</script>';
        exit();
    }

    //재입력 비밀번호 확인
    if($pass != $pass_check){
        echo '<script>alert("재입력 비밀번호가 일치하지 않습니다."); history.back(-1)</script>';
        exit();
    }
    //비밀번호 암호화
    $bcrypt_pw = password_hash($pass, PASSWORD_BCRYPT);

    //데이터 저장
    date_default_timezone_set('Asia/Seoul');
    $sql = "INSERT INTO userTbl VALUES ('$userID', '$name', '$bcrypt_pw', '$email', '$birth', now())";
	$result = mysqli_query($db_conn, $sql);
    if($result){
        echo '<script type="text/javascript">'; 
        echo 'alert("회원가입을 성공적으로 완료했습니다.\n로그인 페이지로 이동합니다.");';
        echo 'document.location.href = "/login.php";';
        echo '</script>';
        exit();
    }else{
        echo "회원가입 실패, userTbl에 삽입 실패 : " . mysqli_error($db_conn);
    }

    mysqli_close($db_conn);
?>

파라미터 확인 및 체크

이미 존재하는 '아이디' 인지 확인
- $cnt = mysqli_num_rows($ret);
  - $cnt 의 값이 1이라면 이미 해당 아이디가 존재한다는 것

재입력 비밀번호 확인
- 단순하게 입력된 두 번의 비밀번호의 일치 여부 확인
- $pass == $pass_check
비밀번호 암호화
- 비크립트 암호화
- $bcrypt_pw = password_hash($pass, PASSWORD_BCRYPT);
회원 데이터 저장
- SQL Query INSERT
- $sql = "INSERT INTO userTbl VALUES ('$userID', '$name', '$bcrypt_pw', '$email', '$birth', now())";
  - now() 는 현재 시각을 입력 : '가입 일시' 정보를 위함
  - YYYY-MM-DD HH-MM-SS (현재의 년-월-일 시-분-초)
회원가입 성공 및 페이지 이동
- 회원가입이 성공했으므로, 로그인 페이지로 이동

home.php

<!DOCTYPE html>
<html lang="ko">
	<head>
	<meta charset="utf-8">
		<title>Wellcome</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
    	<div class ="container">
            <h1 class="spacing grad">Home</h1>
            <?php require_once("inc/header.php"); ?>
            <?php 
                $name = $_SESSION['member_name'];
                $userID = $_SESSION['member_id'];
                echo "안녕하세요, " .$name. " 님";
            ?>
            <a href='mypage.php?userID=", $userID, "'>마이페이지</a>
            <a href='withdraw.php?userID=", $userID, "'>회원탈퇴</a>
        </div>
    </body>
</html>

사이트의 홈 화면
- $_SESSION['member_id'] 가 설정되어 있으므로 헤더가 '로그인/회원가입'이 아닌 '로그아웃'으로 표시됨
$name = $_SESSION['member_name']; 가 설정되어있기 때문에
- 해당하는 유저의 이름 출력 가능
마이페이지 / 회원탈퇴 기능은 추후 구현 예정
- (마이페이지 - 나의 정보)

모의 해킹 스터디 - 과제 02주차(3) (마이페이지 - 나의 정보)

모의 해킹 스터디 - 2주차 과제(3) (마이페이지 - 나의 정보) 모의 해킹 스터디 - 과제 02주차(2) (회원가입/로그인 페이지 구현)의 Develop 과제 모의 해킹 스터디 - 과제 02주차(2) (회원가입/로그인 페

codegear-archive.tistory.com

후기

SQL 에 대한 이해 부족으로 인하여 시간이 오래 걸림

한글 인코딩 문제
DB 설정시 각각의 종류/데이터 정렬 방식에 유의
SQL문의 활용 방법에 대한 추가 공부
함수화가 제대로 되지 않은 점
- 함수화시 넣어줘야할 '파라미터' 설정에 대한 부족
이전 과제 대비 발전하지 못한 CSS

PHP는 순서대로 실행됨을 잊지 말 것 !!

질문 환영, 수정 및 보완에 대한 지적 환영

현재글[과제] 02주차(2) (회원가입/로그인 페이지 구현)

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

📓 Codegear_Archive