[웹 화면]

[find.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
<!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <!-- jQuery 사용 명시 -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <head>
        <title>계정 찾기 페이지</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/test/css/login.css">
        <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script" rel="stylesheet">
    </head>
    <style>
    #id_form{
        font-size: 1.3em;
        width: 50%;
        display: inline-block;
    }
    #pwd_form{
        font-size: 1.3em;
        width: 50%;
        display: inline-block;
    }
    </style>
    <script>
        function mysubmit(index){
            
            <!--아이디 찾기-->
            if(index == 1){
 
                <!--이름을 입력하지 않았다면-->
                if($('#name').val()==""){
 
                    alert("이름을 입력하세요.");
 
                <!--전화번호를 입력하지 않았다면-->
                }else if($('#phone1').val()==""){
 
                    alert("전화번호를 입력하세요.");
                }
 
                <!--서버로 폼 데이터 보내기-->>
                $('#id_form').submit();
 
            <!--비번 찾기-->
            }else if(index ==2){
 
                if($('#id').val()==""){
 
                    alert("아이디를 입력하세요.");
 
                }else if($('#phone2').val()==""){
 
                    alert("전화번호를 입력하세요.");
                }
 
                $('#pwd_form').submit(); 
 
            }
        }
    </script>
    <body>
        <div id="loginer">
            <form id = "id_form" action="/test/FindAccount/FindLook" method="POST">
                <fieldset>
                    <legend>Find Your ID</legend>
                    이름 : <input type="text" id ="name" name ="data" placeholder="Enter Your Name">
                    <br>
                    전화번호: <input type="text" id ="phone1" name ="phone" placeholder="Enter Your phone">
                    <br><br>
                    <input type="hidden" value="0" name = "check"><!--서버에서 아이디 찾기인지 비번찾기 인지 구별하기 위한 속성-->
                    <input type="button" value="아이디 찾기!" onclick="mysubmit(1)">
                    <br>
                </fieldset>
            </form>
            <form id = "pwd_form" action="/test/FindAccount/FindLook" method="POST">
                <fieldset>
                    <legend>Find Your Password</legend>
                    아이디 : <input type="text" id ="id" name ="data" placeholder="Enter Your ID">
                    <br>
                    전화번호: <input type="text" id ="phone2"  name ="phone" placeholder="Enter Your phone">
                    <br><br>
                    <input type="hidden" value="1" name = "check">
                    <input type="button" value="비밀번호 찾기!" onclick="mysubmit(2)">
                    <br>
                </fieldset>
            </form>
        </div>
    </body>
</html>
 
 

 

