웹 애플리케이션 만들기

로그인 기능 만들기

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

 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. harris
    2016.12.01 1512 완료
  2. 김수환
    도움이 많이되었습니다. 웹개발자가 될때까지 화이팅!
  3. 박현민
    ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
    대화보기
    • 행머
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      </head>
      <body>
      <script>
      password = prompt("비밀번호");
      if(password == 1111) {
      document.write("안녕하세요, 주인님.");
      } else {
      document.write("뉘신지?");
      }
      </script>
      </body>
      </html>


      첫 번째에 비밀번호 1111 입력해서 '안녕하세요, 주인님.' 이라고 브라우저에 뜬 후,

      다시 로그인을 시도하려고 새로고침을 하면,

      로그인창이 뜨지만 브라우저에 이전 로그인 결과인 '안녕하세요 주인님'이 남아있습니다.

      강의상의 실행에서는 새로고침하면 아예 백지상태로 없어지던데..

      저는 왜 이전 결과가 브라우저에 남을까요?
    • Bogwang Jung
      11.13 완료
    • 완료
    • 김동혁
    • 활화산
      몸에 익어야 감이 오는 내용들이 시작되는 것 같네요. 지진이 좀씩 나기 시작
    • San Koh
      2016. 10. 25. 완료했습니다.
    • Shinkyu Lee
      한 참 딴짓하고 돌아 왔더니 ....
      깃발을 놓쳤읍니다. 어디서부터 따라 가야 하는지 .....
    • 수강완료
      감사합니다
    • 데브시
      웹 공부하느라 생활코딩 곳곳마다 쏘다니며 이것저것 배우고 있는데 참 멋진 사이트임을 계속 깨닫네요~ 감사합니다.
    • Gayong Sim
      자바스크립트로 만드는건 이해가 잘 됐는데, 오히려 보충을 위해 php 넣어주신 부분이 더 어렵네요 ㅠㅠ
      이제 정신차리고 봐야겠다..
    • Gayong Sim
      2016. 10. 18. 완료
    • smexshin@gmail.com
      아래와 같이 비밀번호를 0으로 시작해서 네자리를 만드니까 정확히 입력해도 자꾸 거짓이라고 뜹니다.
      0100 이 아닌 0000 으로 하면 또 되는데 뭐가 문제일까요...?
      (또 0900 넣으면 참으로 나오는데. 0300 넣으면 참이라고 안나와요..)

      <script charset="UTF-8">
      password = prompt ("password")
      if (password == 0100)
      {document.write ("Welcome SMEX");}
      else
      {document.write ("Opps! it's wrong");}
      </script>
    • 종느미
      localhost/phpjs/8-1.php/
      에서 비밀번호 입력하고 제출하면

      localhost/phpjs/8-2.php?password=1111 로 이동하는 것이 아니라
      localhost/phpjs/8-1.php/8-2.php?password=1111 로 이동되서 창 변환이 없어요..ㅠㅠ

      8-1.php에서 <form action = "8-2.php"> 로 맞게 했는데 왜그런거죠 ?ㅠㅠ
    • html어려워
      드디어 비번 추가하고, 비번이 맞아야 리다이렉트되게 만들었네옄ㅋㅋㅋㅋㅋㅋ
      하ㅠ 언제쯤 수업 마칠라나....
      (데헷)

      p.s. 어디로 이동되는지 모르게 할려면 사이트를 여러개로 나눠야 하네여ㅠ
      (귀찮다 ㅇㅅㅇ)
    • v
    • 최현승
      161004완료
    • 이성진
      수강 완료!
      좋은 강의 항상 감사 드립니다~
    • 최실장
      16/10/1 수강완료
    • DECIMO
      2016.09.27 감사합니다.
    • 저는그냥 수업만 듣고 있는데 다른 분들은 이것저것 응용을 많이 하시고 있군요. 하나 하나 알게 되는 것에 감사 드리고 이런 프로그램을 운영해 주셔서 너무 감사 드립니다.
    • 이수재
      수강완료 09/21
    • 2016/09/17 완료
    • 임지호
      둘다맞은경우 id만 맞은경우 비밀번호만 맞은경우 둘다 틀린경우
      총 4가지 경우가 조건문 돌려봤는데 다되네요
      이런맛에 프로그래밍 배우는군요ㅎㅎ
    • Kim Hyeon-seok
      완료
    • Jaehyun Han
      감사합니다!!
    • 형진
      완료 2016.8.20
    • html어려워
      글고 댓글창에다 META HTTP-EQUIV="refresh" CONTENT="0; url=http://www.naver.com" 명령어를 쓰면 페이지 읽다가 리다이렉트 되는 경우도 있다던데 사실인가여?
    • html어려워
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>
      로그인
      </title>
      </head>
      <body>
      <script>
      password = prompt("비밀번호");
      if(password == 1111) {
      document.write("안녕하세요. 주인님");
      location.href = "http://www.naver.com";
      } else {
      document.write("뉘신지?");
      }
      </script>
      </body>
      </html>

      여기서 location.href에 정지를 2초동안 주고 싶은데요,
      자바스크립트에는 일시정지 명령어가 없나요?
    • 제리피
      2016.08.17 완료
    • 공돌이
      고슈진 사마라니//강사님의 사심이?!
    • GunLoc
      입력받은값을 submit을 통해 8-2.php로 보내고,
      $_GET["넘어온값의 name명"]; 으로 그 입력받은값을 가져오는것이군요.
      가져온값을 이용해 if문으로 그 값이 참,거짓인지 확인하는거구요~
      감사합니다.
    • Code.Math
      감사합니다~~!!
    • 수강완료!
    • 김종엽
      2016.08.08 완료!
    • Wookiiis
      잘 보았습니다. :)
    • 수강완료
    • 차누
      수강완료
    • 이현아
      감사합니다.
    • glad9090
      ^^
    • 와! 감사합니다! 강의 정말 잘 듣고 있어요. 웹 어플리케이션 강의 하나 들으면 기본적인 사이트는 만들 수 있을거라 생각했는데 여기저기 문제가 많이 생기네요ㅜㅜ
      대화보기
      • egoing
        여러가지 방법이 있는데요. <input type="hidden"> 태그를 이용하시면 정보를 숨겼다가 다음 페이지로 정보를 넘기실 수 있습니다~
        대화보기
        • Jo Minho
          강의 잘 들었습니다! 질문을 여기에 하면 되는건지 잘 모르겠네요;;
          로그인할 때에 GET을 사용하는 것처럼 회원가입 하는 사이트를 form들을 만들어 보려 했습니다.
          회원가입 사이트는 1단계에서는 개인 아이디 등을, 2단계에서는 기타 정보를 물어보도록 만들고 싶었습니다.
          1단계에 있던 정보들을 2단계에 POST하고 2단계에서 완료 버튼을 누르면 1단계와 2단계 정보들이 다음 사이트로 POST되도록 시도해보았습니다. 그런데 한꺼번에 다른 사이트의 정보들이 합쳐지지는 않네요.
          1단계에서 POST한 정보들을 미리 데이터베이스에 저장해야하는 것인가요? 실제로 한 페이지가 아닌 복수의 페이지가 POST한 정보들을 어떻게 한꺼번에 모으는지 궁금하네요.
        • 김준형
          수강했어요. 쉬운강의 감사합니다.
        • 링고쥬스
          댓글보고 다시 확인해봤는데 이상이 없는데;
          어떤 에러가 뜨시는지 물어봐도 될까요?
          대화보기
          • ㅇㅇ
            ㅠㅠ저는 이 소스로 하면 에러뜨는데..다른 분들은 되시나요
            대화보기
            • JustStudy
              고맙습니다 2.
            • Sy Kim
              <혼자 삽질한 이야기>

              1) 8-1.php은 순수하게 html의 언어로만 적혀있는데 왜 .php로 저장할까.. 8-2.php랑 연결되서 그런가?? 혹시나 싶어서 8-1.html로 저장해서 돌려봤는데 똑같은 결과가 나옵니다.. 오!! 그러고 보니 html이랑 javascript랑만 이루어진 문서도 .php로 저장하고 있었구나!!!!

              2) html에서는 따옴표안에 있어도 문자가 아니네요.. 따옴표 안에는 문자열이라는 인식이 강했나봐요

              <input type="submit">에서.. 나는 "submit"이라고 적었는데 왜 화면단추에는 "제출"로 나오지 (자동번역인가;;;;<---이생각하면서 스스로 바보같다고 생각했어요).. 설마하면서 코딩을 "제출"이라고 바꿔밨는데 당연히 에러가 났다는;;;;; 가만보니 html에서 두번째 명령어 뒤에 나오는 따옴표는 문자열이 아니라 성질(?)성격(?)을 나타내는거같아요..

              8-1.php에 <input type="text" name="password"> name뒤에 붙은게 일종의 변수를 지정한 거라고 생각했거든요.. 이름을 password로 지정해서 8-2,php에서 불러오고.. 뭐 그런걸로.. 그래서 혹시나 해서 password를 2개 페이지 모두 전부 pw로 바꿔서 해보고, 각각 한군데씩만 pw로 바꿔복했는데 에러나네요..

              역시 text, password, submit이것이 일종의 명령어나 성질을 나타내는 아무튼 지정된 언어네요.. 너네 왜 따옴표에 있어서 헷갈리게 하니.. ㅠㅠ
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기