Written by Ssemi™(semin Seol), www.Ssemi.net
개발자는 코드를 짜면서 재사용이 많은 코드들은 라이브러리로 모아두고 사용하게 됩니다.
지금부터 소개하려는 코드는 ASP를 해오면서 가장 타이핑하기 귀찮았던 form.submit() 시켰을 당시에 Request 개체로 반환되는 Form Data들을 일목요연하게 보여주는 코드가 되겠습니다. ^_^
ASP(Active Server Pages) 웹 개발에서 가장 일반적으로 수행되는 작업 중 하나는 처리를 위해 페이지 간에 데이터를 전달하는 것입니다.
FormData가 보내지는 방식에는 POST, GET의 2가지의 방식이 존재합니다.
Request 개체는 각각의 방식에 따라 Form, QueryString 이라는 컬렉션(Collection)이 존재합니다.
POST 방식으로 보냈을 시에는 Request.Form 을 통해 받게 됩니다.
GET 방식으로 보냈을 시에는 Request.QueryString 을 통해 받게 됩니다.
물론 Request 개체만을 통해서 POST, GET의 구분 없이 받을 수도 있습니다.
다음 예제를 살펴보기로 합시다.- ex1.htmForm, QueryString 으로 구분해 받는 이유중 가장 중요한 2가지는 보안과 구분입니다.
<html>
<head>
<title>FormData GET / POST Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
</head>
<body>
<form action="getData.asp" method="GET" id="form1" name="form1">
Name : <input type="text" id="firstName" name="firstName" size="10">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
- getData.asp
<%
' method="GET" 방식일 경우
Response.Write Request.QueryString("firstName")
' method="POST" 방식일 경우
Response.Write Request.Form("firstName")
' GET, POST 구분 없이 받을 경우- 컬렉션을 사용안함
Response.Write Request("firstName")
%>
아래 예제는 구분을 보여줍니다- ex2.htm
<html>
<head>
<title>FormData GET / POST Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
</head>
<body>
<form action="getData.asp?firstName=test" method="POST" id="form1" name="form1">
Name : <input type="text" id="firstName" name="firstName" size="10">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
- getData.asp
<%
Response.Write Request.QueryString("firstName") ' test가 출력
Response.Write "<br />"
Response.Write Request.Form("firstName") ' input text에 입력한 값이 출력
%>
어떤가요? 이해가 조금은 가시는지요? 막간을 이용한 FORM-Data에 대한 설명이었습니다.
자~ 위의 예제에서 느끼게 되는 포스를 느끼게 되었는지요?
<input> 태그를 통해 Form-data로 넘기는 값을 모두 getData.asp 라는 소스파일에서 각각 Request("넘어오는값") 으로 받게 됩니다.
그런데 만약 <input>태그가 10개가 넘어간다면? 혹은 20개, 30개, .......가 된다면??
그럴때 지금부터 설명하는 코드 생성 프로시져가 빛을 발하게 됩니다.
Form-Data Check Procedure
지금부터 설명하는 프로시져는 여러분들의 반복되는 Form-data를 넘기는 과정의 ASP코딩을 한결 쉽고 편하게 도와드릴 것입니다.
본 프로시져는 3개로 구성되어져 있습니다.
- Request.Form Check Procedure
- Request.QueryString Check Procedure
- Request.Cookies Check Procedure
▶ 사용법
아래 코드를 적당한 곳(라이브러리 파일 / 공통 include 함수 파일 등)에 넣어주시고, Request를 써야만 하는 곳.즉, Form-data를 받는 파일(FORM Action="파일이름")에다가 아래 코드를 넣으면 됩니다.
- formchk()
- Response.End
▶ 코드
' Request.Form Check
Sub Formchk()
Dim key
For Each key in Request.Form
Response.Write " Dim " & key & "<BR>"
Next
For Each key in Request.Form
Response.Write key & " = " & "Trim(Request.Form("""& key &""")) " & "<BR>"
Next
Response.Write "<HR>"
For Each key in Request.Form
Response.Write key & " = " & Request.Form(key) & "<BR>"
Next
Response.Write "<HR>"
For Each key in Request.Form
Response.Write key & " = CheckWord(" & key & ")<BR>"
Next
End Sub
' Request.QueryString Check
Sub Querychk()
Dim key
For Each key in Request.QueryString
Response.Write " Dim " & key & "<BR>"
Next
For Each key in Request.QueryString
Response.Write key & " = " & "Trim(Request.QueryString("""& key &""")) " & "<BR>"
Next
Response.Write "<HR>"
For Each key in Request.QueryString
Response.Write key & " = " & Request.QueryString(key) & "<BR>"
Next
Response.Write "<HR>"
For Each key in Request.QueryString
Response.Write key & " = CheckWord(" & key & ")<BR>"
Next
End Sub
' Request.Cookies Check
Sub Cookiechk()
Dim key, dickey
For Each key in Request.Cookies
Response.Write " Dim " & key & "<BR>"
Next
For Each key in Request.Cookies
IF Request.Cookies(key).HasKeys Then
For Each dickey in Request.Cookies(key) '딕셔너리에 있는 모든 키들을 검색하기 위해 또 다른 For Each 를 사용
Response.Write "(" & key & ")(" & dickey & ") = " & Request.Cookies(key)(dickey) & "<BR>"
Next
ELSE
Response.Write key & " = " & Request.Cookies(key) & "<BR>"
End IF
Next
Response.WRite "<HR>"
For Each key in Request.Cookies
IF Request.Cookies(key).HasKeys Then
For Each dickey in Request.Cookies(key)
Response.Write dickey & " = Request.Cookies("""& key &""")("""& dickey &""") " & "<BR>"
Next
ELSE
Response.Write key & " = Request.Cookies("""& key &""")" & "<BR>"
End IF
Next
End Sub
▶ 추가 코드
아래 코드는 문자열 Replace코드입니다. Check Procedure와 같이 쓰입니다Request로 받은 Form-data를 Replace처리합니다.
'CheckWord
Function CheckWord(str)
str = Replace(str, "<", "<")
str = Replace(str, ">", ">")
str = Replace(str, "'", "''")
str = Replace(str, """", Chr(34))
str = Replace(str, "|", Chr(124))
CheckWord = str
End Function
▶ 출력 결과
' Request.Form Check Procedure Execute
Dim userid
Dim password
Dim username
Dim birth_year
Dim birth_month
Dim birth_day
Dim birth_solar
userid = Trim(Request.Form("userid"))
password = Trim(Request.Form("password"))
username = Trim(Request.Form("username"))
birth_year = Trim(Request.Form("birth_year"))
birth_month = Trim(Request.Form("birth_month"))
birth_day = Trim(Request.Form("birth_day"))
birth_solar = Trim(Request.Form("birth_solar"))
userid = ssemi
password = 1234
username = 쎄미
birth_year = 1983
birth_month = 10
birth_day = 6
birth_solar = y
userid = CheckWord(userid)
password = CheckWord(password)
username = CheckWord(username)
birth_year = CheckWord(birth_year)
birth_month = CheckWord(birth_month)
birth_day = CheckWord(birth_day)
birth_solar = CheckWord(birth_solar)
▶ 마치며
어떻습니까? 좀 더 수월하게 좀 더 편하게 코드를 만들 수 있었습니다.물론 이 코드와 비슷한 기능을 하는 프로시져 또는 함수를 구현하신 분이 많으셨으리라 생각합니다.
필요한 부분은 여러분들에 맞게 적절하게 조정해서 써야 하겠습니다.
이 코드들은 실제로 제가 가장 많이 쓰는 프로시져들 중에 하나입니다.
웹개발을 일을 하면서 가장 중요한 것은 시간과의 싸움입니다. ^_^
시스템 프로그램 개발에서 각 코드들을 컴포넌트화 시켜 개발시간을 단축시키는 것과 같이,
웹 개발도 시간을 단축시킬 수 있는 방법을 많이 찾아서 알게 되면 좋겠습니다.
Prototype 또한 Ssemi가 요긴하게 쓰고 있는 Library Collections 중 가장 쓰임새가 많은 소스 중 하나입니다
Prototype을 통해 객체들의 코딩들 + AJAX 코딩이 간편해졌지요.
사실 이해력이 부족한지, 모든 기능을 100% 발휘하지는 못 하고 있지만, 그래도 차츰 사용법에 익숙해지면서 여러부분에 대하여 넓게 활용하고 있는 편입니다.
현재 Version은 1.4.0까지 나왔으며, http://prototype.conio.net/ 에서 소스파일을 다운받으실 수 있습니다. - 제작자인 Sam Stephenson 아저씨(!)께서는 Prototype 2.0까지도 생각하고 있네요.
Prototype을 통해 관계되어진 프로젝트들(Related Projects)은 위 사이트에 등록되어 여러분들에게 보여주고 있습니다.
설명서 : Developer Notes for prototype.js - version 1.4.0 - by Sergio Pereira
아무리 많은 기능에도 역시 제가 가장 많이 사용하는건 AJAX Object 랑 $() Series네요;;;
최근에 Ssemi가 요긴하게 쓰고 있는 Library Collections 중에서 가장 쓰임새가 많은 Cross-Brower.com의 The X Library를 소개해보겠습니다.
Michael Foster라는 아저씨(!)가 만들었구요. 라이센스는 GNU LGPL입니다.
자기가 만든 X라는 장난감(my toys)를 통해 모든 사람들이 재밌고, 즐겁게 쓰길 바라는 마음에서 만들어서 알려주더라구요. - 저도 저 아저씨(!)의 마음에 캐감동(!)
invalid-file
The X Library - x.js compiled from X 4.0 with XC 0.27b
웹2.0 같은 경우에는 강박적일정도로(!) 웹 표준을 사용하여 크로스 브라우징을 실현하는데 있습니다. 거의 뭐 강박관념하에 표준 validation 통과를 목표로 하는 개발자들이 많죠 ^^;;
* Cross Browsing의 정의
Cross Browsing이란 적어도 표준 웹기술을 채 용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적 화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원 할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서 의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 테스크톱 웹브라우저 뿐만 아니라 모바일, 임베디드 기기, 홈네트워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애자, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다.
즉 웹 서비스의 모든 잠재 사용자들이 사이트에 접근할 수 있어야 한다는 것은 매우 중요한 요소라는 것이다.
위의 크로스 브라우징을 실현할려고, 브라우져 별로 변수를 만들어 코드를 설정해주고, 나눠주던 때가 기억속에 남아있는데, 그때의 어지러운 코드들을 좀 더 깔끔하게, 좀 더 편하게 만들어주는 것이 The X Library 입니다
함께 X index를 보시죠너무 많아서 눈이 돌아가죠?? @_@; 그런데 정말 유용한 DHTML 함수, 유틸리티 함수들이 포함되어있습니다.
a: xaddeventlistener, xappendchild,
b: xbackground, xbar,
c: xcapitalize, xcardinalposition, xclientheight, xclientwidth, xclip, xcollapsible, xcolor, xcreateelement,
d: xdef, xdeg, xdeletecookie, xdisabledrag, xdisplay,
e: xellipse, xenabledrag, xevaltextarea, xevent,
f: xfenster, xfirstchild,
g: xgetcomputedstyle, xgetcookie, xgetelementbyid, xgetelementsbyattribute, xgetelementsbyclassname, xgetelementsbytagname, xgetelepropsarray, xgetelepropsstring, xgeturlarguments, xglobals,
h: xhaspoint, xheight, xhex, xhide,
i: ximgasyncwait, ximgrollsetup, xinclude, xinnerhtml, xintersection,
l: xleft, xlinearscale, xloadscript,
m: xmenu1, xmenu1a, xmenu1b, xmenu5, xmoveto,
n: xname, xnextsib, xnum,
o: xoffsetleft, xoffsettop,
p: xpad, xpagex, xpagey, xparaeq, xparent, xparentchain, xpopup, xpreventdefault, xprevsib,
r: xrad, xremoveeventlistener, xresizeto,
s: xscrollleft, xscrolltop, xselect, xsetcookie, xsetietitle, xshow, xslidecornerto, xslideto, xstoppropagation, xstr,
t: xtablecellvisibility, xtablecoldisplay, xtablecursor, xtableiterate, xtablerowdisplay, xtabpanelgroup, xtimer, xtooltipgroup, xtop, xtristateimage,
v: xversion, xvisibility,
w: xwalkeletree, xwalktree, xwidth, xwinclass, xwindow, xwinopen, xwinscrollto,
z: xzindex
실제로 위 index의 링크를 들어가서 Examples을 본다면 놀랄껏이에요 ^^
이제 The X Library에 대한 소개는 마쳤네요. 직접 응용하고 실전에 사용하시는 일만 남았습니다 ^-^)/ 모두 즐거운 개발이 될 수 있도록 하세요. ^-^)
Recent comment