웹에플리케이션 만들기 – JS, PHP 프로그래밍 9-2-2 : php 로그인앱 구현

자 그러면 8-1php 파일은 어떻게 생겼는지를 살짝 볼껀데 우리는 지금 보고 계신 여기 내용 있잖아요? 사용자의 입력을 받고 전송하고 이런 기능들을 우리가 뒤에서 아주 자세히 배울 겁니다 그러니까 대충 보시면 돼요

대충 자 요렇게 생겼습니다 자, 여기에 보시는 것처럼 여기에 있는 이 부분 form으로 시작해서 form으로 끝나는 이 태그에 이만큼이 여기에 해당됩니다 아시겠죠? 자 그 다음에 '이제 비밀번호를 입력해 주세요'는 뭐 이거죠 당연히 그 다음에 여러분이 사용자로부터 어떤 데이터를 입력 받아서 입력받을 수 있는 그 기능은 HTML에서는 이렇게 생긴 태그를 여러분들이 사용하시면 이렇게 생긴 화면이 나타나고 자 그리고 사용자가 입력한 정보들을 서버로 전송할 때 사용하는 이 제출 버튼 이것은 이렇게 생긴 태그를 사용하시면 되는 겁니다 그리고 여기는 이 내용을 이제 우리가 form이라고 하는데 form에 대한 부분은 지금은 중요한 게 아니니까 그냥 '응 그냥 그렇구나'라고 생각하고 넘기시면 됩니다 자 어쨌든 여기서 중요한 것은 여기 form이라고 하는 태그로 감싸 있는 이 안에서 여기 input이라고 돼 있는 이 부분에다가 사용자가 어떤 정보를 입력할 거 아니에요? 그 정보는 하나가 아니라 여러 개 일수도 있습니다 예를 들면, 이런 식으로요 세 개가 되죠? 자 아무튼 그런 정보를 입력한 후에 input type= "submit" 이라고 되어 있는 아주 특수한 특수한 태그를 특수한 태그에 해당되는 이 버튼을 누르면 어떤 일이 일어나도록 HTML에는 약속이 되어 있냐면 바로 이 submit 이라고 하는 이 버튼이 위치하고 있는 form 태그 이거죠 form 태그의 속성값 중에 action이라고 하는 속성값에 이 값 있잖아요? 이 값으로 사용자가 입력한 이 정보를 전송하도록 약속되어 있습니다 자 그 말을 조금 더 브라우저 입장에서 브라우저가 동작하는 방식으로 표현을 좀 바꿔보면 사용자가 이 submit 버튼을 이 곳을 누르게 되면 이 form 태그 안에 있는 여러 input 태그들이 있을 거 아니에요 이런 것들이죠 거기에 입력된 정보들을 form 태그의 action 속성이 가리키는 페이지를 웹브라우저가 열면서 거기에다가 이 8-2php 뒤에다가 써볼게요 뒤에다가 물음표를 하고요 그리고 사용자가 입력한 정보 자 우리의 예제에서는 여기 있는 여기에 입력한 정보는 바로 이 태그에 입력된 정보라고 할 수 있잖아요? 그리고 그 태그에는 name이라고 하는 약속되어 있는 속성이 존재하는데 그 속성의 이름을 그 속성의 값이죠 여기에다가 예를 들면 이렇게 8-2

php?password 그리고 = 여기에 입력한 값 즉, 이 곳에 입력한 값을 여기 URL 뒤에다가 위치시키는 겁니다 그럼 어떻게 되겠어요? 만약에 제가 여기다가 1111을 넣으면 URL은 이렇게 이렇게 이렇게 이렇게 되는 것이죠 자, 한 번 실행을 시켜 볼께요 1111을 입력했어요 자 그럼 어떻게 된다고 말씀드렸죠? 여기에 입력한 값 즉, 여기 있는 이 곳이 입력이 된 상태이죠? 자 여기서 제가 제출 버튼을 누르면 바로 이 태그가 얘가 얘니깐 얘가 위치하고 있는 form 태그의 action 속성 값으로 이 password 값을 전달한다 라는 겁니다 해볼게요 제출을 눌렀더니 어떻게 되나요? 보시는 것처럼 URL이 이렇게 바뀐 것을 볼 수가 있죠 이런 것들은 다 약속이애요 그렇게 동작하도록 약속되어 있기 때문에 브라우저는 그렇게 동작하는 것이고 여러분은 그 약속에 따라서 이렇게 코드를 작성하시면 웹브라우저는 그렇게 동작하도록 약속되어 있는 것이죠 자 그럼 이제 뭐가 중요하냐면 8-2php로 이제 넘어왔잖아요 그럼 8-2php에게는 사용자가 전송한 데이터 즉 password 값이 무엇인지를 8-2

