웹 페이지 구축 - 회원가입, 로그인

웹 페이지 구축 - 회원가입, 로그인

이번에는 회원가입과 로그인 페이지를 만들어 보도록 하겠습니다.

먼저 회원가입을 하기 위해서 SQL을 이용해서 DB를 구축해야 합니다.

회원가입에 들어가야하는 항목으로는 id, password, name, sex, tel, address라고 하도록 하겠습니다.

회원가입

회원가입 부분은 /var/www/html/login 에 위치해야 합니다.

그러면 아래와 같이 member.sql을 작성합니다.

이렇게 sql이 정상적으로 들어간 것을 볼 수 있습니다.

member_form.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<html>
        <body>
                <head>
                        <script>
                                function check_id()
                                {
                                        window.open("check_id.php?id="+document.member_form.id.value, "IDcheck", "left=200, top=200, width=250, height=100, scrollbars=no, resizable=yes");
                                }
 
                                function check_input()
                                {
                                        if(!document.member_form.id.value)
                                        {
                                                alert("Input ID!");
                                                document.member_form.id.focus();
                                                return;
                                        }
 
                                        if(!document.member_form.name.value)
                                        {
                                                alert("Input your name!");
                                                document.member_form.name.focus();
                                                return;
                                        }
 
                                        if(!document.member_form.passwd.value)
                                        {
                                                alert("Input your password!");
                                                document.member_form.passwd.focus();
                                                return;
                                        }
 
                                        if(!documnet.member_form.passwd_confirm.value)
                                        {
                                                alert("Input password confirm!");
                                                document.member_form.passwd_confirm.focus();
                                                return;
                                        }
 
                                        if(document.member_form.passwd.value != document.member_form.passwd_confirm.value)
                                        {
                                                alert("Passwords don't match. Please check again");
                                                document.member_form.passwd.focus();
                                                document.member_form.passwd.select();
                                                return;
                                        }
 
                                        document.member_form.submit();
                                }
 
                                function reset_form()
                                {
                                        document.member_form.id.value = "";
                                        document.memeber_form.name.value = "";
                                        document.member_form.passwd.value = "";
                                        document.memeber_form.passwd_confirm.value = "";
                                        document.member_form.phone1.value = "";
                                        document.memeber_form.phone2.value = "";
                                        document.member_form.phone3.value = "";
                                                                                document.member_form.address = "";
                                        document.member_for.id.focus();
 
                                        return;
                                }
                        </script>
 
                <link rel="sytlesheet" href="../style.css" type="text/css">
                </head>
                <!-- body tag-->
                
                <table border='0' cellspacing='0' cellpadding='0' width='766' align='center'>
                        <tr>
                                <td>
                                        <img src="img/member_title.gif">
                                </td>
                        </tr>
        
                        <tr>
                                <td background="img/bbs_bg.gif">
                                        <img src='img/blank.gif' border='0' width='1' height='2'>
                                </td>
                        </tr>
                </table>
        
                        <!--register_form_start-->
                <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'>
                                                                                        *ID:
                                                                                        </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='Check redundancy' onClinck='check_id()'>
                                                                                        </td>
                                                                                </tr>
        
                                                                                <tr>
                                                                                        <td bgcolor='#f7f7f7' align='right' style='padding-right:6'>
                                                                                        *Name:
                                                                                        </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'>
                                                                                        *Password:
                                                                                        </td>
 
                                                                                        <td bgcolor='#ffffff' style='padding-left:10'>
                                                                                                <input type='text' 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'>
                                                                                        *Password Check:
                                                                                        </td>
 
                                                                                        <td bgcolor='#ffffff' style='padding-left:10'>
                                                                                                <input type='text' size='10' class='m_box' maxlength='12' name='passwd_confirm'>
                                                                                        </td>
                                                                                </tr>
        
                                                                                <tr>
                                                                                        <td bgcolor='#f7f7f7' align='right' style='padding-right:6'>
                                                                                        Sex:
                                                                                        </td>
 
                                                                                        <td bgcolor='#ffffff' style='padding-left:10'>
                                                                                                <input type='radio' name='sex' value='M' checked>Man
                                                                                                <input type='radio' name='sex' value='W' checked>Woman
                                                                                        </td>
                                                                                </tr>
        
                                                                                <tr>
                                                                                        <td bgcolor='#f7f7f7' align='right' style='padding-right:6'>
                                                                                        PhoneNumber:
                                                                                        </td>
 
                                                                                        <td bgcolor='#ffffff' style='padding-left:10'>
                                                                                                <select class='input2' name='phone1'>
                                                                                                        <option>Choice</option>
                                                                                                        <option value='010'>010</option>
                                                                                                        <option value='011'>011</option>
                                                                                                </select>
                                                                                                - <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:10' rowspan='3'>
                                                                                        Address:
                                                                                        </td>
 
                                                                                        <td bgcolor='#ffffff' style='padding-left:10'>
                                                                                                <input type='text' size='50' class='m_box' name='address'>
                                                                                        </td>
                                                                                </tr>
                                                                        </table>
                                                                </td>
                                                        </tr>
                                                </table>
                                                        <!-- register_form_end-->
                                        </form>
                                </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>
                </table>
        </body>
</html>
Colored by Color Scripter
cs

