소소한 IT이야기/PHP_개발

[M2 MAMP] PHP 게시판 구축 - 02 (feat. 로그인페이지)

Klaus 2023. 1. 24. 17:01

0. 로그인 화면(CSS)

디자인의 경우 부트스트랩 사이트에서 다운받아 프로젝트에 넣고 개발 중간마다 불러오는 방식으로 작성합니다.

누군가 만드신~ SQLi 로그인페이지와 최대한 같게 깔끔하게 만들고 싶어서 찾던 중 블로거님의 글을 보고 만들어 하나씩 따라해가며 만들었습니다. 

https://getbootstrap.com/

 

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

1. 게시판 - DB 연동(db_con.php)

DB와 연동되어야 할 페이지를 간소화하기 위해 따로 페이징하려고 합니다.

<?php
	$db_domain="localhost";
	$db_id="root";
	$db_pw="";
	$db_name="";
	$db=mysqli_connect($db_domain,$db_id,$db_pw,$db_name);
	function mq($sql){
		global $db;
		return $db->query($sql);
	}
?>

2.  게시판 - 로그인 (login.php)

아이디와 패스워드를 사용자에게 받아 로그인버튼을 누르면 post방식으로 전달받아 login_ck.php로 전달합니다.

<form name="loginSbmt" id="loginSbmt" method="post" action="login_ck.php">
해당, 페이지의 경우 입력만 전달받는 페이지로 실제로 로그인 처리하는 페이지는 login_ck 입니다.
 
include_once의 경우 세션 관리를 위해 페이지 입니다.(로그인한 사용자만 게시판을 이용 가능하도록 하기 위해서 입니다.)
<?php
	include_once "./config.php";
?>
<!DOCTYPE html>
<html>
	<body>
		<div class="container"> 
			<div class="col-lg-4"></div>
			<div class="col-lg-4">
				<div class="jumbotron" style="padding-top: 20px;">
					<form name="loginSbmt" id="loginSbmt" method="post" action="login_ck.php">
						<h3 style="text-align: center">로그인</h3>
						<div class="col-lg-4"></div>
						<div class="form-group">
							<input type="email" class="form-control" placeholder="아이디" name="id" maxlength="15">
						</div>
						<div class="form-group">
							<input type="password" class="form-control" placeholder="비밀번호" name="pass" maxlength="20">
						</div>
						
						<a href="#"><span class="btn btn-primary form-control" onclick="check_input()">로그인</span></a>
					</form>
				</div>
			</div>
		</div>
		<script src="./js/login.js"></script>
	</body>
</html>

3. 세션관리 (config.php)

로그인한 사용자만 게시판 이용가능하도록 할 예정입니다.

추후 해당부분은 수정될 예정입니다.( 관리자와 일반사용자 권한)

<?php
	session_start();
	if (isset($_SESSION["userid"])) {
		$userid = $_SESSION["userid"];
	}else{
		$userid = "";
	}if (isset($_SESSION["username"])){
		$username = $_SESSION["username"];
	}else{
		$username = "";
        
  /*사용자와 관리자 구분 22.11.23*/
	}if (isset($_SESSION["role"])){ 
		$role = $_SESSION["role"];
	}else{
		$role = "";
	}
?>

4.  게시판 - 로그인 체크(login_ck.php)

입력받은 id와 패스워드를 sql에 접속하여 검색합니다. sql문에서 개행과 식별과 인증을 분리하여 작성하였습니다.

추후,  테스트를 진행해야하기 때문에 입력받은 ID값은 암호화 및 해시처리를 하지 않고 진행합니다.

<?php
    $id   = $_POST['id'];
    $pass = $_POST['pass']; 
    
 $con = mysqli_connect("localhost", "root", "", "");
   $sql = "SELECT *
   		   FROM user_info 
           WHERE id='$id'
          ";

   $result = mysqli_query($con, $sql);

   $num_match = mysqli_num_rows($result);

   if(!$num_match) {
     echo("
           <script>
             window.alert('등록되지 않은 아이디 입니다!')
             location.href = 'login.php';
           </script>
         ");
    } else {
        $row = mysqli_fetch_array($result);
        $db_pass = $row['pass'];

        mysqli_close($con);
    if($row['pass'] == $db_pw){
        	echo("
	              <script>
	                window.alert('비밀번호를 확인해주세요!')
	                location.href = 'login.php';
	              </script>
	           ");
	           exit;
        }else {
            session_start();
            $_SESSION["userid"] = $row["id"];
            $_SESSION["username"] = $row["name"];
            $_SESSION["role"] = $row["role"];     /*22.11.23*/
            echo("
              <script>
                location.href = 'index.php';
              </script>
            ");
        }
     }        
?>