|
|
|
|
|
|
| |
 최초 작성일 |
:
2003년 08월 08일 |
|
최종 수정일 |
:
2004년 04월 21일 |
|
|
작성자 |
:
Dukyoung (김덕영) |
|
편집자 |
:
Taeyo (김 태영) |
|
|
읽음수 |
:
79,473회
|
|
|
강좌 목록으로 돌아가기
|
|
|
|
|
필자의 잡담~
이제 본격적으로 예제로 들어서는 인기폭발 덕방구님의 강좌입니다!!! ^^ |
|
|
|
안녕하세요. 초보자를 위한 ASP 강좌 9번째 시간입니다.
(어느덧 벌써 9번째 강좌까지 왔군요. 호오~)
지난 시간까지 우리는
ASP 에서 사용되는 기본적인 문법들에 대해서 살펴 보았습니다.
부족하긴 하지만.. 꽤 많은 기본적인 문법들에 대해서 이야기를
했는데요..
아무리 흥미있는 내용이라고 해도, 글만 보고 있으면 지겨워 질 수 있겠죠?
그래서 오늘은.. 더 지겨워지기 전에 얼른
실습에 들어가 보려고 합니다. ^^
오늘 우리가 실습해 볼 도전 과제는...
사용자에게 정보를
입력 받아서, 그 내용을 화면에 출력하는 페이지를 만들어 보는 것입니다.
우리는 이
강좌에서 두 개의 페이지를 만들 예정입니다.
여기서 잠깐!!
제가 지난 강좌에서
'에디터 프로그램'을 준비해 주십사 부탁 드렸었는데.. 기억하시나요?
에디터 프로그램이 없으신
분들께서는 메모장(NotePad) 을 사용하셔도 됩니다만..
되도록이면 에디트플러스(EditPlus) 나, 울트라에디트(UltraEdit) 같은
전문 에디터 프로그램을 사용하실 것을 권장해 드리는
바입니다.
(참고로 메모장은.. '시작 -> 프로그램 -> 보조 프로그램 ->
메모장' 에
있습니다.)
| |
그러면 이제.. 에디터
프로그램을 실행하시고 두개의 페이지를 만들어 보도록 하겠습니다.
두 페이지의 이름은 각각 'regist.asp' 와 'regist_ok.asp' 로
하겠습니다.
regist.asp 페이지에서는 사용자에게 정보를 입력받을 예정이고요.
regist_ok.asp 에서는
regist.asp 에서 입력된 값을 받아 화면에 출력시켜 줄 예정입니다.
준비 되셨지요? 그렇다면 이제부터 실제 코딩으로 들어가
보도록 하겠습니다.
아래 표를 참고하셔서 regist.asp 와 regist_ok.asp 페이지를 만드시기 바랍니다.
또 한번 잠깐!!
이 페이지는 asp
페이지입니다. 따라서 '웹서버' 에서만 동작하게 됩니다. (기억하시죠?)
그러므로 이 두개의
페이지를 만드신 후에는 '홈 디렉토리' 에 저장하시거나,
'가상
디렉토리' 를 만드시고 그 안에 저장하셔야만 브라우저에서 확인하실 수 있습니다.
만약 홈 디렉토리인
'C:\Inetpub\wwwroot' 안에 파일을 저장하셨다면,
브라우저 주소창에 'http://localhost/regist.asp'
처럼 입력하시면 되고요.
가상 디렉토리를 만들고, 웹 공유시에 별칭을 'taiji' 라고 지어
주셨다면,
'http://localhost/taiji/regist.asp' 와 같이 접근하시면 되겠습니다.
(여기서는 홈
디렉토리와 가상 디렉토리에 대한 부가적인 설명을 드리지 않습니다.
혹시 기억이 가물가물 하신 분들께서는 'ASP
4번째 강좌' 를 참고하시기
바랍니다.)
| |
참고로, 아래 소스의
왼쪽에 붙어있는 숫자는 설명을 위해서 붙여놓은 행 번호입니다.
만약 소스를 복사해서 '붙여넣기'
하신다면 행 번호는 필요없으므로 복사하지 마세요~.
(이렇게 말씀드려도 '소스대로 똑같이 했는데 오류나요!' 하시는 분 꼭 계십니다.
^^)
| regist.asp |
| 1 |
|
| <HTML> |
| <HEAD> |
| <TITLE>사용자로부터 정보 얻기</TITLE> |
| </HEAD> |
| <BODY> |
| <FORM NAME=frmInfo METHOD=POST
ACTION=regist_ok.asp> |
| 이름 : <INPUT TYPE=TEXT NAME=txtName
SIZE=15><BR> |
| Email : <INPUT TYPE=TEXT NAME=txtEmail
SIZE=30><BR> |
| 전화번호 : <INPUT TYPE=TEXT NAME=txtPhone
SIZE=20><BR> |
| <INPUT TYPE=SUBMIT VALUE='전송'> |
| </FORM> |
| </BODY> |
| </HTML> | |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 | |
| regist_ok.asp |
| 1 |
|
| <% |
| DIM strName, strEmail, strPhone |
| |
| strName = Request.Form("txtName") |
| strEmail = Request.Form("txtEmail") |
| strPhone = Request.Form("txtPhone") |
| |
| Response.Write "이름은 = " & strName &
"<BR>" |
| Response.Write "Email은 = " & strEmail &
"<BR>" |
| Response.Write "전화번호는 = " & strPhone &
"<BR>" |
| %> | |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 | |
음.. 위에
나온 두개의 페이지는 따로따로 만드셔야 한다는 사실.. 알고 계시지요? ^^
사실 위에 있는 regist.asp 페이지에는, 보시는 것처럼
ASP 코드가 들어있지 않습니다.
그러므로 굳이 asp 파일이 아니라 HTML 형식의 파일로
만들어도 괜찮습니다.
바꿔 말하면.. ASP 코드가 포함되어 있지 않아도 asp 파일로 사용할 수 있다는 뜻이 됩니다.
선택은
여러분들의 자유입니다. 마음에 드는 형식의 파일로 저장하시기 바랍니다.
저는 혹시나 ASP 코드가 추가될 수 있을 가능성을 생각해서 asp
파일로 저장하였습니다.
자, 우선 위의 페이지를 실행한 결과를 보도록 하겠습니다. 다음 버튼을 클릭해 주세요.
자..
사용자들에게 입력을 받는 세개의 입력창이 나타났습니다. (볼품은 없지만요.)
여기에 정성껏
자신의 정보를 입력하고 '전송' 버튼을 누르면..
방금 내가 입력한 값들이 화면에 그대로 보여지게 됩니다.
'에게게? 겨우
이게 뭐야~' 라고 생각하실 수도 있지만, 이것은 생각보다 대단한 것입니다.
이제 우리는 우리의 웹사이트를 방문하는 사람들에게서 정보를
얻을 수가 있게 되었으니까요.
이 간단한 기능의 추가로.. 여러분의 사이트는 '단지 보여지기만' 하는 사이트가 아닌,
사용자들에게
'정보를 수집할 수 있는' 역동적인 사이트로 거듭날 수가 있는 것입니다.
좋습니다.
그렇다면 지금부터 위의 소스를 하나하나 살펴보는 시간을 가지도록 하겠습니다.
1.
FORM 태그
regist.asp 페이지에서 눈에 띄는 것은 아무래도 6번째 줄의
<FORM> 태그일 것 같습니다.
FORM 태그는 사용자에게 '정보를 입력받는 곳의 경계를 설정' 해 주는 태그입니다.
즉, 사용자가 정보를 입력하는 여러가지
필드들은 반드시 <FORM> 과 </FORM> 내부에 있어야만 합니다. FORM
태그 바깥에 있으면 아무리 입력을 해도 그 내용이 전달되지 않습니다.
(regist.asp 페이지에서는 6~11줄까지 FORM 태그가
감싸고 있는 것을 보실 수 있습니다.)
FORM 태그에서 중요하게 사용되는 속성은 NAME,
METHOD, ACTION 등이 있는데요.
이 속성들에 대해서 조금 더 자세하게 알아보도록 하겠습니다.
1.1
NAME
- 이것은 말 그대로 FORM 의 이름을
나타냅니다.
한 페이지 안에서 FORM 은 단지 하나가 아닌, 여러개가 사용될 수도 있는데요.
그렇기 때문에 경우에 따라서는
이 FORM 들을 구별해야 할 필요가 생기고는 합니다.
이 때, 각각의 FORM 들을 구분해 주는 것이 바로 NAME 속성이 되는
것입니다.
1.2 ACTION
- 현재의 페이지는 '사용자들로부터 정보를 입력받는'
페이지라는 말씀을 위에서 드렸는데요.
이 페이지는 '단지 입력을 받을' 뿐이고, 그 정보의 처리는 다른 페이지에서 하게
됩니다.
그렇다면 지금 입력받은 정보들을 그 '처리해 주는 페이지' 로 보내야 하겠지요?
이 때 사용되는 속성이 바로
ACTION 속성이 되겠습니다.
'사용자가 입력한 정보를 처리하는 페이지의 주소' 가 바로
ACTION 의 값이 되는 것이지요.
이 주소가 정확하지 않으면 '페이지를 찾을 수 없다' 는 오류를 만나게 될
것입니다.
1.3 METHOD
- 값을 전달하는 '방식' 을 의미하는 METHOD
속성에는 두가지가 있습니다.
하나는 'GET' 방식이고, 또 하나는 'POST' 방식인데요.
GET 방식은 여러분들께서 주소를 입력하는 주소창에 정보를 추가해서 전달하는
방식이며,
POST 방식은 보이지 않게 숨겨서
정보를 전달하는 방식이 되겠습니다.
따라서 GET 방식을 사용하면 주소창에 여러분들께서 입력한 정보가 드러나게
되지요.
그림 1. GET 방식으로 값을 전달하는 경우
위의 주소창에서 보실 수 있는 것처럼 주소를 나타내는 content.asp 다음에
'?seq=197&part=1' 이라는 문자열이 들어가 있는 것을 보실 수가 있겠습니다.
이것은
content.asp 페이지로 이동할 때 seq 라는 변수에는 197 이라는 값을,
그리고 part 라는 변수에는 1 이라는 값을 GET 방식으로 넘긴다는 의미가 되겠습니다.
(참고로.. 페이지와 변수는 '?' 문자로
구분하고, 변수와 변수는 '&' 문자로 구분합니다.
이 내용은 상당히 자주 접하게 될 내용이므로, 미리 알아두시면 두고두고
유용합니다. ^^)
하지만 POST 방식으로 넘겨주는 경우에는 주소창에 아무 정보도 나타나지 않습니다.
POST 방식의 경우, 정보는 따로 데이터 스트림이라는 곳에
저장되어 전달되기 때문이지요.
그림 2. POST 방식으로 값을 전달하는 경우
보시다시피 POST 방식을 사용한 경우 주소창에는 딸랑 주소만이 표시됩니다.
어떤 변수와 어떤 값들이 전달
되는지 사용자들은 도무지 알 수가 없는 것이지요.
자, 그럼 여기서 GET 방식과 POST 방식의
차이를 간략하게 정리해 보도록 하겠습니다.
하나, POST 방식이 GET
방식보다 보안적 측면에서 더 우수합니다.
주소창에서 정보가 보여지는 GET 방식보다는 POST
방식이 아무래도 더 안전하겠지요?
둘, POST 방식이 GET 방식보다 더 많은 양을 전달할 수 있습니다.
POST 방식은 정보의 양에 상관없이 무제한 용량을 소화할 수
있지만,
주소(URL)의 뒤에 정보를 추가하는 GET 방식은 최대 2,047 글자를 넘어갈 수 없습니다.
따라서 많은 양의
내용을 전달하려 할 때 GET 방식을 사용하면 곤란하겠지요. (대략 낭패~!)
세번째, 아주 미세한 차이지만 속도는 GET 방식이 POST 방식보다 빠릅니다.
별도의 장치 없이
주소(URL)의 뒤에 정보를 추가하는 방식인 GET 방식이,
데이터 스트림에 따로 저장하는 POST 방식보다 더 빠르다는 것이 일반적인
중론입니다.
(이론적으로는 그렇지만 실제로는 거의 차이가 없다고 봐도 무방하겠습니다.)
이런 이유때문에 보통의 경우
GET 방식 보다는 POST 방식을 주로 사용합니다.
(따라서.. 라면 이상하지만 이 강좌에서도 POST 방식을 사용하였습니다.
^^)
2. INPUT 태그
FORM 태그의 내부를 보면 7,8,9,10 번
줄에 있는 INPUT 태그를 보실 수 있습니다.
INPUT 태그는 '사용자에게 정보를 물어볼 때' 사용하는 태그인데요.
그러므로 이
태그는 '사용자의 입력을 받는' 특수한 태그라고 할 수가 있겠습니다.
INPUT 태그의
종류는 상당히 다양하지만.. 종류에 대해서는 다음 강좌에서 살펴보도록 하고,
이번 강좌에서는 '사용자들이 문자열을 입력할 수 있는'
텍스트 필드(TEXT)와,
'입력이 완료되었을 때 전송을 실행하는' 실행버튼(SUBMIT)의 경우만 다루도록 하겠습니다.
위 소스의 7 ~ 11번 줄의 소스를 옮겨보면
다음과 같습니다.
7. 이름 : <INPUT TYPE=TEXT NAME=txtName SIZE=15>
8.
Email : <INPUT TYPE=TEXT NAME=txtEmail SIZE=30>
9. 전화번호 : <INPUT
TYPE=TEXT NAME=txtPhone SIZE=20>
10. <INPUT TYPE=SUBMIT
VALUE='전송'>
INPUT TYPE=TEXT 는 사용자에게 글자를 입력받는 텍스트 필드를 사용하겠다는
의미입니다.
하지만 똑같은 텍스트 필드가 3개씩이나 나오니까.. 각각을 구분해야 할 필요가 있겠지요?
이 때 서로를 구분해
주는 속성이 바로 NAME 속성입니다. 이름을 지어 주는
것이지요.
이렇게 지어준 '이름' 은 정보를 넘겼을 때 유용하게 사용되므로 잘 기억해 두셔야 합니다.
(이름을 지을때에도 저는 이름
앞에 text 의 약자인 txt 를 붙여서 지었습니다. 편합니다. ^^)
뒤에 SIZE
라는 또 하나의 속성이 보이는데요.. 이것은 텍스트 필드의 '길이' 를 의미합니다.
(영문은
사이즈 1당 글자 하나, 한글은 사이즈 2당 글자 하나가 들어가는 정도의 길이입니다.)
이름은 그다지 길지 않을 것 같으므로 사이즈를 15
정도로 주었고요.
Email 은 약간 길어질 수 있으므로 넉넉하게 30 정도로 정해 주었습니다.
만약 SIZE 값을 지정해 주지
않는다면 기본 값은 자동적으로 20 이 됩니다.
10번 줄의 SUBMIT 버튼은, 현재
FORM 안에 있는 내용들의 전송을 실행하는 버튼입니다.
이 버튼을 클릭하면 FORM 안에 있는
모든 내용들이 지정된 페이지로 전달됩니다.
(정확하게 말하자면 FORM 의 ACTION 속성에서 값으로 지정해 준 페이지로
전달됩니다.)
여기서 사용되는 VALUE 속성은 버튼 위에 쓰여지는 내용을 의미합니다.
자..
이제는 regist.asp 페이지에서 넘겨준 정보를 처리하는 역할을 하는 페이지인
regist_ok.asp 페이지를 한번 살펴보도록
하겠습니다.
이 페이지의 구조는 상당히 단순합니다. 소스의 중요 부분만을 살짝 옮겨와 보도록 할까요?
2. DIM
strName, strEmail, strPhone
4. strName = Request.Form("txtName")
5.
strEmail = Request.Form("txtEmail")
6. strPhone =
Request.Form("txtPhone")
8. Response.Write "이름은 = " & strName &
"<BR>"
9. Response.Write "Email은 = " & strEmail &
"<BR>"
10. Response.Write "전화번호는 = " & strPhone &
"<BR>"
우선 2번 줄에서는 이 페이지에서 사용될 변수들을 Dim 명령어를
이용하여 선언합니다.
(ASP 에서는 반드시 선언하지 않아도 되지만.. 선언하는 것이 좋은 습관인거 아시죠? ^^)
보시는 것처럼
이름, 이메일, 전화번호를 저장할 변수 셋을 선언했네요.
(저는.. 문자열이 저장된다는 이유로 앞에 'str' 이라는 접두사를
붙여주었습니다.)
4, 5, 6번 줄은 regist.asp 페이지에서 넘긴 정보를 받는 부분이 되겠습니다.
그런데 여기서
한가지.. 우리는 regist.asp 페이지에서 POST 방식을 사용했었습니다.
이처럼 POST
방식으로 넘기는 경우 'Request.Form' 과 같은 형식으로 값을 받아야
합니다.
그렇다면 GET 방식으로 값을 넘긴 경우에는 처리가 달라지는 걸까요?
네. 그렇습니다. GET 방식인 경우 'Request.QueryString' 으로 값을
받아야 하지요.
여기서 잠깐!!
Request.QueryString (GET 방식) 과 Request.Form (POST 방식)..
초보 분들이 가장 많은 실수를 하는 부분이 바로 이 부분이라고
해도 과언이 아닙니다.
제가 받는 질문 중에서 가장 많은 질문이 바로 이 부분의 질문입니다.
POST 방식으로 넘기고
Request.QueryString 으로 받으시거나, GET 방식으로 넘기고 Request.Form 으로 받은 다음에 '아무런 값을 받아오지
못했다' 고 하시는 것이지요.
이런 경우를 대비해서 GET, POST 방식에 상관 없이 받아오는 방법이
있습니다.
QueryString 과 Form 을 생략한 Request("txtName") 처럼
받아오는 방법인데요.
하지만, 이 방법은 QueryString, Form 을 명시해 줄때보다는 효율성이
떨어진답니다.
효율성을 위해서 GET 방식일때는 Request.QueryString, POST 방식일때는
Request.Form 으로 받는 좋은 습관을 초보일때 꼭~! 들여 두시기 바랍니다. ^^)
| |
4번 줄에서는.. regist.asp 에서
사용자가 txtName 이라는 이름(Name) 의 텍스트 필드에 입력한 내용을 고스란히 받아와서, 그 값을 strName 이라는 변수에
저장합니다.
마찬가지 방식으로 5번 줄에서는 txtEmail 의 내용을 strEmail 이라는 변수에 저장하고요.
6번 줄에서는
txtPhone 의 내용을 strPhone 이라는 변수에 저장하게 됩니다.
이처럼 각각의 변수에 저장된 값들을..
8, 9,
10 번 줄에서는 Response.Write 메소드를 이용하여 화면에 출력해 주게
됩니다.
노파심에서 한마디 드리자면, 큰 따옴표로 감싼 부분은 문자열 그대로 출력될 것이고요.
큰 따옴표가 없는 부분은 '변수'
이므로 그 안에 담겨진 값을 출력하게 됩니다.
그렇다면 '&' 문자는? 이것은 문자열과 문자열을 연결시켜 주는 역할을 하는
것이지요. ^^
그런데.. 뒤에 "<BR>" 이라는 부분이 왜 있는지 궁금해 하실지도
모르겠는데요.
Response.Write 메소드를 사용하여 화면에 출력하면 이것은 HTML 로
변환 됩니다.
따라서 이것은 HTML 의 규칙을 충실하게 따르게 되는 것이지요.
그러므로 줄을 바꾸기 위해서
"<BR>" 태그를 사용한 것입니다.
만약 "<BR>" 부분이 없다면 8, 9, 10 번줄의 내용들은 한 줄로
보여지게 될 것입니다.
(미관상 그리 좋아 보이지는 않겠지요? 나름대로 서비스라고 생각하시면 됩니다. ^^)
자..
어떻습니까?
이렇듯 regist_ok.asp 페이지에서는 regist.asp 페이지에서 넘겨준 정보를 받아서
변수에다가 그 정보를
저장한 다음, 그 내용을 화면에 곱게~ 출력해 주었습니다.
사용자에게 정보를 얻어내는 방법... 생각보다 간단하지
않나요?
(간단하지요? 하지만 이 내용은 이제 ASP 를 본격적으로 공부하려는 여러분들에게
기본이면서도
아주~ 중요한 내용이랍니다. 반드시, 확실하게 알아두셔야만 하지요.)
자, 그럼 오늘의 강좌는 이것으로 마치도록
하겠습니다.
오늘은 사용자에게 정보를 얻는 방법(텍스트 필드만을 이용한)에 대해서 생각해 보았는데요.
다음 강좌에서는 오늘 나온
'텍스트 필드' 뿐만이 아닌, 여러가지 방식으로 사용자들에게
정보를 얻는 방법에 대해서 알아보도록
하겠습니다.
한가지 부탁 말씀을 드리자면..
오늘의 강좌는 여러분들께서 눈으로만 따라하지 마시고, 에디터 프로그램이나
메모장에서
직접 코딩해 보신 후에 결과가 과연 제대로 나오는지 직접 확인하시는 것이 좋다는 것입니다.
경험상.. 코딩을 손으로 직접
하다보면 코딩 속도도 빨라지고, 코딩의 '감' 도 생기게 됩니다.
시간이 정 없으시거나, 테스트해 볼 환경이 안되는 분이시라면 어쩔 수
없겠지만
환경이 마련되어 있는 분들께서는 꼭 실행해 보실 것을 강력하게 권해 드립니다. ^^
날씨도 더운데 잔소리가 길었네요.
그럼 오늘도 즐거운 하루 되시고요.
다음 강좌에서 반갑게 또 뵙도록 하겠습니다.
멋진 주말 보내세요. 감사합니다~. |
|
authored by
|
:{3} 
({4})