check_id.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
$id = $_GET['id'];
if(!$id)
{
        echo "Input ID";
}
else
{
        include_once "../dbconn.php";
        $sql="select * from member where id='$id'";
        $result = mysql_query($sql, $connect);
        $num_record = mysql_num_rows($result);
        if($num_record)
        {
                echo "Duplicate ID";
                echo "To use another ID, please";
        }
        else
        {
                echo "Available ID.";
        }
        mysql_close();
}
?>
Colored by Color Scripter
cs

insert.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php
include_once "../dbconn.php";
$id = $_POST['id'];
$passwd = $_POST['passwd'];
$name = $_POST['name'];
$sex = $_POST['sex'];
$phone1 = $_POST['phone1'];
$phone2 = $_POST['phone2'];
$phone3 = $_POST['phone3'];
$address = $_POST['address'];
$sql = "select * from member where id='$id'";
$result = mysql_query($sql, $connect);
$exist_id = mysql_num_rows($result);
if($exist_id)
{
        echo "
        <script>
                window.alert(\"ID exists.\");
                history.go(-1);
        </script>
        ";
        exit;
}
$regist_day = date("Y-m-d (H:i)");
$ip = $_SERVER['REMOTE_ADDR'];
if($phone1 && $phone2 && $phone3)
{
        $tel = $phone1."-".$phone2."-".$phone3;
}
else
{
        $tel = "";
}
$sql = "INSERT INTO member(id, passwd, name, sex, tel, address) ";
$sql = $sql."values('$id', '$passwd', '$name', '$sex', '$tel', '$address')";
mysql_query($sql, $connect);
mysql_close();
Header("Location:login_form.html");
?>
Colored by Color Scripter
cs

post 방식으로 넘겨줄 때는 post로 받아와야 한다는 것과 global_register가 off인 경우에는 단순히 $id로만 받아올 수 없기 때문에 $_GET['id']나 $_POST['id']와 같은 방식으로 받아야 합니다.

그리고.... "."과 ","를 잘 보도록 합니다.. 이것 때문에 얼마나 시간을 버렸던가....

로그인

login_form.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
        <body>
                <link rel='stylesheet' href='../style.css' type='text/css'>
 
                <form method=post action=login.php>
                        <table align='center'>
                                <tr><td><img src="img/login.gif"></td></tr>
                                <tr height='1' bgcolor='#5ab2c8'><td></td></tr>
                                <tr><td></td></tr>
 
                                <tr>
                                        <td>
                                                <img src='img/star.gif'>ID&nbsp;&nbsp;&nbsp;
                                                <input type='text' name='id' size='10' maxlength='10'>
                                        </td>
                                </tr>
 
                                <tr>
                                        <td>
                                                <img src='img/star.gif'>PW
                                                <input type='text' name='passwd' size='10' maxlength='10'>
                                        </td>
                                </tr>
 
                                <tr height='1' bgcolor='#5ab2c8'><td></td></tr>
                                <tr><td></td></tr>
 
                                <tr>
                                        <td align='right'>
                                                <input type=image src='img/login_on.gif' border='0'>&nbsp;
                                                <a href='modify_memberinfo.php'>
                                                        <img src='img/member.gif' border='0'>
                                                </a>
                                        </td>
                                </tr>
                        </table>
                </form>
        </body>
</html>
Colored by Color Scripter
cs

login.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?php
$id = $_POST['id'];
$passwd = $_POST['passwd'];
if(!$id)
{
        echo "
                <script>
                        window.alert('Input Your ID');
                        history.go(-1);
                </script>
        ";
        exit;
}
if(!$passwd)
{
        echo"
                <script>
                        window.alert('Input Your PW');
                        history.go(-1);
                </script>
        ";
        exit;
}
include_once "../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('Unregistered ID');
                        history.go(-1);
                </script>
        ";
        exit;
}
else
{
        $row = mysql_fetch_array($result);
        $db_passwd = $row['passwd'];
        if($passwd != $db_passwd)
        {
                echo "
                        <script>
                                window.alert('Incorrect Password');
                                history.go(-1);
                        </script>
                ";
                exit;
        }
        else
        {
                session_start();
                $_SESSION['userid'] = $id;
                echo "
                        <script>
                                top.location.href='../index.php';
                        </script>
                ";
        }
}
?>
Colored by Color Scripter
cs

logoff.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
session_start();
unset($_SESSION['userid']);
unset($_SESSION['username']);
echo"
        <script>
                top.location.href='../index.php';
        </script>
";
?>
Colored by Color Scripter
cs

저작자표시 비영리 변경금지

'High Level Technique > Web Hacking' 카테고리의 다른 글

웹 페이지 구축 - 자유게시판 (0)	2016.11.10
웹 페이지 구축 - index, top (0)	2016.11.08
쿠키와 세션 (0)	2016.11.08
PHP MySQL 연동 (0)	2016.11.07
MySQL (0)	2016.11.07

k3y6reak's lab

웹 페이지 구축 - 회원가입, 로그인

'High Level Technique > Web Hacking' 카테고리의 다른 글

티스토리툴바

웹 페이지 구축 - 회원가입, 로그인

'High Level Technique > Web Hacking' 카테고리의 다른 글

'High Level Technique/Web Hacking' Related Articles

티스토리툴바