-
[PHP] 게시판 만들기 - 회원가입 구현프로그래밍/PHP 2019. 11. 25. 13:07
이번 프로젝트는 다음을 참고하였습니다.
http://blog.naver.com/PostList.nhn?blogId=bgpoilkj&from=postList&categoryNo=60
S Writer의 IT NOTE : 네이버 블로그
군무원이 꿈이면서 개발도 하는 대학생의 공간 developtest.org https://github.com/LEEBYEONGGYU/WebDevelop.git
blog.naver.com
회원가입 구현은 다음과 같이 구성됩니다.
1. 회원가입 화면인 join.php
2. db 연동 코드를 저장하고 있는 db_con.php
3. 회원가입에 입력한 정보를 db와 연동해 저장하는 join_ok.php
이번 실습에서는 제이쿼리 설치를 추천합니다. 설치법과 대략적인 사용법은 다음 링크를 참고하시면 됩니다.
1. 회원가입 화면 구현
저번에 로그인 화면 구현한 것과 마찬가지로 부트스트랩을 이용합니다. login.php 파일을 그대로 복사한 후 약간만 수정해줍니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" initial-scale="1"> <!-- 스타일 시트 참조 / css폴더의 bootstrap.css 참조 --> <link rel="stylesheet" href="css/bootstrap.css"> <title>PHP 게시판 웹 사이트</title> <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> /* 입력 확인 */ function check_input() { if (!$("#id").val()) { alert("아이디를 입력하세요!"); $("#id").focus(); return; } if (!$("#pass").val()) { alert("비밀번호를 입력하세요!"); $("#pass").val().focus(); return; } if (!$("#pass_confirm").val()) { alert("비밀번호확인을 입력하세요!"); $("#pass_confirm").focus(); return; } if (!$("#name").val()) { alert("이름을 입력하세요!"); $("#name").focus(); return; } if (!$("#phone").val()) { alert("전화번호를 입력하세요!"); $("#phone").focus(); return; } if (!$("#email").val()) { alert("이메일 주소를 입력하세요!"); $("#email").focus(); return; } if ( $("#pass").val() != $("#pass_confirm").val()) { alert("비밀번호가 일치하지 않습니다.\n다시 입력해 주세요!"); $("#pass").focus(); $("#pass").select(); return; } document.join.submit(); } /* 초기화 */ function reset_form() { document.join.id.value = ""; document.join.pass.value = ""; document.join.pass_confirm.value = ""; document.join.name.value = ""; document.join.gender.value = ""; document.join.phone.value = ""; document.join.email.value = ""; document.join.id.focus(); return; } </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><a href="login.php">로그인</a></li> <li class="active"><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="join" method="post" action="join_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" id="id" maxlength="15"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="비밀번호" name="pass" id="pass" maxlength="20"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="비밀번호 확인" name="pass_confirm" id="pass_confirm" maxlength="20"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="이름" name="name" id="name" maxlength="20"> </div> <div class="form-group" style="text-align: center"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="gender" id="gender1" autocomplete="off" value="남자" checked>남자 </label> <label class="btn btn-primary"> <input type="radio" name="gender" id="gender2" autocomplete="off" value="여자">여자 </label> </div> </div> <div class="form-group"> <input type="tel" class="form-control" placeholder="전화번호" name="phone" id="phone" maxlength="20"> </div> <div class="col-lg-4"></div> <div class="form-group"> <input type="email" class="form-control" placeholder="이메일" name="email" id="email" maxlength="80"> </div> <span class="btn btn-primary form-control" onclick="check_input()">회원가입</span> <span class="btn btn-primary form-control" onclick="reset_form()">초기화</span> </form> </div> </div> </div> </body> </html>회원의 아이디, 비밀번호, 이름, 성별, 전화번호, 이메일을 입력받을 수 있도록 구현했고 또 추가적으로 앞에서 언급한 정보들이 입력 되었는지 확인하는 check_input() 함수와 입력한 정보들을 초기화하는 reset_form() 함수를 구현합니다.
check_input()은 제이쿼리를 이용하여 구현 하였고 reset_form은 바닐라 자바스크립트를 이용하여 구현 했습니다.
제이쿼리를 이용하여 코드를 짜면 document.join.id.value를 $("#id").val() 와 같이 간소화 할 수 있기 때문에 코드의 단순화에서 장점이 있습니다. (reset_form의 내용은 여러분이 제이쿼리를 이용해 변경해보시길 바랍니다!)
2. DB 연동 코드 저장
회원가입 폼에 작성한 내용을 DB에 입력하기 위해서 연동을 해줘야합니다. 먼저 db_con.php 파일을 작성하여 db 연동에 필요한 코드를 저장해봅시다.
<!-- DB 연동 --> <?php $db_id="사용자 계정 id"; $db_pw="사용자 계정 pw"; $db_name="db 이름"; $db_domain="localhost"; $db=mysqli_connect($db_domain,$db_id,$db_pw,$db_name); // 페이징, 조회수 처리 등 코드 간소화를 위해 사용할 함수 function 함수 이름 작성($sql){ global $db; return $db->query($sql); } ?>mysqli_connect 함수를 통해 PHP와 MySQL을 연결해주고 쿼리 실행 함수를 매번 필요할 때마다 호출할 수 있게끔 임의의 함수를 만들어 줍니다. 이는 나중에 페이징, 조회수 처리 등 DB를 이용할 때 코드 간소화를 위해 사용할 예정입니다.
3. DB 연동하여 데이터 저장
방금 위에서 만든 db_con.php를 이용하여 회원가입 폼에서 작성한 데이터를 DB에 저장해봅시다.
include_once "location of db_con.php";db_con.php가 저장되어 있는 위치를 참조하도록 include 해줍니다.
$id = $_POST['id']; $pass = password_hash($_POST['pass'], PASSWORD_DEFAULT); // 입력받은 패스워드를 해쉬값으로 암호화 $name = $_POST['name']; $gender = $_POST['gender']; $phone = $_POST['phone']; $email = $_POST['email'];join.php에서 post로 요청한 값들을 post로 받아와 각각의 변수에 저장해줍니다.
여기서 password_hash()라는 함수를 볼 수 있는데 이것은 입력받은 패스워드를 해쉬값으로 암호화 하는 함수로 비밀번호의 보안에 효과적입니다. 이에 대해 자세한 내용과 이해를 돕기위해 다음 링크를 남깁니다.
mq("INSERT user SET id = '$id' , pass = '$pass', name = '$name', gender = '$gender', phone = '$phone', email = '$email' "); echo " <script> alert('회원가입이 완료 되었습니다.'); location.href = 'index.php'; </script> ";위에서 만들어줬던 함수에 삽입 SQL 쿼리를 넣어주면 회원가입 구현이 완료됩니다.
(insert into 테이블명(필드이름) values(데이터값)를 이용하셔도 괜찮습니다.)
★ 아이디 중복체크
제이쿼리, 비동기 통신을 이용하여 다음과 같이 회원가입을 구현할 수 있습니다.
<div class="form-group"> <span id="id_check_msg" data-check="0"></span> <!--커스텀 속성:data-check="0" --> </div>상태 메세지를 나타내주기 위해서 다음과 같이 span 태그를 아이디 입력창과 비밀번호 확인 입력창에 만들어 줍니다.
span 태그 안의 data-check는 사용자가 임의로 정의한 커스텀 속성입니다. 이를 정의한 이유는 아이디 중복 체크를 할 때 사용 가능한 아이디일 때 값을 1로 변경하여 중복 여부를 확인하기 위해서 입니다.
/* 아이디 중복 체크(비동기통신) */ $(function(){/*문서가 로드되면 function을 실행하라 */ $("#id").blur(function(){/*아이디가 id인것을 찾아 포커즈를 빠져나갈때 발생하는 이벤트 */ if($(this).val()==""){ $("#id_check_msg").html("아이디를 입력하세요.").css("color","red").attr("data-check","0");/*선택자를 .연사자추가해서 계속 사용가능 */ $(this).focus(); }else{ checkIdAjax(); } }); });제이쿼리의 blur 이벤트는 마우스 포커스가 빠져나갈 때 발생하는 이벤트입니다. id 입력창을 빠져나갈 때 값이 공백이라면 '아이디를 입력하세요' 라는 메세지를 빨간색으로 띄우게 되고, attr() 함수를 통해 아까 정의한 커스텀 속성 data-check에 0을 저장하고 focus 이벤트를 통해 창을 넘어가지 못하게 만들어줍니다.
만약 공백이 아니라면 checkIdAjax()라는 비동기 통신을 위한 함수를 실행합니다.
/* 아이디 중복 체크(비동기통신) */ function checkIdAjax(){//id값을 post로 전송해서 서버와 통신하여 중복 결과 json 형태로 받아오는 함수 $.ajax({ //비동기통신방법, 객체로 보낼때{}사용 url : "데이터를 보낼 url", type : "데이터 전송 방식", dataType : "데이터 타입", data : { "데이터 인자" : 데이터 값 }, success : function(data){ if(data.check){ //json사용했기때문에 data.으로 접근가능 $("#id_check_msg").html("사용 가능한 아이디입니다.").css("color", "blue").attr("data-check","1"); }else{ $("#id_check_msg").html("중복된 아이디입니다.").css("color", "red").attr("data-check","0"); $("#id").focus(); } } }); }비동기 통신의 기본 형태 입니다. 각각의 인자가 의미하는 바는 간단하게 코드에서 확인할 수 있지만 이해하기 힘드실 겁니다. 비동기 통신의 기본 요소들에 대해서 먼저 공부를 하시는 것을 추천드립니다. (그 다음에 코드를 채워보세요!)
여기서 주목할 곳은 조건문 if(data.check) 입니다. url로 데이터를 보내서 data.check의 값이 참이라면 '사용 가능한 아이디입니다.' 라는 파란색 텍스트를 출력하고 data-check의 값을 1로 바꿈으로써 사용 가능한 아이디임을 확인합니다. 만약 data.check의 값이 거짓이라면 '중복된 아이디입니다.' 라는 텍스트를 빨간색으로 출력하고 data-check의 값을 0으로 저장해 여전히 중복체크가 필요함을 나타냅니다.
<?php !empty($_POST['id']) ? $id = $_POST['id'] : $id=""; $ret['check'] = false; if($id != ""){ $con = mysqli_connect("localhost", "user1", "12345", "bbs"); $sql = "select id from user where id = '{$id}' "; $result = mysqli_query($con, $sql); $num = mysqli_num_rows($result); if($num==0){ $ret['check'] = true; } } echo json_encode($ret); ?>전송한 url에 있어야 할 코드 입니다. post 값으로 id 값을 받아와 공백인지 여부를 확인하고 참, 거짓 값을 설정 합니다. 다음에 db를 연동하여 post 값에서 받아온 id와 db의 id가 일치하는 레코드가 있는지 확인하고 mysqli_num_rows()
를 통해서 만족하는 레코드의 수가 존재하면 $num 변수에 1이 저장됩니다. (이는 false이므로 중복을 뜻합니다.)
만약 값이 존재하지 않다면 $num이 0이라면 이는 사용 가능한 아이디를 뜻하며 true로 값을 바꾸고 json 값으로 출력합니다.
사실상 이 코드를 통해 checkIdAjax() 함수를 완성시킬 수 있는 모든 힌트가 거의 다 나왔습니다! 비밀번호쪽은 여러분들이 한번 고민하여 구현 해보시길 바랍니다!
※ 완성 코드는 공지사항에 있는 깃헙 주소에서 확인할 수 있습니다.
PHP 게시판 만들기 시리즈 👇
노력의 천재
Carpe Diem, Seize the day
transferhwang.tistory.com
'프로그래밍 > PHP' 카테고리의 다른 글
[PHP] 게시판 만들기 - 게시판 화면 구현 ① (0) 2020.02.04 [PHP] 게시판 만들기 - 메인화면, 로그아웃 구현 (3) 2020.01.29 [PHP] 게시판 만들기 - 로그인 구현 (13) 2019.11.24 [PHP] 게시판 만들기 - DB 설계 (0) 2019.10.30 [PHP] 절대경로와 상대경로 (0) 2019.10.17