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

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

모의 해킹 스터디 - 1주차 과제(간이 로그인 페이지 제작)

모의 해킹 스터디 - 1주차 과제(간이 로그인 페이지 제작)

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

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

---

index.php

login.php

regist.php

home.php

 

동작 과정

• 첫 화면인 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 로부터 로그인/회원가입 헤더를 불러옴

---

login.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) (마이페이지 - 나의 정보)

---

후기

 

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

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

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

 

 

 

 

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