닷넷 게시판 만들기 Part 11

Notice

가이브의 Life Story에 대해..

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

새로운 시작, GuyV's lIfe sTyle.

닷넷 게시판 만들기 Part 11 - 서버로 보내기 본문

ⓟrogramming/asp.net 게시판

닷넷 게시판 만들기 Part 11 - 서버로 보내기

가이브 2011. 1. 20. 17:34

2011/01/19 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 10

1. 닷넷 개발환경 준비, 테스트
2. 닷넷 알아보기 [7/7]
3. asp.net 컨트롤 [2/..]

이전 시간에는 asp.net 의 컨트롤 그 결과물은 태그임을 강조했다.
이번 시간에는 더 덧붙여, 폼 태그의 형식에 대해 좀 더 알아보겠다.

지면상, 폼 태그는 이 강의에서 다 다루지는 못하지만, 최대한 이해할 수 있는 설명을 하도록 노력하겠다. :)

먼저, 다음 링크에 있는 board_write.html 을 다운로드 받도록 하자.

board_write.html

그리고 이 파일을 이 때까지 aspx 파일을 실행하기 위해 IIS에서 설정했던 홈디렉터리(강의내용상 c:\home) 폴더에 넣자. 이것은 html 파일이므로 그저 더블클릭해서 오프라인(offline, 혹은 웹에서 흔히 로컬영역[localarea]이라 부른다)에서 열어봐도 괜찮고, 127.0.0.1/board_write.html 로 온라인에서 열어도 괜찮다. 이는 우리가 잘 알고 있듯이 html 파일일 뿐이다.

파일명만 봐도 대충 알 수 있듯이, 이는 게시판 글쓰기용 html 파일인 것 같다.
(여담이지만, 스샷과 약간의 설명을 올려 놓고 화면에 보이는 것을 여러분 스스로 만들어라고 할 생각을 했지만, 악당이라 욕하실까봐 그러진 못하겠다;)

웹브라우저에서 열어본 결과, 진한 글씨로 타이틀이 하나 있고, 테이블안에 4개의 행이 있다.
이름, 제목, 글내용, 비밀번호이며, 각각은 텍스트박스 또는 텍스트영역, 비밀번호 HTML 폼 태그로 사용자에게 키보드로 입력을 받을 수 있게 했고, 작성완료와 취소를 클릭할 수 있게 버튼을 만들었다.

이 화면은 필자가 임의대로 만든 것이다. 홈페이지 어떤 것을 만들든, 그 만드는 것에는 목적성이 있다. 인터넷 쇼핑몰에서 상품을 사 보았다면 그 인터넷 쇼핑몰에서 요구하는 특정한 입력 항목이 있다. 이것은 쇼핑몰마다 다 다를 것이다. 그들이 그들만의 쇼핑몰을 기획했기 때문이다.

자신이 혹시 만들고 싶은 홈페이지가 있다면 다음을 생각해보자.

어떤 목적으로 홈페이지를 만들 것인가?
그 목적을 달성하기 위해서는 어떤 기술이 필요한가?
메뉴를 에니메이션을 주고 싶다면 어떻게 해야하는가? 플래시를 이용해 만들어야 하는가?
게시판은 어떻게 홈페이지에 넣어야 하는가?
게시판은 신뢰성을 위해 가입된 회원만 사용가능해야 하는가?
홈페이지에 개인 일기장을 넣으려면 어떻게 해야하는가? 어떻게 만드는가?
등등..

이런 모든 궁금증을 가능/불가능으로 구분하고 이를 가능하게 하기 위해 어떻게 해야하는지 정리가 필요할 것이다. 그저 툭~하고 만들어지는게 아니라, 긴 시간을 거쳐 100점짜리 기능의 홈페이지를 100점으로 만들었으나 150점짜리로 더 불어나게 되고, 거기에 기능을 붙여 150점으로 만드는 과정으로 계속 덧붙여져서 최종본이 만들어지게 되는 것이다.