php 어플리케이션이 알아낼 수 있는 어떤 방법이 필요한거죠 자 그럼 이제 8-2php를 열어보겠습니다 이게 주인공이에요 form문 form 태그라고 하는 것은 우리가 뒤에서 더 자세히 살펴볼 겁니다 자 지금 보고 계신 이 화면이 이 PHP 쪽의 어떤 구현 부분인데요 이거는 일단 지금 중요한 게 아니니까 싹 지워버리고 대충 한번 눈으로 보시는 것도 좋아요 한번 보시고 지웁니다 자 일단 우리한테 첫 번째 관문은 무엇이냐면 우리가 알아야 할 첫번째는 사용자가 전송한 데이터는 ?password 는 ?password는 1111이다 이렇게 되어 있는 이 정보잖아요? 그럼 여기에 있는 사용자가 입력한 값을 얘가 알 수 있어야 되는데 그 때 어떻게 하면 되냐면 이렇게 하시면 됩니다 자 echo 그리고 이거 PHP 코드 아닙니다 사용자가 입력한 정보 중에 password의 값 이렇게 입력하면 얘가 뭐가 되냐면 여기 있는 이거 전체가 사용자가 입력한 정보 중에 password의 값이니깐 이거 있잖아요? 1111이 제가 녹색으로 표시한 이 부분으로 바뀌게 된다 라는 것이애요 자 그런데 이 녹색으로 되어 있는 부분은 PHP 코드가 아니고 제가 여러분들이 이해하기 쉽도록 한글로 쓴 것이고 딱 저거에 해당되는 사용자가 입력한 정보 중에 password의 값에 해당되는 약속되어 있는 php의 변수가 있습니다 아주 특수한 변수 여기에서 특수하는 표현을 쓰는 것은 그런데 지금까지 변수를 직접 만들었잖아요 근데 지금 제가 보여드릴 변수는 여러분이 만든 변수가 아니고 PHP가 바로 이러한 목적을 위해서 PHP가 정의한 변수

특수한 변수입니다 그게 뭐냐면 위에 것은 일단 안 지울게요 이겁니다 변수가 시작될 때 $(달러)로 시작하죠 _ (언더바) 그리고 GET 그리고 여기에다가 자 여기까지가 사용자가 입력한 정보라는 뜻이고 대괄호 그리고 따옴표 그리고 여기다가 password 이렇게 그리고 위에꺼는 필요 없는 거니까 지우고 제가 한번 실행시켜 볼게요 자 보시는 것처럼 사용자가 입력한 그 password라고 하는 정보가 화면에 표시되는 것을 볼 수가 있습니다 제가 만약에 여기 있는 1111을 다른 걸로 바꾸면 다른 걸로 바꾼 정보가 화면에 표시되는데 그 얘기가 무슨 뜻이냐면 즉, password라고 하는 뒤에 붙어있는 이 값이 우리가 PHP 애플리케이션에서 알고싶다면 PHP 코드 안에서 %_GET[" 와 "]; 사이에 우리가 알고 싶은 password라고 하는 이것을 넣어주시면 여기에 제가 강조 표시한 이만큼이 바로 이 값이 된다 라는 것이 중요해요 왜 이게 중요하냐? 바로 이 값이 우리가 만든 8-2php 애플리케이션에 입력 값이 되는 것이죠 그럼 우리는 이 입력값이 무엇이냐에 따라서 얘가 동작하는 방법을 달리할 수 있다 라는 것입니다 이러한 특징은 HTML은 할 수 없는 일이에요 자 한번 해보죠 자 그러면 사용자가 입력한 정보 즉 password 값을 우리가 일단은 편의를 위해서 password라고 하는 이 변수에 담읍시다 그럼 어떻게 되겠어요? 이걸 실행을 시키면 여기에 입력한 이 정보가 이만큼이 되고 그리고 여기에 입력한 정보가 password라는 변수에 담기겠죠 맞아요? 자 우리는 if password의 값이 1111 즉, 로그인에 성공했다면 '주인님 환영합니다' 그렇지 않다면 즉, 로그인에 실패했다면 '뉘신지?' 뜨게하면 된다는 것이죠 자 만약에 여기에 있는 패스워드의 값이 pwd라면 어디가 바뀌면 될까요? 바로 이 부분을 pwd로 바꾸면 되는 거죠 만약에 얘가 id였다면 여기를 id로 바꾸면 되는 겁니다 그리고 나중에 여러분들이 배우겠지만 이렇게 생긴 이거는 변수인데 이거있죠? 대괄호, 대괄호 안에다가 우리가 뭔가를 적어주고 이것 이것은 PHP가 가지고 있는 어떤 문법인데 아직 우리는 이 문법을 배우지 않았기 때문에 여러분들은 이것을 통으로 그냥 사용자가 입력한 값 중에 id 값이라고 통으로 이렇게 기억하시면 됩니다 자 이렇게 해서 제가 PHP

