웹 애플리케이션 만들기

로그인 기능 만들기

자바스크립트로 로그인 기능 구현하기 

 7.php

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <script>
    password = prompt("비밀번호");
    if(password == 1111) {
      document.write("안녕하세요. 주인님");
    } else {
      document.write("뉘신지?");
    }
  </script>
</body>
</html>

PHP로 로그인 기능 구현하기 

 8-1.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>

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>

 

소스코드

github

댓글

댓글 본문
작성자
비밀번호
  1. 좝좝
    궁금한 점이 있습니다~ 8-1.php 예제에서는
    <?php
    ?>
    << 이것이 왜 없어도 되는 건가요~?
  2. Awon
    오 완전 꿀팁!! 이해됐어요~~ 감사합니다!!!
    대화보기
    • 황성준
      확인했어요!
    • YJ_Lee
      기말 마치고 다시 시작하네요! 로그인 기능 엄청 신기해요! 감사합니다!
    • 이희태
      로그인기능까지 수강완료하였습니다
    • 강의 잘 봤습니다!
    • 최상호
      다시보기~~
    • 현상훈
      재밌어요!
    • 김규리
      비밀번호를 입력했는데 8-2로 안넘어가다가
      8-1파일의
      <form action="8-2.php">

      <form action = "8-2.php">
      이렇게 action이랑 = 이랑 "을 띄어쓰기 하니까 되네요..? 이건 왜 그런거죵...?
      이 이후에는 띄어쓰기를 없애도 돼요..
      뭘까요..?
    • 김혜령
      로그인 기능 진정 멋진데요?^^ ㅋㅋㅋ 좋은 강의 감사해요~~
    • 졸린 사슴
      지금 로그인 기능 막 구현했는데 재미쪙 ㅋㅋㅋㅋㅋㅋ
    • 황준상
      유익하네용 ㅎ
    • Alberto Jaejoong Lee
      제가 올린 질문에 답변 주셔서 일단 감사합니다.
      제 질문은 6월 14일자 라이브 방송 때 하시던 것을 따라 했습니다.
      그랬더니 저런 문제가 발생했고 그래서 제가 어디를 어떻게 잘 못 따라한 것인지 궁금하여
      질문을 남기게 되었습니다.
      아무튼 김찬호님 고맙습니다.
      대화보기
      • 강응택
        아이고 어렵다. echo 뒤에 ; 가 꼭 있어야되나 봐요. 지우면 errror 메세지가 뜨네요. ㅎ.
      • 김찬호
        코드를 보시면 8-1.php의 form에서 (line 7) submit 버튼을 눌러 input박스 안의 내용을(name="password") 8-2.php로 전달하고 있습니다. 8-2.php를, 8-1.php를 통하지 않고 직접 실행하게 되면 $_GET["password"]로 받아올 정보가 없기 때문에 에러가 발생하게 됩니다. 8-1.php의 input박스를 통해 패스워드를 입력하고 submit을 누르셔야 비밀번호가 8-2.php로 request를 날리고 올바로 실행되게 됩니다.
        대화보기
        • 김재훈
          작성하신게 맞게 잘 호출되네요~
          대화보기
          • 김정은
            감사합니다
          • 엘타냥
            음... 저도 이번 코딩야학으로 배우고 있는 같은 처지지만 이렇게 생각해봤습니다.

            이전 시간의 '변수' 강의에서 예시로 들었듯이, 지금은 정말 단순하게 비밀번호를 입력한다 → 참인지 거짓인지 확인한다 → 참이면 "환영합니다. 주인님." / 거짓이면 "뉘신지?"를 출력한다 정도로 끝나지만, 실제 로그인과 계정제를 이용 중인 홈페이지를 보면 로그인만 기능이 있는 것이 아니기 때문일 겁니다. 비밀번호 변경, 비밀번호 찾기, 그리고 실제 입력한 값이 DB에 저장되어 있는 비밀번호와 맞는가 등등. password 라는 변수로 정의된 값 하나가 앞으로 다양한 기능의 함수들과 물리게 될 것을 생각하면 변수로 정의를 해두는 편이 코드를 짜기도, 수정하기에도 훨씬 편할 것 같습니다.
            대화보기
            • 안근우
              강의 내용대로 따라하면서 하니
              더 빨리 이해되는거 같네요.
              감사합니다 ! ! 잘 봤습니다! !
            • Sujin Chun
              답변 감사드립니다!

              이용자의 편의성과 소스 코드의 가독성 등 좀 더 깔끔한 구성을 위해 password 변수를 추가한 거 군요
              감사합니다! 좋은 하루 보내세요 :)
              대화보기
              • Alberto Jaejoong Lee
                안녕하세요. 질문 입니다.
                14일 강의를 따라해 보았습니다.

                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="utf-8">
                </head>
                <body>
                <?php
                $password = $_GET["password"]; //해쉬, 단방향 암호화
                $password = hash('sha512', $password); //$password sha512방식으로 암호화 한다.
                $password = strtoupper($password); //$password의 값을 모두 대문자로 바꿔줘요.
                $enc_passwod = "33275A8AA48EA918BD53A9181AA975F15AB0D0645398F5918A006D08675C1CB27D5C645DBD084EEE56E675E25BA4019F2ECEA37CA9E2995B49FCB12C096A032E";
                if($password == $enc_passwod)
                {
                echo "안녕하세요. 주인님 !!"; //echo 사용자가 입력한 정보 중에 password의 값
                } else { //echo $_GET ["password"];
                echo "뉘신지?";
                }
                ?>
                </body>
                </html>

                이렇게
                그런데

                http://ideone.com/Mrufi7

                이런 문제가 생겼습니다.
                8번째 줄을 비교를 해보아도 도통 원인을 못 찾겠습니다.
                정답 좀 알려 주세요.
                감사합니다.
              • 치우천황
                php를 이용한 로그인을 새롭게 알게 되었네요..
                강의 잘 들었습니다.
              • 최창용
                감사합니다.
              • John
                로그인 기능 자바스크립트와 php에서 구현 하는 법을 배움. 나중에 더 배워야 완전히 이해 가능 할 것 같음.
              • 김준환
                로그인 기능 javascript, php 구현. 17.06.14
              • 거No
                꼭 필요한것이아니라 비밀번호기때문에 사용자가 입력한 비밀번호가 들어가게 하는 기능을 하기때문에 이해하기편해서 혹은 가독성을 위해서 password라는 변수를 추가한 것 같습니다. 실질적은 기능은 달라지지않으나 소스의
                구성측면에서 더 좋은거겠죠
                대화보기
                • Sujin Chun
                  오늘도 잘 듣고 갑니다! 그런데 자바로 로그인 기능을 구현할 때 password 가 꼭 들어가야되는 건가요?
                  password = prompt("비밀번호");
                  if(password == 1111) {
                  document.write("안녕하세요.주인님");
                  } else {
                  document.write("뉘신지?");
                  }
                  대신
                  prompt("비밀번호");
                  if(prompt == 1111) {
                  document.write("안녕하세요.주인님");
                  } else {
                  document.write("뉘신지?");
                  }
                  라고 구성해도 동일한 결과가 나오더라구요. 제가 이번 강의의 포인트를 못집고 있는 건지...
                  혹시 password가 왜 꼭 필요한 것인지 답변 주실 분 있으신가요? ㅠㅠ
                • 밧슈
                  잘 보았습니다.^^
                • 크롬에서는 제대로 동작하지만 익스플로러에서는 <input type="submit">이 "제출"이 아니라 "쿼리 전송"으로 뜨는군요. 게다가 "쿼리 전송"을 눌러도 8-2로 이동하지 않아요. 왜 익스플로러에서는 실행되지 않는 걸까요?
                • M_JJo
                  큰따옴표가 있으면 문자("1111"), 없으면 숫자(1111)를 의미 합니다.
                  다만, ==은 자료형까진 체크하지 않아서 1111이나 "1111"이나 같은 값으로 처리됩니다.
                  (자료형을 보고 싶으시다면 echo var_dump(1111);과 echo var_dump("1111");를 입력하셔서 비교해보시면 됩니다.)

                  만약 자료형까지 같을 경우를 원하시는거라면
                  if($password === "1111") 이런식으로 넣어서 확인해보세요.

                  ==와 ===의 차이는 아래와 같습니다.
                  == : a==b라고 했을 때, a와 b가 같은 값인지 판단
                  === : a===b라고 했을 때, a와 b가 같은 값과 같은 자료형인지 판단
                  대화보기
                  • Awon
                    잘 듣고 있습니다~~~ 한 가지 궁금한 것이 있습니다!
                    변수 지정하고 if 조건문에서 True or False 판별하게 하는 데에서요~ 문법상 우항에 꼭 큰 따옴표 해야하나용???
                    (강의 예제로 치면 $password == "1111" <- 이 부분)
                    그냥 (변수 == 1111) 해도 에러 없이 되긴 하던데요
                    컴퓨터가 컴파일 하면서 사용자가 " " 를 실수로 안한 줄 알고 코드를 자동으로 " " 있도록 바꿔서 에러가 안나는 것인지, 아니면 어차피 저 값들이 모두 숫자로 이루어져 있어서 문자/숫자 둘 다 되니까 된 것인지 알고싶습니다.
                  • 정종원
                    꿀잼입니당
                  • skekogo
                    잘 들었습니다!
                  • 백곰몬
                    간단한 로그인 개념 완료!
                  • qudwn
                    완료!
                  • Hoony Yong
                    재밌게 잘 보았습니다.^^
                  • Kuon
                    개념 자체는 이해가 가는데 막상 이걸 다시 짜라고 하면 헤맬거 같아요 ㅎㅎ
                  • 주인님 문구 보고 웃었네요. ㅋㅋ
                    비서 앱을 만들고 싶어졌습니다.
                  • 대붕이
                    후ㅜ~~어렵네요;;
                  • 강기중
                    저는 저 코드 그대로 입력한 상태에서 실행을 하면 8-2.php?password=1234 에서 ?=1234 가 안 나타나고,
                    에러 메세지가 8번째 줄에 password 가 정의되어 있지 않다고 나타납니다. 여러번 확인했는데 어떤 문제일까요?
                  • 배성원
                    PHP강의2개가 오류때문에 보이지 않습니다.
                  • dekhan52@gmail.com
                    잘 봤습니다.
                  • nnbetter
                    뭔가 프로그램 만드는 느낌 물씬 나서 좋아요
                    근데 내용은 쉬운 것 같은데 은근 기억이 안나요.....
                  • GIMYO
                    15. 웹에플리케이션 만들기 - JS, PHP 프로그래밍 9-2-1 : PHP 로그인 기능
                    * password 값이 무엇인지에 따라 true 또는 false 페이지가 다르게 표시
                    8-1(사용자입력페이지)php와 8-2(결과출력표시페잉지)php가 있으면
                    8-2php 내에 조건문이 있어야 함.
                    ① 실행순서 모델링
                    1) 8-1.php 페이지 ☞ form태그 안의 태그들은 html형식
                    <form class="" action="8-2.php" method="get">
                    <p>비밀번호를 입력해주세요.</p>
                    <input type="text" name="password">
                    ┗ 사용자가 입력하는 방식
                    <input type="submit">
                    ┗ submit버튼이 동작하면 form태그 내 action="8-2.php"로 넘어감.
                    ┗이 때, method="get"과 8-2.php 파일의 $_GET 방식이 일치해야 함.
                    ┗input에 사용자가 입력한 정보의 값과 name=“password” 값은 동일
                    </form>

                    2) 8-2.php 페이지
                    <?php
                    $PW = $_GET["password"];
                    ┗ 8-1.php에서 넘어온 name의 password 값을 GET 방식으로 받아서
                    $PW변수에 저장
                    if($PW=="1111"){echo "주인님 환영합니다";}
                    ┗ PW 값이 1111이면(true) 바로 뒤의 문구를
                    else {echo "뉘신지?";}
                    ┗ PW 값이 1111이 아니면(false) else 뒤의 문구를 결과창에 표시
                    ?>

                    ps. 확실히 이해가 어려운 부분일 수도 있겠네요. 처음하시는 분들 절망하지 마시고, 여러번 반복해서
                    보시면 이해하기 쉬우실거에요.
                  • sayboy1018
                    이번 강의 내용은 좀 어려운거같아서 몇번 다시 듣고 해봐야겠어요
                  • 엽이군
                    조금만 더 나아가자면..
                    8-1.php에서
                    <form action="8-2.php"> 부분을 <form action="8-2.php" method="post">로 바꾸고
                    8-2.php에서
                    $password = $_GET["password"]; 부분을 $password = $_POST["password"];로 바꿔서
                    테스트 해보시면 또 다른 결과를 보실 수 있으실겁니다.

                    이 부분에 대해 공부를 해 보실분들은 GET방식, POST방식 검색을 해보시면 자세한 설명들을 확인하실 수 있으실겁니다.
                  • Min Elena EunKyung
                    배운 내용 혼자 응용해서 &랑 else if 사용해서 id, 비밀번호 매칭이랑 여러 id와 비밀번호 매칭도 쉽게 만들었네요 ㅎㅎ
                    나중에 저 id와 비밀번호가 DB에 저장되어서 가져다 쓰는 개념이 되겠네요. 더 배울게 기대되네요.
                  • 재밌어요 ㅠㅜ 뭔가 프로그램 만드는 느낌 물씬
                  • 최명희
                    PHP로 로그인 기능 구현하기는 자바스크립트보다 더 어려워서 공부를 더 해야겠네요.
                    강의 감사합니다.
                  • 김진희 (Jinhee Kim)
                    PHP로 로그인기능구현하기는 조금... 어렵네요 ㅠ
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기