다시 board_write.html 화면으로 돌아가보자.

테이블로 각 항목을 나눈 이유는 "화면에 보이는 디자인 요소를 위한것"이다. 순전히 이쁘게 보이기 위해서 그렇게 꾸민 것이다. 태그가 복잡해 보이지 않는가? 우리는 태그로 어떻게 디자인을 할 것인지 공부를 하고 있는것인가? 그러므로, 우리의 목적인 asp.net 프로그래밍 공부를 위해 새롭게 디자인 된 board_write.html 을 다시 다운받아서 과감하게 엎어버리자. ^__^

board_write.html

새롭게 탄생한 녀석의 모습은 다음처럼 간략하다.

소스를 보자. 얼핏 봐도 다이어트를 했다. 그러나, 기능상으로는 달라진게 전혀 없다.
(우리는 겉멋만 들이지 말기로 하자. 언제나 내성이 강해야 한다 -_-!)

board_write.html

<html>
<head>
<title>게시판 글쓰기</title>
</head>

<body>

<b>게시판 글쓰기 페이지</b>
<hr>

<form>

<b>이름</b>
<input type="text" size="15">
<hr>
<b>제목</b>
<input type="text" size="80">
<hr>
<b>글내용</b>
<br>
<textarea cols="80" rows="10"></textarea>
<hr>
<b>비밀번호</b>
<input type="password" size="15">
<hr>

<input type="submit" value="작성완료">
<input type="button" value="취소">

</form>

</body>
</html>

굵고 색칠된 것이 <form>..</form>태그임을 강조한 것이다.
이 html 파일에는 <input type=".."> 태그가 대부분으로 사용되고 여러줄의 입력기능이 있는 <textarea></textarea>, 그리고 두 개의 버튼이 있다.

사용자 입력을 받기위한 모든 폼 태그를 사용한 것은 아니지만, 예제로 만들어진 것이니 차차 더 알아보기로 하자.

공부하신 분은 아시겠지만, <form></form>태그 내의 정보를 전송하는 것은 태그에서 두 가지가 있다.

<input type="submit">
<input type="image">

하나는 일반적인 버튼의 형태고, 하나는 이미지파일의 형태이다. 이렇게 지정된 버튼을 누르면 <form></form>내의 정보가 모두 다 <form> 태그의 action 속성의 속성값으로 전송되게 된다. 어떻게? method 속성인 GET/POST 두 가지 형식으로 보낼 수 있다.

예제에서는 보내는 기능을 하는 버튼이 submit 으로 지정된 [작성완료] 버튼이다.

이제 이 값들을 보내는 테스트를 해보자.

<form> 태그를 찾아서, 다음처럼 수정하자. (12번째 줄)
<form method="get" action="board_write.html">

method 속성과, action 속성 두가지를 주었다. 일단, GET 방식으로 board_write.html에 전송해보자. 하단에 [작성완료]버튼을 클릭하면 전송되어질 것이다.

수정 후 온라인으로 열어보자. (웹브라우저에서, 127.0.0.1/board_write.html)

아무것이나 막~ 입력하고 [작성완료]를 누른다. 어떤 반응이 생겼는가?
필자는 아무리 결과를 봐도 리프래쉬(F5)를 한 것과 같은 반응이 생겼다.
값을 보내기는 한걸까? 그렇지 않다. 우리가 가장 중요한 것을 빠져먹었기 때문이다.

board_write.html 소스를 열자. 그리고 다음의 <form>..</form>태그의, 진하게 표시된 빠진 부분을 입력해보자.

</form>