예제는 마무리 해야죠? password로 다시 바꿉시다 여기도 이렇게 password로 바꿔야겠죠 자 여기서 이 수업에서 가장 중요한 것은 바로 이 조건문이라는 것이 있기 때문에 어떠한 조건에 따라서 즉, password의 값이 무엇이냐에 따라서 이렇게 동작할 수도 있고 저렇게 동작할 수 있는 어플리리케이션 만들수 있다라는 것이 이번 시간이 가장 중요한 목표였어요 그리고 그 목표를 그 우리가 배워가는 과정에서 부가적이지만 좀 중요한 내용이었던 것이 사용자가 입력한 방법을 받아내는 방법 그것이 무엇인가를 우리가 살펴본 것이죠 그렇다면 사용자가 입력한 값을 우리가 받아내는 방법이 중요한 이유는 무엇일까요? 우리가 알고 있는 대부분의 소프트웨어들은 언제나 똑같은 일을 하는 녀석들은 별로 없어요 대부분이 우리가 어떤값을 입력하면 그 입력한 값에 따라서 다르게 동작하는 소프트웨어가 우리가 알고 있는 대부분의 프로그램이죠 계산기도 그렇고 지금 보고 계신 브라우저도 우리가 어떤값을 입력하는 것에 따라서 얘는 다르게 동작하잖아요 에디터도 마찬가지고 앱도 그렇고 게임도 그렇고 모든 게 다 그렇다는 것이죠 그렇다면 사용자로부터 뭐 꼭 사용자가 아닐 수도 있습니다만 어떤 데이터를 어떤 정보를 입력 받는 방법 여기에서는 이거 여기에서는 이거 물음표 있는 부분있죠? 이것은 중요한 내용이긴 한 거죠 다만, 우리 수업의 주인공 아니고 뒤에서도 여러 차례 등장할 거니깐 너무 긴장하지 마시고 뒤로 넘어가시면 되겠습니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 9-2-1 : php 로그인앱 소개

이번 시간에 우리가 살펴볼 내용은 php로 로그인 어플리케이션을 만들어보는 법에 대해서 알아보겠습니다 그런데 이 수업은 우리 웹 어플리케이션 수업 전체가 끝나고 꽤 시간이 지난 뒤에 이야기가 좀 어렵다라는 피드백들이 있어서 새롭게 만들어 본 수업입니다 그래서 조금 맥락이 약간 어긋나 있는 듯한 느낌 또는 제 말투의 어떤 변화 이런 것들이 좀 느껴지실 수도 있어요 자바스크립트에서 로그인을 어떻게 하는 건지는 보셨고 자아, 이번엔 우리가 살펴볼 것은 PHP에서 어떻게 할 것이냐인데 보통 우리가 웹사이트에서 로그인을 한다고 하면 사실은 이런 느낌으로 로그인을 하죠 비밀번호 아이디도 있겠지만 ID와 비밀번호를 입력하는 텍스트필드라는 것이 있고 거기에다가 이렇게 비밀번호를 입력해서 제출 버튼을 누르면 그러면 사용자가 입력한 비밀번호가 서버로 전송이 되는 방식으로 로그인이 이루어집니다 물론 실제 서비스에서는 이렇게 비밀번호를 입력하는 부분에서 이렇게 글씨 내용이 보이는 것이 아니라 이렇게 별표 표시가 되는데 그런 것들은 지금 우리한테 중요한 게 아니죠 자 아무튼 제가 이렇게 입력하고 제출버튼을 누르면 여러분들은 어디를 봐야 되냐면 현재 우리가 실행시킨 이 PHP 어플리케이션은 8-1php 인데요 여기서 제가 제출 버튼을 눌렀을 때 이 URL에 어떤 변화가 생기는지를 한 번 유심히 살펴 보시면 됩니다 자 한번 제출 버튼을 눌러 볼게요 자, 보시는 것처럼 8-2php가 열렸죠? 그리고 뒤에 password는 111111 이라고 하는 비밀번호가 전달이 된 겁니다 그런데 지금 우리가 아직 8-2php가 어떻게 생겼는지 지금 아직 보지 못했지만 요 곳은 비밀번호가 1이 4개 일 때 로그인되는 애플리케이션이애요 근데 지금은 우리가 여섯 개를 입력한 상태였기 때문에 뉘신지 라고 물어본것이죠 자 그러면 제가 비밀번호 1111을 한 번 입력해볼께요 하나 둘 셋 넷 그리고 제출버튼을 눌렀을 때 URL이 어떻게 바뀌는지보세요 자 보시는 것처럼 8-2

