-
[PHP] 게시판 만들기 - 로그인 구현프로그래밍/PHP 2019. 11. 24. 23:50
로그인 구현은 다음과 같이 세가지로 구성됩니다.
1. 로그인 화면인 login.php
2. 로그인 화면에서 입력한 아이디, 비밀번호를 db와 연동해 확인하는 login_ok.php
3. 아이디와 비밀번호를 입력했는지 확인하는 login.js
1. 로그인 화면 구현
프론트의 디자인은 부트스트랩을 이용합니다. 부트스트랩의 사용방법에는 크게 두가지가 있는데, 첫번째는 직접 파일을 다운받아 코드내에서 참조하는 방식, 두번째는 CDN 방식으로 부트스트랩 url을 이용하여 코드내에서 참조하는 방식입니다. 저는 부트스트랩 파일을 다운받아 프로젝트에 넣어두고 두번째 방법을 사용했습니다. 만약 첫번째 방법을 사용하시려면 아래의 부트스트랩 홈페이지에서 다운 받으셔야 합니다.
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
다음은 로그인 화면을 구현한 login.php 코드 입니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" initial-scale="1"> <!-- 스타일 시트 참조 / css폴더의 bootstrap.css 참조 --> <title>PHP 게시판 웹 사이트</title> <link rel="stylesheet" href="css/bootstrap.css"> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="./js/login.js"></script> </head> <body> <!-- 표준 네비게이션 바 (화면 상단에 위치, 화면에 의존하여 확대 및 축소) --> <nav class="navbar navbar-default"> <div class="navbar-header"> <!-- Collapse : 제목을 클릭하면 해당내용이 펼쳐지고 다른내용은 접히는 특수 효과 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="main.php">PHP 게시판 웹 사이트</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="main.php">메인</a></li> <li><a href="list.php">게시판</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">접속하기<span class="caret"></span></a> <ul class="dropdown-menu"> <li class="active"><a href="login.php">로그인</a></li> <li><a href="join.php">회원가입</a></li> </ul> </li> </ul> </div> </nav> <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_ok.php"> <h3 style="text-align: center">로그인 화면</h3> <div class="col-lg-4"></div> <div class="form-group"> <input type="text" 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> </body> </html>각각의 코드가 어떤 기능을 하는지는 하나하나 지워보면서 확인하셔도 좋고 부트스트랩 예제를 찾아보시면 어렵지 않게 공부하실 수 있습니다. 여기서 주목해야 할 곳은 form 태그 입니다.
<form name="loginSbmt" id="loginSbmt" method="post" action="login_ok.php"> <h3 style="text-align: center">로그인 화면</h3> <div class="col-lg-4"></div> <div class="form-group"> <input type="text" 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>name이 'id'인 아이디 정보와 name이 'pass'인 비밀번호 정보를 로그인 버튼을 누르면 post 방식으로 'login_ok.php' 로 전송 한다는 것을 확인할 수 있습니다. login_ok.php 에서는 받아온 정보를 db의 정보와 일치하는지를 판단해 로그인을 할 지 안할 지를 결정해주는 역할을 해야합니다.
2. 로그인 정보 확인 (DB 연동)
다음은 login_ok.php의 코드입니다.
<?php $id = $_POST['id']; $pass = $_POST['pass']; $con = mysqli_connect("localhost", "user1", "12345", "bbs"); $sql = "SELECT * FROM user WHERE id='$id'"; $result = mysqli_query($con, $sql); $num_match = mysqli_num_rows($result); if(!$num_match) { echo(" <script> window.alert('등록되지 않은 아이디입니다!') history.go(-1) </script> "); } else { $row = mysqli_fetch_array($result); $db_pass = $row['pass']; // 수정된 부분 : $db -> $con mysqli_close($con); /* 로그인 화면에서 전송된 $pass와 DB의 $db_pass의 해쉬값 비교 */ if(!password_verify($pass, $db_pass)){ echo(" <script> window.alert('비밀번호가 틀립니다!') history.go(-1) </script> "); exit; }else { session_start(); $_SESSION["userid"] = $row["id"]; $_SESSION["username"] = $row["name"]; echo(" <script> location.href = 'list.php'; </script> "); } } ?>post 방식으로 받아온 id와 pass 정보를 새로 정의한 변수에 저장해주고, mysqli_connect 함수를 통해 db 연동을 실행합니다. 괄호안에 인자는 차례대로 (IP주소, 아이디, 비밀번호, DB명) 입니다.
select 문에 where id=$id 조건을 설정해 post 방식으로 받아온 id가 user 테이블에 있는지 확인하는 쿼리를 $sql에 저장하고 mysqli_query 함수를 통해 이 쿼리를 실행한 후 이를 $result에 저장합니다.
mysqli_num_rows 함수를 통해 만족하는 레코드의 수를 구하고 레코드가 존재하지 않으면 존재하지 않는 아이디, 존재한다면 db에 저장되어있다는 뜻이므로 회원가입이 된 아이디입니다. 그러므로 mysqli_fetch_array 함수를 통해 해당하는 레코드를 가져오고, 그 레코드의 비밀번호와 post 방식으로 전송된 비밀번호가 같은지 확인합니다. 비밀번호가 같지 않다면 '비밀번호가 틀립니다!' 라는 메세지 경고창이 뜨고 일치한다면 세션 아이디와 이름을 부여하고, 'list.php' 게시판 화면으로 넘어가게 합니다.
※ 중간의 조건문에서 password_verify 함수를 통해 db에 저장된 해쉬값과 post 방식으로 전송된 pass 비밀번호가 같은지를 확인하는 함수입니다. 나중에 회원가입을 구현할 때 보안을 위해 비밀번호를 해쉬값으로 변경하여 db에 저장할 것인데, 그 때 다시 한번 설명하도록 하겠습니다.
3. 아이디, 비밀번호 입력했는지 확인
function check_input() { if (!document.loginSbmt.id.value) { alert("아이디를 입력하세요"); document.loginSbmt.id.focus(); return; } if (!document.loginSbmt.pass.value) { alert("비밀번호를 입력하세요"); document.loginSbmt.pass.focus(); return; } document.loginSbmt.submit(); }다음 login.js를 프로젝트의 js파일에 생성한 후 login.php의 header 중간에 다음과 같이 참조하도록 설정해준다.
<script src="./js/login.js"></script>
나머지 결과는 알아서 확인해보시면 됩니다. 로그인이 되는지 확인해보려면 phpmyadmin에서 수동으로 User 테이블에 정보를 입력해주고 해당하는 아이디와 비밀번호를 입력한 후에 list.php로 넘어가는지 확인하면 됩니다.(list.php가 빈 코드라도 존재해야 합니다.)
※ 완성 코드는 공지사항에 있는 깃헙 주소에서 확인할 수 있습니다.
출처 : 황재호, PHP 프로그래밍 입문, 한빛아카데미 // 나동빈, JSP 게시판 만들기, Youtube
PHP 게시판 만들기 시리즈 👇
노력의 천재
Carpe Diem, Seize the day
transferhwang.tistory.com
'프로그래밍 > PHP' 카테고리의 다른 글
[PHP] 게시판 만들기 - 메인화면, 로그아웃 구현 (3) 2020.01.29 [PHP] 게시판 만들기 - 회원가입 구현 (14) 2019.11.25 [PHP] 게시판 만들기 - DB 설계 (0) 2019.10.30 [PHP] 절대경로와 상대경로 (0) 2019.10.17 [PHP] 쿠키와 세션이란? + 예제 (0) 2019.10.10