폼 태그내에서, 사용자의 값을 입력받기 위해서는 이 name 이라는 속성이 있어야 한다. 그리고 이 속성 값도 지정되어야 한다. name="속성값" 에서, 이 name의 속성값은 중복이 가능하다. 그러나, 값을 따로 구분하기 위한 목적이면 중복을 피해야 될 것이다. 특정 프로그램을 만들 때 이 name 속성값을 중복되게 일부러 주는 경우가 있음을 알아놓자.
그리고, 태그문에서 오류메시지란 절대 존재하지 않는 다는 것도 알아놓자. 단지 잘못 해석되어 디자인나, 폼 값들이 뭉게질 뿐이다.

여튼, 수정된 결과를 다시 열어보자. 값을 아무거나 하나씩 입력하고, [작성완료]버튼을 눌러보자. 변경된 점을 찾았는가? 바로 주소창이다.

(...)board_write.html?name=%C8%AB%B1%E6%B5%BF&title=%BE%C8%B3%E7%3F&content=%C8%AB%B1%E6%B5%BF%C0%CC%BE%DF.&password=1111

필자는 4개의 항목을 각각 다음처럼 입력했다.

이름 : 홍길동
제목 : 안녕?
글내용 : 홍길동이야.
비밀번호 : 1111

이 GET방식의 특징은, 사용자가 입력한 값을 주소창에 붙여서 전송하게 된다는 것이다. 주소창에 보이게 된다니 필자가 입력한 비밀번호 1111도 보일 것이다. 이 주소를 한번 분석해보자.

1) http//127.0.0.1/board_write.html
2) ?
3) name=%C8%AB%B1%E6%B5%BF&title=%BE%C8%B3%E7%3F&content=%C8%AB%B1%E6%B5%BF%C0%CC%BE%DF.&password=1111

1) 우리가 <form>태그의 action으로 붙여준 값이 board_write.html 이다. 그것의 절대경로이다.
2) 물음표(?)를 구분으로, 보내는 값들이 뒤에 붙게된다.
3) 전송되는 실제 값들이다. 뜯어보자.

name=%C8%AB%B1%E6%B5%BF
&
title=%BE%C8%B3%E7%3F
&
content=%C8%AB%B1%E6%B5%BF%C0%CC%BE%DF.
&
password=1111

항목은 이렇게 4개이며, 각각의 항목의 구분은 엠퍼센트(&) 문자로 하게 된다는 것을 알 수 있다.

가만히 보니, 어디서 많이 보던 형식이 아닌가? 특히 검색엔진에서 많이 보던 깨진 것 처럼 보이는 알 수 없는 값들이다. 필자는 이름(name)과 제목(title)필드를 한글로 입력했다.

이렇듯, 영문자,숫자를 제외한 특수문자(한글,일어,중국어,★ 등등)는 전송시 변환되어 전송될 수 있다는 것을 알 수 있다. 물론 그대로 보이는 브라우저도 있다. 여기에서는 <form method="get"> 일 때, 저렇게 전송되며, 어떤 값으로 전송되는지 구분하는 방법을 아는 것이 목적이다.

그리고, 전송한 후(주소창에 값이 붙여 전송된 후) 새로고침(단축키 F5)을 해보자. 변화가 어떠한가? 아무렇지도 않다. 그러나 값은 다시 새로고침을 할 때마다 이미 전송되었다. POST와 다른점이 있으니, 다음으로 넘어가보자.

"GET방식으로 값 넘기는 테스트"를 진행했으니, "POST"방식으로 해보자.

<form>태그에서 get을 post로 변경.
<form method="post" action="board_write.html">

그리고 역시 마찬가지로, 값을 입력하고 [전송하기]버튼을 누르자.
반응이 어떤가? 아~무렇지도 않을 것이다.

그러나, 값은 제대로 전송이 된 것이다. POST는 주소에 붙여서 전송하지 않고 내용과 함께 대상(action="...")에 전달한다. 그리고 웹을 누비며 입력작업을 하다가 한번씩 다음과 같은 메시지를 본 적이 있을 것이다.

이 메시지는, 지금처럼 POST로 전송이 된 후, 새로고침(F5)를 했을 때, 웹브라우저에서 이를 경고하는 메시지이다.