[FindLook.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
<?php
    include "../connect_db.php";
 
    // find.html에서 넘어온 데이터 받기
    $value=$_POST['data'];
    $phone=$_POST['phone'];
    $i=$_POST['check'];
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>계정 찾기</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel ="stylesheet" href="/test/css/bootstrap.css">
        <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script" rel="stylesheet">
    </head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/test/js/bootstrap.js"></script>
    <body>
        <?php
            // 아이디 찾기
            if($i == 0){
                $sql = "select userID from member where userNAME ='$value' and userPHONE = '$phone'";
                $result = $db->query($sql);
 
                if($result->num_rows==1){
                    $row=$result->fetch_array(MYSQLI_ASSOC);
                    echo "찾고자 하는 아이디는...",$row['userID'],"입니다.";
                }else{
                    echo "이름 또는 전화번호를 잘못 입력하였습니다.";
                }
            // 비밀번호 찾기
            }else if($i == 1){
                $sql = "select userPWD from member where userID ='$value' and userPHONE = '$phone'";
                $result = $db->query($sql);
 
                if($result->num_rows==1){
                    $row=$result->fetch_array(MYSQLI_ASSOC);
                    echo "찾고자 하는 비밀번호는...",$row['userPWD'],"입니다.";
                }else{
                    echo "아이디 또는 전화번호를 잘못 입력하였습니다.";
                }
            }
        ?>
    </body>
</html>
 

실행화면

 

수정

[update_write.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
75
76
<?php
    session_start();    //session 가져오기
    //session에 데이터가 없다면 로그인 화면으로 GO
    if (!isset($_SESSION['userID'])) {
        header('Location : http://wamp서버ip주소:80/test/login/login');
    }
 
    $idx = $_GET['idx'];
?>
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="/test/js/bootstrap.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>글 수정하기</title>
        <link rel ="stylesheet" href="/test/css/bootstrap.css">
    </head>
    <!--php에서 html로 변수 가져오는 방법-->
    <input type ="hidden" id = "index1" value="<?=$idx?>">
    <script>
        $(document).ready(function(){
            $('#form_data').submit(function(e){
                e.preventDefault();
                $.ajax({
                    type : 'POST',
                    url : 'http://wamp서버ip주소:80/test/notice_board/update',
                    // serialize()뒤에 데이터 붙이는 방법
                    data : $(this).serialize() + "&index="+$('#index1').val(),
                    success : function(result){
                        if(result=="success"){
                            alert("글 수정 성공");
                            location.replace('http://wamp서버ip주소:80/test/main')
                        }else if(result=="Fail:save"){
                            alert("글 수정 실패...다시 시도 해주세요.");
                        }else if(result=="Fail:title"){
                            alert("제목이 없습니다. 제목을 입력하세요.");
                        }else if(result=="Fail:contents"){
                            alert("글 내용이 없습니다. 글 내용을 입력하세요.");
                        }
                    },
                    error : function(xtr,status,error){
                    alert(xtr +":"+status+":"+error);
                    }
                });
            });
        });
    </script>
    <body>
        <div class ="container">
            <form id ="form_data" method ="POST">
                <table class ="table table-bordered">
                    <thead>
                        <caption>글 수정하기</caption>
                    </thead>
                    <tbody>
                        <tr>
                            <th>제목 : </th>
                            <td><input type ="text" name = "title" id = "title" class="form-control" placeholder = "Enter your Title"></td>
                        </tr>
                        <tr>    
                            <th>작성자 : </th>
                            <td><?php echo $_SESSION['userNAME'];?></td>
                        </tr>
                        <tr>
                            <th>내용 : </th>
                            <td><textarea cols="10" name = "contents" id = "contents" class="form-control" placeholder = "Enter your Contents"></textarea></td>
                        </tr>
                    </tbody>
                </table>  
                <input type = "submit" class="btn btn-outline-primary" value = "저장하기">
            </form>
        </div>
    </body>
</html>
 
 

[update.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
<?php
    include "../connect_db.php";
 
    session_start();
 
    $title = $_POST['title'];
    $contents = $_POST['contents'];
    $name = $_SESSION['userNAME'];
    $index = $_POST['index'];
 
    // 제목하고 글 내용이 비어있는지 확인 후 insert 쿼리 실행
    if($title == NULL){
        echo "Fail:title";
    }else if($contents == NULL){
        echo "Fail:contents";
    }else{
        $datetime = date_create()->format('Y-m-d H:i:s');
        $sql = "UPDATE board SET title = '$title', contents = '$contents' WHERE idx ='$index'";
 
        $result = $db->query($sql);
        if($result){
            echo "success";
        }else{
            echo "Fail:save";
        }
    }
?>
 
 

글 번호 19번 / 제목 게시판 만들기 테스트

글 번호 19번 / 제목 게시판 만들기 테스트 ---------> 수정하기 테스트로 바뀜

데이터베이스 확인


삭제

[delete.php]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
    include "../connect_db.php";
    
    session_start();
 
    //read.php에서 삭제하고자 하는 글 번호 받기
    $index = $_POST['idx'];
 
    //삭제 쿼리 문 실행
    $sql = "DELETE FROM board WHERE idx ='$index'";
    $result = $db->query($sql);
 
    // 성공,실패 리턴
    if($result){
        echo "success";
    }else{
        echo "Fail:delete";
    }
?>
 

글 삭제 후 main 페이지로 이동됨

데이터베이스에서 19번 글이 사라진걸 확인 할 수 있다.

[main]화면에서 18번 글 의 조회수는 1

제목을 클릭하면 해당 글 읽기 가 되고 조회수가 올라간다.

글 쓰기 버튼을 누르면 글쓰기 화면으로 전환된다.

우선 읽기부터....


[read.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<?php
    include "../connect_db.php";
 
    session_start();    //session 가져오기
    //session에 데이터가 없다면 로그인 화면으로 GO
    if (!isset($_SESSION['userID'])) {
        header('Location : http://wamp서버ip주소:80/test/login/login');
    }
 
    // main.php에서 넘어온 글 번호 값
    $index=$_GET['idx'];
    
    // 조회 수 증가
    $increase_sql = "UPDATE board SET views = views+1 WHERE idx ='$index'";
    $increase_result = $db->query($increase_sql);
 
    // 해당 글을 읽어오기 위한 쿼리문..
    $sql = "SELECT * FROM board WHERE idx='$index'";
    $result = $db->query($sql);
    $data = $result->fetch_array(MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="/test/js/bootstrap.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>글 읽기</title>
        <link rel ="stylesheet" href="/test/css/bootstrap.css">
    </head>
    <!--php의 변수 html로 가져오기-->
    <input type="hidden" id="d1" value="<?=$index?>">
    <!--삭제를 위한 스크립트-->
    <script>
        $(document).ready(function(){
            //삭제 버튼 클릭시
            $('#delete_btn').click(function(){
                $.ajax({
                    type : 'POST',
                    url : 'http://192.168.0.2:80/test/notice_board/delete',
                    data : {
                        idx : $("#d1").val()
                    },
                    success : function(result){
                        if(result=="success"){
                            alert("글 삭제 성공");
                            location.replace('http://wamp서버ip주소:80/test/main');
                        }else if(result=="Fail:delete"){
                            alert("글 삭제 실패...다시 시도 해주세요.");
                        }
                    },
                    error : function(xtr,status,error){
                        alert(xtr +":"+status+":"+error);
                    }
                });
            });
        });
    </script>
    <body>
        <div class ="container">
            <table class ="table table-bordered">
                <thead>
                    <caption>글 읽기</caption>
                </thead>
                <tbody>
                    <tr>
                        <th>제목 : </th>
                        <td><?php echo $data['title'];?></td>
                    </tr>
                    <tr>
                        <th>작성 일자 : </th>
                        <td><?php echo $data['date'];?></td>
                    </tr>
                    <tr>
                        <th>조회수 : </th>
                        <td><?php echo $data['views'];?></td>
                    </tr>
                    <tr>    
                        <th>작성자 : </th>
                        <td><?php echo $data['author'];?></td>
                    </tr>
                    <tr>
                        <th>내용 : </th>
                        <td><?php echo $data['contents'];?></td>
                    </tr>
                </tbody>
            </table>
            <!--본인이 작성한 글이라면 수정,삭제 버튼 보이기-->
            <?php
                if($_SESSION['userNAME']==$data['author']){
            ?>
                    <a class="btn btn-outline-primary" id ="update_btn" href ="/test/notice_board/update_write?idx=<?php echo $index;?>">수정하기</a>
                    <input type ="button" class="btn btn-outline-primary" id ="delete_btn" value="삭제하기">
            <?php } ?>
        </div>
    </body>
</html>
 

실행 화면(본인이 쓴 글이 아닌 경우) - 수정,삭제 버튼 안보임

조회수가 1증가된 2가 됨...

실행 화면(본인이 쓴 글 일 경우) - 수정,삭제 버튼 보임 


글 쓰기

[write.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
<?php
    session_start();    //session 가져오기
    //session에 데이터가 없다면 로그인 화면으로 GO
    if (!isset($_SESSION['userID'])) {
        header('Location : http://wamp서버ip주소:80/test/login/login');
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="/test/js/bootstrap.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>글쓰기</title>
        <link rel ="stylesheet" href="/test/css/bootstrap.css">
    </head>
    <script>
        $(document).ready(function(){
            $('#form_data').submit(function(e){
                e.preventDefault();
                $.ajax({
                    type : 'POST',
                    url : 'http://wamp서버ip주소:80/test/notice_board/insert',
                    data : $(this).serialize(),
                    success : function(result){
                        if(result=="success"){
                        alert("글 쓰기 저장 성공");
                        location.replace('http://wamp서버ip주소:80/test/main')
                        }else if(result=="Fail:save"){
                            alert("글 쓰기 저장 실패...다시 시도 해주세요.");
                        }else if(result=="Fail:title"){
                            alert("제목이 없습니다. 제목을 입력하세요.");
                        }else if(result=="Fail:contents"){
                            alert("글 내용이 없습니다. 글 내용을 입력하세요.");
                        }
                    },
                    error : function(xtr,status,error){
                    alert(xtr +":"+status+":"+error);
                    }
                });
            });
        });
    </script>
    <body>
        <div class ="container">
            <form id ="form_data" method ="POST">
                <table class ="table table-bordered">
                    <thead>
                        <caption>글 쓰기</caption>
                    </thead>
                    <tbody>
                        <tr>
                            <th>제목 : </th>
                            <td><input type ="text" name = "title" id = "title" class="form-control" placeholder = "Enter your Title"></td>
                        </tr>
                        <tr>    
                            <th>작성자 : </th>
                            <td><?php echo $_SESSION['userNAME'];?></td>
                        </tr>
                        <tr>
                            <th>내용 : </th>
                            <td><textarea cols="10" name = "contents" id = "contents" class="form-control" placeholder = "Enter your Contents"></textarea></td>
                        </tr>
                    </tbody>
                </table>  
                <input type = "submit" class="btn btn-outline-primary" value = "저장하기">
            </form>
        </div>
    </body>
</html>
 
 

[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
<?php
    include "../connect_db.php";
 
    session_start();
 
    $title = $_POST['title'];
    $contents = $_POST['contents'];
    $name = $_SESSION['userNAME'];
 
    // 제목하고 글 내용이 비어있는지 확인 후 insert 쿼리 실행
    if($title == NULL){
        echo "Fail:title";
    }else if($contents == NULL){
        echo "Fail:contents";
    }else{
        $datetime = date_create()->format('Y-m-d H:i:s');
        $sql = "INSERT INTO board VALUES (NULL,'$title','$name','$contents','$datetime',0)";
 
        $result = $db->query($sql);
        if($result){
            echo "success";
        }else{
            echo "Fail:save";
        }
    }
?>
 

실행 화면 

저장하기 버튼 클릭!!

글이 추가된 화면

데이터베이스 확인

로그인 기능에 이어 회원가입 기능을 추가 해봅니다.

 

로그인 페이지에서 회원가입 페이지로 넘어가면..아래와 같은 화면이 출력...

위 화면의 html은

[signup.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
<script type="text/javascript">
    //jQuery 문법
    $(document).ready(function(){    
        $('#box2').submit(function(e){
            e.preventDefault();
            //Ajax 문법
            $.ajax({
                type : 'POST',
                url : 'http://ip주소:80/php/join',
                data : $(this).serialize(),
                success : function(result){
                    if(result=="IDcheck"){
                        alert("입력하신 아이디가 이미 존재 합니다. 다른 아이디로 입력하세요.");
                    }else if(result=="Success save"){
                        alert("회원 가입을 축하합니다. 로그인을 해주세요.");
                        location.replace('http://192.168.0.2:80/php/login')
                    }else if(result=="Fail save"){
                        alert("회원 가입에 실패 했습니다. 다시 시도해 주세요.");
                    }else if(result=="Empty ID"){
                        alert("아이디를 입력하지 않았습니다. 아이디를 입력하세요.");
                    }else if(result=="Empty PWD"){
                        alert("비밀번호를 입력하지 않았습니다. 비밀번호를 입력하세요.");
                    }else if(result=="Empty NAME"){
                        alert("이름을 입력하지 않았습니다. 이름을 입력하세요.");
                    }else if(result=="Empty PHONE"){
                        alert("전화번호를 입력하지 않았습니다. 전화번호를 입력하세요.");
                    }
                },
                error : function(xtr,status,error){
                    alert(xtr +":"+status+":"+error);
                }
            });
        });
    });
    </script>
    <body>
        <div id = "box1">
            <form id = "box2" method="POST">
                <fieldset >
                <legend>입력 사항</legent>
                    <table>
                    <tr>
                        <td>아이디</td>
                        <td><input type ="text" name = "UID" placeholder="Enter Your Email"></td>
                    </tr>
                    <tr>
                        <td>비밀번호</td>
                        <td><input type ="text" name = "UPWD" placeholder="Enter Your Password"></td>
                    </tr>
                    <tr>
                        <td>이름</td>
                        <td><input type ="text" name = "UNAME" placeholder="Enter Your Name"></td>
                    </tr>
                    <tr>
                        <td>전화번호</td>
                        <td><input type ="text" name = "UPHONE" placeholder="Enter Your Phone"></td>
                    </tr>
                    </table>
                    <input type ="submit" value="가입하기">
                </fieldset>
            </form>
        </div>
    </body>
 
 

 

[join.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
<?php
 
//signup.html form에서 POST로 보내온 회원 정보
$ID = $_POST['UID'];
$PWD = $_POST['UPWD'];
$NAME = $_POST['UNAME'];
$PHONE = $_POST['UPHONE'];
 
//MYSQL 접속 정보
$db = mysqli_connect("127.0.0.1:3306","DB사용자","DB비번","DB");
if(!$db){
    die("Error ".mysqli_connect_error());
}
 
//입력 항목 중 빈공간으로 입력 할 경우 체크
if($ID == NULL){
    echo "Empty ID";
}else if($PWD == NULL){
    echo "Empty PWD";
}else if($NAME == NULL){
    echo "Empty NAME";
}else if($PHONE == NULL){
    echo "Empty PHONE";
}else{
    //회원 가입하고자 하는 아이디가 이미 존재하는지 확인
    $compare_sql = "SELECT userID FROM member WHERE userID = '$ID'";
    $compare_result = $db->query($compare_sql);
 
    //DB에서 가져온 결과값이 1개 이상이고, 그 결과값이 입력한 ID와 같다면 DB에 존재하므로 다른 아이디로 시도...매세지 출력
    if($compare_result->num_rows == 1){
 
        //DB에서 가져온 결과값을 행렬로 변환 하여 DATA 접근
        $row=$compare_result->fetch_array(MYSQLI_ASSOC);
        if($row['userID']==$ID){
            echo "IDcheck";
        }
    }else{  //DB에 입력한 아이디와 동일한 아이디가 없다면 DB에 저장
        $sql = "INSERT INTO member (userID, userPWD ,userNAME, userPHONE) VALUES ('$ID','$PWD','$NAME','$PHONE')";
        $result = $db->query($sql);
 
        //저장 되었다면 성공, 아님 실패
        if($result){
            echo "Success save";
        }else{
            echo "Fail save";
        }
    }
}
 
mysqli_close($db);
?>
 

 

WAMP 란?

Windows Apache Mysql Php 의 약자이며, mysql과 php를 내장한 윈도우에서 돌아가는 웹 서버이다.

 

wamp를 이용하여 login 기능을 한번 짜보자.

들어가기에 앞서 session의 개념을 알지 못한다면 그것부터 공부 하는것이 순서입니다.

 

아~ 그리고 필자는 비동기 방식으로 하고 싶어서 Ajax를 한번 이용해 보겠습니다.

 

우선 mysql

[mysql]

 

[login.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
<!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <!-- jQuery 사용 명시 -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <head>
        <title>로그인 페이지</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="login.css">
 
        <!-- 구글 웹 폰트 -->
        <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script" rel="stylesheet">
        <style>
            body
            {
                font-family: 'Nanum Brush Script', cursive;
            }
        </style>
    </head>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#form_data').submit(function(e){
            e.preventDefault();
            $.ajax({
                type : 'POST',
                url : 'http://IP주소:80/php/login_check',
                data : $(this).serialize(),
                success : function(result){
                    if(result=="success"){
                        alert("로그인 성공");
                        location.replace('http://IP주소:80/php/main')
                    }else if(result=="Fail:session"){
                        alert("세션 저장 실패...다시 시도 해주세요.");
                    }else if(result=="Fail:password"){
                        alert("비밀번호가 틀렸습니다. 다시 시도 해주세요.");
                    }else if(result=="Fail:empty"){
                        alert("회원 정보가 없습니다. 회원가입을 해주세요.");
                    }
                },
                error : function(xtr,status,error){
                    alert(xtr +":"+status+":"+error);
                }
            });
        });
    });
    </script>
    <body>
        <div id="loginer">
            <div id="form">
                <form id="form_data" method ="POST">
                    <fieldset>
                    <legend>LOGIN !</legend>
                    <input type="text" name="UID" id="UID" placeholder="Enter Your Email">
                    <br><br>
                    <input type="password" name="UPWD" id="UPWD" placeholder="Enter Your Password">
                    <br><br>
                    <input type="submit" value="login!" id="login_button">
                    <br><br>
                    You Don't Have Your Account?<a href="signup.html">
                    </fieldset>
                </form>
            </div>
        </div>
    </body>
</html>
 

 

[login.css]

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
#loginer
{
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #bcbcbc;
  text-align: center;
}
#form
{
  font-size: 1.3em;
  width: 50%;
  display: inline-block;
}
::placeholder
{
  font-size: 1.3em;
  font-family: 'Nanum Brush Script', cursive;
}
button
{
  border: 0px;
  background-color: white;
}
#signupimg
{
  font-size: 1em !important;
}
 
 

 

[login_check.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
<?php
//session에 저장된 data 가져오기
session_start();
 
//login.html에서 post방식으로 전달한 아이디,비번 받기 
$ID=$_POST['UID'];
$PWD=$_POST['UPWD'];
 
//phpmyadmin db에 접속
$db = mysqli_connect("127.0.0.1:3306","DB사용자","DB비번","DB명");
if(!$db){ //db에 접속이 안되면 에러 알림... 
    die("Error ".mysqli_connect_error());
}
 
#db에 접속 성공시--------------------------------------------------------------
//Query문
$sql = "SELECT userID,userPWD FROM member where userID = '$ID'";
 
//Query문 결과 result변수에 저장
$result = $db->query($sql);
 
//Query문 결과로 가져온 값이 한 줄이라도 있다면 true, 아니면 false
if($result->num_rows==1){
 
    //가져온 data를 행열로 바꾸어줌, table의 컬럼명으로 data에 접근하는것을 쉽게 하기위해서...
    $row=$result->fetch_array(MYSQLI_ASSOC);
    
    //login.html에서 입력한 비번과 db에 들어있는 비번이 같은지 비교
    if($row['userPWD']==$PWD){
        
        //같다면 아이디를 session에 저장
        $_SESSION['userID']=$ID;
        
        //성공적으로 저장 했다면 main으로 이동, 저장 실패면 login화면으로 다시 이동
        if(isset($_SESSION['userID'])){
            //성공
            echo "success";
        }else{
            //실패 : session저장 실패
            echo "Fail:session";
        }
    }else{
        //실패 : 비번이 같지 않음
        echo "Fail:password";
    }
}else{
    //실패 : db에 아이디 존재하지 않음
    echo "Fail:empty";
}
mysqli_close($db);
?>
 

 

[logout.php]

1
2
3
4
5
6
7
<?php
session_start();
$res=session_destroy();
if($res){
    header('Location: http://IP주소:80/php/login');
}
?>
 

 

[main.php]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<meta charset ="utf-8"/>
<?php
session_start();    //session 가져오기
 
//session에 데이터가 없다면 로그인 화면으로 GO
if (!isset($_SESSION['userID'])) {
    header('Location : http://IP주소:80/php/login');
}
 
echo "<h1>로그인 성공</h1><br>";
echo "<a href=logout.php>로그아웃</a>"
 
?>
 
 

 

다음에는 회원가입하는 코드를 짜보도록 하겠습니다.

+ Recent posts