로그인 기능 만들기
개요
이번에는 javascript와 php를 사용하여 각각의 로그인 기능을 만들어볼 것입니다.
실습 1(javascript)
처음 실습은 javascript를 사용하여 로그인 기능을 구해볼 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
password = prompt("비밀번호");
if(password == 1111) {
document.write("로그인 되었습니다");
} else {
document.write("로그인이 실패하였습니다.");
}
</script>
</body>
</html>위의 코딩처럼 조건문을 사용하여 비밀번호가 맞는지 확인하게 되는데요 여기서 중요한 점은 prompt를 사용한다는 것입니다.
prompt는 입력창을 띄워 사용자가 숫자나 문자를 입력 가능하게 하는 기능입니다.
다음 비밀번호를 입력하여봅니다
password=prompt는 변수를 지정하여 입력한 값이 password에 값이 들어가며 조건문을 사용하여 비밀번호를 1111로 지정하였으며 입력값과 맞는지 확인합니다.
위의 사진처럼 로그인이 됩니다.
만일 입력값을 조건문의 값과 다르게 적는다면 실패하게 됩니다.
실습 2(PHP)
다음은 PHP를 사용하여 로그인 기능을 만들어볼 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="8-2.php">
<p>비밀번호를 입력해주세요.</p>
<input type="text" name="password">
<input type="submit">
</form>
</body>
</html>이번에는 화면에 비밀번호를 입력하 달라는 문구와 input type = text이라는 입력 가능한 텍스트 박스 기능을 사용하며 이름을 "password"라고 지정해줍니다. 그리고 input type = submit이라는 버튼을 만드는 기능을 사용할 것입니다.
이렇게 만들어진 창은 그저 껍데기일 뿐입니다 눌러도 아무런 기능이 없습니다.
아까의 코드 중에 form action="8-2.php"를 입력하였는데 이는 지정한 8-2.php로 이동하기 위해 사용됩니다.
다음 새로운 8-2.php를 만들어 봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<?php
$password = $_GET["password"];
if($password == "1111"){
echo "로그인 되었습니다";
} else {
echo "비밀번호가 맞지않습니다";
}
?>
</body>
</html>
위의 코드를 보면 8.php에서 데이터를 가져와 get을 사용하여 password를 가져옵니다 그곳에 javascript와 같이 조건문을 사용하여 password를 사용하여 비밀번호를 1111로 지정해줍니다
위의 사진처럼 입력값을 적어준 후 지정한 비밀번호와 입력한 비밀번호가 같을 시
로그인이 됩니다 근데 주소창에 password가 나오는데 이는 get방식을 사용하였기 때문입니다.
여기서 get방식이란 GET은 어떠한 정보를 가져와서 조회하기 위해서 사용되는 방식입니다.
또 정보를 가져오는 방법 중에 POST방식이 있습니다.
POST방식은 데이터를 서버로 제출하여 추가 또는 수정하기 위해서 데이터를 전송하는 방식입니다.
[ GET방식의 특징]
-
URL에 변수(데이터)를 포함시켜 요청한다.
-
데이터를 Header(헤더)에 포함하여 전송한다.
-
URL에 데이터가 노출되어 보안에 취약하다.
-
전송하는 길이에 제한이 있다.
[ POST방식의 특징 ]
-
URL에 변수(데이터)를 노출하지 않고 요청한다.
-
데이터를 Body(바디)에 포함시킨다.
-
URL에 데이터가 노출되지 않아서 기본 보안은 되어있다.
-
전송하는 길이에 제한이 없다.
아까의 만일 아까의 php로 만든 것을 post방식을 사용하면
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="8-2.php" method = "post">
<p>비밀번호를 입력해주세요.</p>
<input type="text" name="password">
<input type="submit">
</form>
</body>
</html>이렇게 method를 사용하여 post로 지정하고
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<?php
$password = $_POST["password"];
if($password == "1111"){
echo "로그인 되었습니다";
} else {
echo "비밀번호가 맞지않습니다";
}
?>
</body>
</html>위의 코딩처럼 get을 post로 지정하여주면
위의 사진처럼 뒤에 비밀번호가 가려집니다.
참고한 수업 링크