코딩야학#7. 로그인 기능 추가하기(JavaScript, PHP)
계정이 필요한 웹사이트에 접속하면 가장 먼저 하는 일이 로그인이다. 아이디와 비밀번호를 맞게 입력하면 특정 페이지에 접근할 수 있는 권한이 생긴다. 이번 코딩야학에서는 이 로그인 기능을 자바스크립트와 PHP로 간단하게 구현하는 방법을 알 수 있었다(링크).
1. 자바스크립트로 로그인 기능 구현하기
일단 결과를 보면 이렇다. 크롬 브라우저를 새로고침 하면 비밀번호 입력 창이 뜨고, 미리 설정해 둔 비밀번호(=123456)를 입력하면 '로그인 되었습니다.'라고 출력된다. 이때, 미리 설정해 둔 비밀번호와 다르게 입력하면 '비밀번호를 확인해주세요.'라고 출력된다. 이렇게 사용자의 입력 값을 전달받아 그에 반응해 특정 결과를 출력하는 기능은 HTML에서는 할 수 없고 자바스크립트나 PHP에서는 가능하다. 코드를 보면 아래와 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script> password = prompt("비밀번호"); if(password == 123456) { document.write("로그인 되었습니다."); } else { document.write("비밀번호를 확인해주세요."); } </script> </body> </html> | cs |
사용자가 입력한 비밀번호가 일치하는지 아닌지를 판단하는 것은 조건문을 활용한다. prompt("비밀번호")를 통해 팝업창을 띄워 비밀번호 입력 값을 받고 그 값을 password에 할당, 입력 값이 미리 설정해둔 비밀번호 password == 123456와 일치하면 "로그인 되었습니다."를 출력, 그렇지 않으면 "비밀번호를 확인해주세요."를 출력하는 코드이다.
2. PHP로 로그인 기능 구현하기
자바스크립트와 문법이 조금 다를 뿐 구현되는 방식은 똑같다. 이번에는 잘못된 비밀번호를 입력해보았다. 설정해 둔 비밀번호(=123456)와 일치하지 않으므로 '비밀번호를 확인해주세요.'라고 출력이 된다. 코드를 확인해보면 아래와 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!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> | cs |
비밀번호를 입력받는 페이지의 코드이다. <form></form> 태그를 통해 비밀번호를 입력 받을 수 있는 페이지를 작성했다. 이 코드만으로는 위 결과 스크린샷과 같은 기능을 구현하기는 어렵고, PHP 조건문 기능을 추가해야한다. 비밀번호를 입력하고 제출을 누르면 "8-2.php" 파일로 넘어가도록 되어있다. "8-2.php" 파일은 아래와 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <?php $password = $_GET["password"]; if($password == "123456"){ echo "로그인 되었습니다."; } else { echo "비밀번호를 확인해주세요."; } ?> </body> </html> | cs |
결국에는 자바스크립트 코드 구조와 거의 같다고 보면된다. 미리 설정해 둔 비밀번호 $password == "123456"와 일치하지 않아 else 이하의 텍스트가 출력되었다.
지금까지 그래왔듯이, 아주 단순하지만 이것은 결국 모든 로그인 기능들의 기본이다. 사용자의 비밀번호 입력 값을 받아 그 값이 일치하면 로그인 되어 그 이후의 허용된 웹페이지들을 열어볼 수 있고, 일치하지 않으면 로그인에 실패하고 더이상의 페이지들을 볼 수가 없다. 매일 하루에도 몇 번씩 하는 로그인의 실제 작동방식을 알게 되어 새로웠다. 끝...
