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>"
?>
|
다음에는 회원가입하는 코드를 짜보도록 하겠습니다.
'WAMP > php' 카테고리의 다른 글
| wamp [회원 정보 수정] 기능만들기 (0) | 2019.05.30 |
|---|---|
| wamp [회원정보 아이디/비번 찾기] 만들기 (0) | 2019.05.30 |
| 게시판 만들기 3. 본인 글 수정/삭제 하기 (0) | 2019.05.28 |
| 게시판 만들기 2. 게시글 읽기/쓰기 (0) | 2019.05.28 |
| wamp 간단한 회원가입 기능 (feat. Ajax) (0) | 2019.05.24 |