php로 php가 열렸고 그리고 password는 1111 이 요렇게 뒤에 붙은 것을 볼 수 있죠 그리고 그에 따라서 로그인이 성공했기 때문에 안녕하세요 주인님이라고 하는 저런 텍스트가 화면에 표시가 된 것이죠 우리가 아직 코드가 어떻게 생겼는지 보지는 못했지만 여기서 중요한 것은 요렇게 생긴 화면에서 제가 비밀번호를 입력하고 뭐 꼭 비밀번호일 필요는 없습니다 비밀번호일 수도 있고 글을 작성하는 화면이면 글 제목일 수도 있겠죠 그리고 제출버튼을 눌렀을 때 예~ 보시는 것처럼 새로운 PHP 애플리케이션이 열리면서 이렇게 정보를 정보를 전달할 수 있다는 것이죠 그에 따라서 실행결과가 달라진다 라는 것 이것이 가장 중요한 내용입니다 자 그러면 우리가 여기서 조금 더 응용을 해서 방금 보셨던 이런 화면 있잖아요 이런 화면을 통하지 않고도 우리가 이 8-2php 아직 그 코드를 본 적도 없는 저 PHP 애플리케이션이 동작되는 결과를 다르게 할 수 있는 방법이 무엇일까요? 바로 여기 있는 password 라고 하는 적혀있는 이 부분에 우리가 직접 값을 입력해서 예, 여기 있는 이 부분에 결과를 다르게 할 수도 있다는 것이죠 자 예를 들어서 여기다가 1111 이라고 입력하고 엔터를 치면 안녕하세요 주인님 이 뜹니다 자 그런데 제가 여기다가 아무거나 막 입력해요 다시 말해서 틀린 비밀번호를 입력하고 엔터를 치면 보시는 것처럼 뉘신지라고 하는 텍스트가 뜨게 된다는 것이죠 자, 이것이 가능한 이유는 여기 보시는 8-2php 우리가 이제 만들 8-2php 가 이 물음표 뒤에 따라오는 password 의 값이 무엇이냐에 따라서 다르게 동작하고 있다 라는 것이 굉장히 중요한 사실입니다 물론 이 부분은 뒤에서도 여러 번 이것과 관련해서 여러분들에게 설명을 드릴 것이기 때문에 혹시 지금 이해가 안 간다고 하더라도 너무 실의에 빠지실 필요는 없습니다 원래 좀 어려운 내용이니까요 자 다시 한번 따져 봅시다 8-2

php 는 예~ password 의 값이 무엇이냐에 따라서 다르게 동작한다 그 얘기는 뭐냐 이 password의 값이 무엇인지를 우리가 만들 8-2php 는 알 수 있어야 돼요 그렇죠? 그리고 이 password 의 값이 무엇인지에 따라서 추측해보세요 8-2php PHP 애플리케이션은 그 password의 값을 1111 인지 아니면 1111 이 아닌 지에 따라서 로그인을 시켜주거나 로그인을 시켜주지 않거나 하는 것을 가능하게 하는 코드가 8-2php 안에 있으면 되겠죠? 그게 뭐겠어요? 바로 조건문인 것이죠 형태는 상당히 다르게 보일 수 있어도 이 자바스크립트와 PHP는 동작하는 방법은 사실은 거의 비슷합니다 자 그러면 간단하게 어 여기에 8-1php 즉, 사용자의 입력을 받는 화면을 한 번 살짝 살펴보고 우리의 주인공인 8-2

php의 내용을 좀 더 깊게 살펴보도록 하죠