10장 회원 가입과 로그인 한빛미디어(주)
학습 목표 작성된 회원가입 내용을 DB 테이블에 저장하는 방법을 익힌다 세션에 의한 로그인 처리에 대해 이해한다 아이디 중복 체크 기능을 이해한다 로그인 시 아이디와 비밀번호를 확인하고 처리하는 방법을 익힌다 로그아웃 시 세션을 삭제하는 방법을 익힌다. 회원 정보를 수정하는 법을 익힌다.
주요 학습 내용 01. 회원가입 02. 로그인 03. 회원가입 및 로그인 동작 확인
회원가입 및 로그인 파일 목록 01 파일명 설명 member.sql 회원가입 DB 테이블 생성 명령 member_form.html 회원가입 양식 insert.php 회원가입 양식 시 작성한 내용 DB에 저장 modify_memberinfo.php 회원정보 수정 양식 check_id.php 아이디 중복 확인 modify.php 회원정보 DB에서 수정 login_form.html 로그인 화면 login.php 로그인 시 아이디와 비밀번호 확인 logoff.php 로그 아웃 처리 [표 10-1] 회원 가입과 로그인에 사용되는 파일 목록
회원가입/로그인 설치 02 ⑴ 교재 뒤에 첨부된 CD의 "www" 폴더에서 “dbconn.php" 파일과 “style.css” 파일을 찾아 여러분의 작업 폴더(“C:\Apache\htdocs\본인이니셜\www") 밑으로 복사한다. ⑵ 작업 폴더(“www" 폴더) 밑에 “login" 폴더를 만들고 생성된 “login" 폴더 밑에 교재 뒤 CD의 “www\login" 폴더에 있는 파일들과 "img" 디렉토리를 통째로 복사한다. ⑶ 회원가입 DB 테이블을 생성한다.
회원가입 DB 테이블 03 필드 이름 타입 추가 사항 필드 설명 id varchar(10) not null, primary key 아이디 passwd not null 비밀 번호 name 이름 sex char(1) 성별 tel varchar(20) 전화 번호 address varchar(90) 주소 [표 10-2] 회원 가입 DB 테이블(테이블 명 : member)
회원가입 DB 테이블 만들기 04 메모장으로 다음을 타이핑한 다음 “c:\mysql\bin” 폴더 밑에 “member.sql”이름으로 저장 create table member ( id varchar(10) not null, passwd varchar(10) not null, name varchar(10) not null, sex char(1), tel varchar(20), address varchar(90), primary key(id) ); 명령 프롬프트에서 다음을 실행 C:\mysql\bin> mysql -uphp5 -p1234 php5_db < member.sql
【예제 10-1】member_form.html 02 회원가입 폼 양식 1 : <html> 2 : <body> 3 : <head> 4 : <script> 5 : function check_id( ) 6 : { window.open("check_id.php?id=" + document.member_form.id.value, 8 : "IDcheck","left=200, top=200, width=250,height=100, 9 : scrollbars=no,resizable=yes"); } 11 : 12 : function check_input( ) 13 : { if (!document.member_form.id.value) 15 : { alert("아이디를 입력하세요"); 17 : document.member_form.id.focus( ); 18 : return; }
【예제 10-1】member_form.html 02 21 : if (!document.member_form.name.value) 22 : { alert("이름을 입력하세요"); 24 : document.member_form.name.focus( ); 25 : return; } 27 : 28 : if (!document.member_form.passwd.value) 29 : { alert("비밀번호를 입력하세요"); 31 : document.member_form.passwd.focus( ); 32 : return; } 34 : 35 : if (!document.member_form.passwd_confirm.value) 36 : { alert("비밀번호확인을 입력하세요"); 38 : document.member_form.passwd_confirm.focus( ); 39 : return; }
【예제 10-1】member_form.html 02 42 : if (document.member_form.passwd.value != 43 : document.member_form.passwd_confirm.value) 44 : { alert("비밀번호가 일치하지 않습니다.\n다시 입력해주세요."); 46 : document.member_form.passwd.focus( ); 47 : document.member_form.passwd.select( ); 48 : return; } 51 : document.member_form.submit( ); 52 : } 53 : 54 : function reset_form( ) 55 : { document.member_form.id.value = ""; 57 : document.member_form.name.value = ""; 58 : document.member_form.passwd.value = ""; 59 : document.member_form.passwd_confirm.value = ""; 60 : document.member_form.phone1.value = ""; 61 : document.member_form.phone2.value = ""; 62 : document.member_form.phone3.value = "";
【예제 10-1】member_form.html 02 63 : document.member_form.address.value = ""; 65 : document.member_form.id.focus( ); 67 : return; 68 : } 69 : 70 : </script> 71 : <link rel="stylesheet" href="../style.css" type="text/css"> 72 : </head> 73 : <body topmargin="0"> 74 : <table border=0 cellspacing=0 cellpdding=0 width='776' 75 : align='center'> 76 : <tr><td><img src="img/member_title.gif"></td></tr> 79 : <tr><td background="img/bbs_bg.gif"> 81 : <img border="0" src="img/blank.gif" width="1" height="2"> 82 : </td> 83 : </tr> 84 : </table>
【예제 10-1】member_form.html 02 85 : <table align=center border="0" cellspacing="0" cellpadding="15" 86 : width="718"> 87 : <tr><td align=center> 89 : <form name=member_form method=post action=insert.php> 90 : <table border=0 cellspacing=0 cellpadding=0 align=center 91 : width="682" > 92 : <tr><td bgcolor=DEDEDE> 95 : <table border="0" width=682 cellspacing="1" cellpadding="4"> 96 : <tr><td width=20% bgcolor=#F7F7F7 align=right 98 : style=padding-right:6> 99 : * 아이디 :</td> 100 : <td bgcolor=#FFFFFF style=padding-left:10> 101 : <input type=text size=12 class=m_box 102 : maxlength=12 name=id> 103 : <font color=#2590B3></font> 104 : <input type=button value="중복 확인" 105 : onClick="check_id( )"> </td> </tr>
【예제 10-1】member_form.html 02 108 : <tr><td bgcolor=#F7F7F7 align=right style=padding-right:6> 110 : * 이름 :</td> 111 : <td bgcolor=#FFFFFF style=padding-left:10> 112 : <input type=text size=12 class=m_box maxlength=12 113 : name=name></td> </tr> 115 : <tr> <td bgcolor=#F7F7F7 align=right style=padding-right:6> 117 : * 비밀번호 :</td> 118 : <td bgcolor=#FFFFFF style=padding-left:10> 119 : <input type=password size=10 class=m_box maxlength=10 120 : name=passwd><font color=#2590B3> 121 : </font/></td> </tr> 123 : <tr> <td bgcolor=#F7F7F7 align=right style=padding-right:6> 125 : * 비밀번호 확인 :</td> 126 : <td bgcolor=#FFFFFF style=padding-left:10> 127 : <input type=password size=12 class=m_box maxlength=12 128 : name=passwd_confirm> </td>
【예제 10-1】member_form.html 02 130 : <tr><td bgcolor=#F7F7F7 align=right style=padding-right:6> 132 : 성별 :</td> 133 : <td bgcolor=#FFFFFF style=padding-left:10> 134 : <input type=radio name=sex value='M' checked>남 135 : <input type=radio name=sex value='W'>여 136 : </td></tr> 138 : <tr><td bgcolor=#F7F7F7 align=right style=padding-right:6> 140 : 휴대전화 :</td> 141 : <td bgcolor=#FFFFFF style=padding-left:10> 142 : <select class=input2 name=phone1> 143 : <option value=''>선택</option> 144 : <option value='010'>010</option> 145 : <option value='011'>011</option> 146 : <option value='016'>016</option> 147 : <option value='017'>017</option> 148 : <option value='018'>018</option> 150 : </select>
【예제 10-1】member_form.html 02 151 : - <input type=text size=4 class=m_box name=phone2 152 : maxlength=4> 153 : - <input type=text size=4 class=m_box name=phone3 154 : maxlength=4> 155 : </td> 156 : </tr> 157 : <tr> 158 : <td bgcolor=#F7F7F7 align=right 159 : style=padding-right:6 rowspan=3> 160 : 주 소 :</td> 161 : </tr> 162 : <tr> 163 : <td bgcolor=#FFFFFF style=padding-left:10> 164 : <input type=text size=50 class=m_box name=address> 165 : </td> 166 : </tr> 168 : </table>
【예제 10-1】member_form.html 02 169 : <!---------- 회원가입 입력 폼 끝---------------> 170 : </td> 171 : </tr> 172 : <tr> <td align=center height=60> 174 : <img src="img/ok.gif" border="0" onclick=check_input( )> 175 : <img src="img/reset.gif" border="0" 176 : onclick=reset_form( )></td> </tr> 178 : </form> 179 : </table> 180 : </td> 181 : </tr> 182 : </table> 183 : <!------------- 컨텐츠 테이블 끝 ----------------> 185 : </td> </tr> </table> 188 : </body> 189 : </html>
【예제 10-2】check_id.php 02 아이디 중복 체크 1 : <? 2 : if(!$id) 3 : { 3 : { 4 : echo("아이디를 입력하세요."); 5 : } 6 : else 7 : { 8 : include "../dbconn.php"; // DB 접속 및 선택 9 : 10 : $sql = "select * from member where id='$id' "; 11 : 12 : $result = mysql_query($sql, $connect); 13 : $num_record = mysql_num_rows($result);
【예제 10-2】check_id.php 02 15 : if ($num_record) 16 : { 16 : { 17 : echo "아이디가 중복됩니다.<br>"; 18 : echo "다른 아이디를 사용하세요.<br>"; 19 : } 20 : else 21 : { 22 : echo "사용가능한 아이디입니다."; 23 : } 24 : 25 : mysql_close( ); 26 : } 27 : ?>
【예제 10-3】dbconn.php 02 데이터베이스 접속 1 : <? 2 : $connect = mysql_connect( "localhost", "php5", "1234") or 3 : die( "SQL server에 연결할 수 없습니다."); 4 : 5 : mysql_select_db("php5_db",$connect); 6 : ?>
【예제 10-4】insert.php 02 회원 가입 내용 DB 저장 1 : <? 3 : include "../dbconn.php"; // dconn.php 파일을 불러옴 5 : $sql = "select * from member where id='$id'"; 6 : $result = mysql_query($sql, $connect); 7 : $exist_id = mysql_num_rows($result); 8 : 9 : if($exist_id) { echo(" 11 : <script> 12 : window.alert('해당 아이디가 존재합니다.') 13 : history.go(-1) 14 : </script> 15 : "); 16 : exit; } 19 : $regist_day = date("Y-m-d (H:i)"); // 현재 날짜 저장 20 : $ip = $REMOTE_ADDR; // 방문자의 IP 주소를 저장
【예제 10-4】insert.php 02 22 : if ($phone1 && $phone2 && $phone3) 23 : $tel = $phone1."-".$phone2."-".$phone3; 24 : else 25 : $tel = ""; 26 : 27 : $sql = "insert into member(id, passwd, name, sex, tel, address) "; 28 : $sql .= "values('$id', '$passwd', '$name', '$sex', '$tel', '$address')"; 29 : 30 : // 레코드 삽입 명령 31 : mysql_query($sql, $connect); // $sql 에 저장된 명령 실행 32 : 33 : mysql_close( ); // DB 연결 끊기 34 : 35 : Header("Location:login_form.html"); // login_form.html 로 이동 36 : ?>
【예제 10-5】login_form.html 02 로그인 폼 양식 1 : <html> 2 : <body> 3 : <link rel="stylesheet" href="../style.css" type="text/css"> 5 : <form method=post action=login.php> 6 : <table align=center> 7 : <tr><td><img src="img/login.gif"></td></tr> 8 : <tr height=1 bgcolor=#5AB2C8><td></td></tr> 9 : <tr><td></td></tr> 10 : <tr><td><img src="img/star.gif">아이디 : 11 : <input type="text" name="id" size="10" maxlength="10"></td> 12 : </tr> 13 : <tr><td><img src="img/star.gif">비밀번호 : 15 : <input type="password" name="passwd" size="10" maxlength="10"> </td></tr>
【예제 10-5】login_form.html 02 18 : <tr height=1 bgcolor=#5AB2C8><td></td> </tr> 19 : <tr><td></td></tr> 20 : <tr> 21 : <td align=right> 22 : <input type=image src="img/login_on.gif" border=0> 23 : </a> 24 : <a href="modify_memberinfo.php"><img src="img/member.gif“ border=0></a> 25 : </td> 26 : </tr> 27 : </table> 28 : </form> 29 : 30 : </body> 31 : </html>
【예제 10-6】login.php 02 로그인 처리 1 : <? 4 : if(!$id) { echo("<script> 7 : window.alert('아이디를 입력하세요.') 8 : history.go(-1) 9 : </script> 10 : "); exit; 12 : } 13 : 14 : if(!$passwd) { echo("<script> 17 : window.alert('비밀번호를 입력하세요.') 18 : history.go(-1) 19 : </script> 20 : "); exit; 22 : }
【예제 10-6】login.php 02 24 : include "../dbconn.php"; 25 : 25 : 26 : $sql = "select * from member where id='$id'"; 27 : $result = mysql_query($sql, $connect); 28 : 29 : $num_match = mysql_num_rows($result); 30 : 31 : if(!$num_match) 32 : { echo(" <script> 35 : window.alert('등록되지 않은 아이디입니다.') 36 : history.go(-1) 37 : </script> "); 39 : } 40 : else 41 : { $row = mysql_fetch_array($result); 44 : $db_passwd = $row[passwd];
【예제 10-6】login.php 02 46 : if($passwd != $db_passwd) 47 : { echo(" <script> 50 : window.alert('비밀번호가 틀립니다.') 51 : history.go(-1) 52 : </script> "); exit; 56 : } 57 : else { $userid = $row[id]; 60 : $username = $row[name]; 62 : session_start( ); // 세션 초기화 63 : session_register(userid); // 아이디 등록 64 : session_register(username); // 이름 등록 65 : 66 : echo(" <script> 68 : top.location.href = '../index.php'; 69 : </script>"); } 72 : } 74 : ?>
【예제 10-7】logoff.php 02 로그아웃 처리 1 : <? 1 : <? 2 : session_start( ); // 세션 초기화 3 : session_unregister("userid"); // 세션 변수 userid 삭제 4 : session_unregister("username"); // 세션 변수 username 삭제 5 : 6 : echo(" 7 : <script> 8 : top.location.href = '../index.php'; 9 : </script> 10 : "); 11 : 12 : ?>
【예제 10-8】modify_memberinfo.php 회원 정보 수정 1 : <? 2 : session_start( ); 4 : include "../dbconn.php"; 5 : 6 : $sql = "select * from member where id='$userid'"; 7 : $result = mysql_query($sql, $connect); 9 : $row = mysql_fetch_array($result); 10 : 11 : $phone = explode("-", $row[tel]); 12 : $phone1 = $phone[0]; 13 : $phone2 = $phone[1]; 14 : $phone3 = $phone[2]; 16 : mysql_close( ); 17 : ?>
【예제 10-8】modify_memberinfo.php 82 : <form name=member_form method=post action=modify.php> 83 : <table border=0 cellspacing=0 cellpadding=0 align=center width="682" > 84 : <tr> <td bgcolor=DEDEDE> 86 : <table border="0" width=682 cellspacing="1" cellpadding="4"> 87 : <tr> <td width=20% bgcolor=#F7F7F7 align=right style=padding-right:6> * 아이디 : </td> 90 : <td bgcolor=#FFFFFF style=padding-left:10> <? echo $row[id] ?></td> </tr> 92 : <tr> 93 : <td bgcolor=#F7F7F7 align=right style=padding-right:6> * 이름 :</td> 94 : <td bgcolor=#FFFFFF style=padding-left:10> 95 : <input type=text size=12 class=m_box maxlength=12 name=name 96 : value='<? echo $row[name] ?>'></td> </tr>
【예제 10-8】modify_memberinfo.php 111 : <tr><td bgcolor=#F7F7F7 align=right style=padding-right:6> 성별 :</td> 113 : <td bgcolor=#FFFFFF style=padding-left:10> 114 : <? 115 : if ($row[sex]=='M') 116 : { 117 : echo " <input type=radio name=sex value='M' checked>남 119 : <input type=radio name=sex value='W'>여 "; 121 : } 122 : else 123 : { 124 : echo "<input type=radio name=sex value='M'>남 126 : <input type=radio name=sex value='W' checked>여 "; 128 : } 129 : ?> 130 : </td> </tr>
【예제 10-8】modify_memberinfo.php 132 : <tr> 133 : <td bgcolor=#F7F7F7 align=right style=padding-right:6> 휴대전화 :</td> 134 : <td bgcolor=#FFFFFF style=padding-left:10> 135 : <input type=text size=4 class=m_box name=phone1 maxlength=4 136 : value='<? echo $phone1 ?>'> 137 : - <input type=text size=4 class=m_box name=phone2 138 : value='<? echo $phone2 ?>'> 139 : - <input type=text size=4 class=m_box name=phone3 140 : value='<? echo $phone3 ?>'> 141 : </td> 142 : </tr>
【예제 10-8】modify_memberinfo.php 156 : <tr> 157 : <td align=right height=60> 158 : <img src="img/ok.gif" border="0" onclick=check_input( )> 159 : <img src="img/reset.gif" border="0" onclick=reset_form( )> </td> 160 : </tr> 161 : </form> 162 : </table> 163 : </td> 164 : </tr> 165 : </table> 168 : </td> 169 : </tr> 170 : </table> 171 : </body> 172 : </html>
【예제 10-9】modify.php 회원 정보 수정 처리 1 : <? session_start( ); 4 : include "../dbconn.php"; // dconn.php 파일을 불러옴 6 : $regist_day = date("Y-m-d (H:i)"); // 현재 날짜 저장 7 : $ip = $REMOTE_ADDR; // 방문자의 IP 주소를 저장 8 : 9 : if ($phone1 && $phone2 && $phone3) 10 : $tel = $phone1."-".$phone2."-".$phone3; 11 : else $tel = ""; 13 : 14: $sql = "update member set passwd='$passwd', name='$name' , "; 15 : $sql .= "sex='$sex', tel='$tel', address='$address' where id='$userid'"; 17 : mysql_query($sql, $connect); // $sql 에 저장된 명령 실행 19 : mysql_close( ); // DB 연결 끊기 21 : Header("Location:../main.php"); // main.php 로 이동 22 : ?>