설명대로, 결재를 진행했는데 내부적으로는 잘 되었지만, 결재 결과 페이지가 뜨지 않아 새로 고침을 눌렀다고 생각해보자. 이미 "구매하기"버튼을 눌러 완료되었다며 돈은 빠져나갔다. 그러나, 또 한번 더 빠져나갈 수도 있다는 말이다. 정보를 한번 더 보냈기 때문이다. (물론, 이것은 해당 쇼핑몰 개발자들이 충분히 고려해서 2차 결제가 되지 않도록 하는 것이 일반적이다)

브라우저는 이런 것들을 (POST방식으로 전송 후 새로고침시) 확인 차 알려주는 것이며, 다시 시도 버튼을 누르면 한번 더 POST로 여러분이 입력한 값을 또 전송하게 될 것이다.

GET과 POST의 전송에 대해 정리하면,

1. <form></form> 태그 내에 있는 어떠한 것도 GET/POST에 따라 바꿀 필요 없다.
2. GET은 주소에 붙여서 전송하므로, <a>태그의 링크형태로 값을 전송할 수도 있다.
3. POST는 내용에 붙여서 전송하므로, 일반적으로 로그인/회원가입 등 보안성이 필요할 때 사용한다. (그러나 HTTP는 보안에 취약하다. 그래서 만약을 위헤 ActiveX를 설치하여 보안성을 높이는 것이다.)
4. 파일까지 전송하기 위해서는 POST를 사용한다.

필자가 생각하는 것은 이 정도이다. 이번 강의를 따라 해보았다면, 그리고 웹을 사용하면서 자신이 보았던 것들과 연계해본다면 어떤 말인지 이해할 수 있으리라 생각한다.

이번 시간은, 값을 전달하기 위해서는 <form>태그의 action/method 2가지 속성을 지정하는 것이 일반적이며, 이 폼 태그 내의 입력 컨트롤들은 name 이라는 속성을 주어야 된다는 것을 알아보았다. 그리고 GET, POST의 큰 차이점도 알아보았다.

이번 강의는 asp.net(aspx) 뿐만 아니라, asp, jsp, php 등 모~든 웹프로그래밍 언어에서 어떤 값을 입력받기 위한 과정인 <form></form>태그에 관련해서는 공통적인 내용이다. 왜냐하면, 그래봐야 HTML일 뿐이기 때문이다. 연계성이 있지만, 끊을 때는 확실하게 끊어서 생각해야 한다.

HTML과, asp.net(등의 웹 프로그램 언어)은 연계성은 있지만 정말 별개다.
그저 어떻게 잘 연동해서 원하는 결과물을 내느냐가 중요할 뿐이다.

다음시간에..

저작자표시 비영리 변경금지

'ⓟrogramming > asp.net 게시판' 카테고리의 다른 글

닷넷 게시판 만들기 Part 13 - 파일 업로드 및 저장 (0)	2011.01.25
닷넷 게시판 만들기 Part 12 - 서버에서 받기 (3)	2011.01.21
닷넷 게시판 만들기 Part 10 - asp.net 을 시작하기 전에 - 태그 (0)	2011.01.19
닷넷 게시판 만들기 Part 9 - 카운터 계속. 파일 다루기. MSDN 찾기 (3)	2011.01.14
닷넷 게시판 만들기 Part 8 - 방문객 카운터 만들어보기 (1)	2011.01.12

공유하기 링크

페이스북
카카오스토리
트위터

'ⓟrogramming/asp.net 게시판' Related Articles

Comments

새로운 시작, GuyV's lIfe sTyle.

닷넷 게시판 만들기 Part 11 - 서버로 보내기 본문

닷넷 게시판 만들기 Part 11 - 서버로 보내기

'ⓟrogramming > asp.net 게시판' 카테고리의 다른 글

티스토리툴바