회원 가입과 로그인

Download Report

Transcript 회원 가입과 로그인 

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