Login Page 만들기
학교 선배들의 말을 듣고 웹 프로그래밍에 관심을 가지게 되어 한 번 만들어 본 로그인 페이지.
생각보다 쉽지 않았다. 내 마음대로 되지 않는다는 것이 딱 이런건가보다.
웹 프로그래밍을 하려니 html, php, css는 물론이고 앞으로 배워야 할 javascript도 있고.
또 로그인시 데이터베이스로 쓸 mysql을 쓰자니 생각보다 복잡하다. 하지만 그래도 이 부분은 고등학교 때 심심치 않게 다뤄봐서 오랜만에 했어도 어렴풋이 기억은 났던 것 같다.
로그인 페이지를 만들 때 먼저, 우선 데이터를 기본적으로 주고 받을 틀을 만들었다.
아래의 코드는 내가 만든 html의 코드이다. 아직 미완성이라 css가 들어간 것도 있고 그렇지 않은 버튼도 있다.
이 부분에 대해서는 css를 더욱 공부해서 페이지를 예쁘게 꾸며볼 예정이다. 우선적으로 기능 구현부터..
[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
|
<!DOCTYPE html>
<html>
<head>
<title>DOHEE'S LOGIN PAGE"</title>
<style>
#login{
text-align:center;
}
.button {
width:50px;
background-color:#f8585b;
border:none;
color:#fff;
padding:10px 0;
text-align: center;
text-decoration: none;
display:inline-block;
font-size: 15px;
margin: 3px;
border-radius:10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="login">
<strong>
<h2>LOGIN</h2>
</strong>
<br>
ID :
<input type="text" name="username"><br>
Password:
<input type="password" name="password"><br>
<br>
<br>
<!-- <a href= "Join.hmtl">LOGIN</a>-->
<input type="submit" value="LOGIN">
<br>
<div class="button">
<!-- <input type="submit" value="LOGIN"><br/>-->
<!-- <button type = "button" onclick="location.href='Join.html'">JOIN</button> -->
</div>
</form>
<div style='line-height:20%'>
<h5>아직 회원이 아니시면</h5>
<h5>Join us!</h5>
</div>
</div>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
거의 처음배워본 터라 태그만 해서 글자만 나와도 신기했는데, 이렇게 검색해서 css으로 버튼에 색을 입히고 꾸며보니 감회가 새롭다. 웹이 눈에 바로 보여서 재밌다던데, 그 느낌을 알 것 같았다.
다음은 LOGIN 버튼을 누르면 동작하는 data.php에 관한 코드이다.
data.php에는 그 전에 db_info.php의 내용을 불러와 포함하는 코드가 있으므로 이 코드에 대해서도 같이 설명하겠다.
[db_info.php]
|
1
2
3
4
5
6
7
8
9
10
|
<?php
$host='localhost';
$user='ire4564';
$pw='qwer';
$db='ire4564';
$conn=mysqli_connect($host,$user,$pw,$db);
mysqli_set_charset($conn,'uft8');
?>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
이 코드는 미리 만들어둔 아이디와 패스워드의 정보를 담고 있는 table이다. 이 테이블에 정보를 가져오기 위해서 접속을 하는 역할을 하는 php 코드이다.
[data.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
|
<?php
include './db_info.php';
$query = "select * from Login";
$result = mysqli_query($conn,$query);
while($row=mysqli_fetch_array($result)){
$str=strcmp($row["id"],$_POST['username']);#문자열 비교
if(!$str){
echo $row["id"]."님 로그인 되셨습니다.<br>";
break;
}
}
$str=strcmp($row["id"],$_POST['username']);#문자열 비교
if($str){
echo "로그인 실패";
}
?>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
data.php는 연결을 성공했으면 id와 비밀번호 창에 입력된 값이 데이터베이스에 있는 값인지를 체크하여 맞으면 로그인 성공, 틀리면 실패를 반환해주는 코드이다. if문을 구현하는 것에 있어서는 기존에 배웠던 java, C와 크게 다르지 않아서 어렵지 않았으나 여기서도 문자열 비교를 위해 함수 strcmp를 쓰는 것은 미처 몰랐다. 그냥 if문으로 했더니 어쩐지 안되더라. php는 문법이나 작동이 안되면 아예 페이지가 뜨지 않으므로 하나씩 단계를 밟으면서 만들어 나가야 한다.
[오늘 배운 문법 정리]
1. 문자열 비교
strcmp($a, $b)를 써서 데이터베이스와 입력받은 문자열을 비교한다. 비교시 같으면 false를 반환하므로 (!$str)를 해주어야 이 코드에서는 일치하는 것을 뜻한다.
2. $_POST['username']
POST가 뭔가 했더니 찾아보니 html 메소드라고 한다. 이와 비슷한 것으로 GET이 있는데 이건 보안상 문제로 비슷하지만 잘 쓰이지 않는다고 한다. 이전의 php에서 가져오고 싶은 변수를 저렇게 표현하는 것 같다. 아직은 잘 이해가 가지는 않는다.
3. 변수 선언
변수 선언시 달러 표시인 $을 붙인다. 나는 뭘 자꾸 $를 쓰나 했더니 변수 선언이라고 해서 많은 코드가 이해가 가기 시작했다.
내일은 이어서 로그인 페이지를 완벽하게 구현하고 게시판을 구현해보겠다.
'Undergraduate Records' 카테고리의 다른 글
| [Baekjoon] for문 문제 (0) | 2019.07.08 |
|---|---|
| [Baekjoon] if문 알고리즘 문제 (0) | 2019.07.06 |
| [Algorithm]알고리즘 시간 복잡도 계산하기 (0) | 2019.07.06 |
| [Arduino] 초음파 센서 LED, 온도계 센서 온습도계 만들기 (0) | 2019.07.04 |
| Mysql/php 게시판 만들기 (0) | 2019.07.03 |
