Ssemi Laboratory

약간은 늦게 소개시켜드리는감이 있지만, 최근(이라고 말하고 약 한달전) 아주 쓸모있게 사용하고 있는 Library가 생겼어요. ^-^v

Prototype Window Class 라는 Javascript Library입니다.

자바스크립트를 통해서 페이지 안에 윈도우를 생성하는 클래스 라이브러리입니다.

몇가지 특징을 살펴보면, 우선 가장 중요한 사항으로 브라우져에 영향을 받지 않습니다. - 크로스 브라우징이라는 것이죠.
또한 페이지 안에서 다른 URL을 불러낼 수 있습니다. 마치 IFRAME 처럼 말이죠.
그것 뿐만 아니라 창 자체를 스킨(Skinnable)화 해버려서 CSS를 수정함으로서 멋진 스킨을 만들 수 있죠.
어휴 개발자가 정말 멋진 기술을 가지고 있는지 Debug 자체를 확장해서 모듈화 해버리는 바람에 코드 자체를 수정하면서도 필요한 기능을 적당히 수정할 수 있게 만들 수 있어요.

어휴~ 뭔소린지 이해가 안되요~ 라고 말씀하시는 사람들에게는 딱 이말만 전해드리겠습니다. 이것은 제가 생각하는 가장 큰 특징입니다.
쉽게 생각해서 IE에서만 지원되던, 모달리스 창을 Prototype Window Class를 통해서 쉽게 크로스 브라우징되는 모달리스 창으로 만들 수 있다는 것이죠.

위의 내용만이 전부가 아닌것은 당연히 알고 계시리라 생각합니다.
여러 예제를 보면서 응용할 곳을 찾아보는 재미도 쏠쏠 할 것 같아요 :)
가장 많이 쓰인다고 생각되어진 부분은, 에러 메시지를 내보낼때!(404와 같은 HTTP 에러가 아니라 프로그램에서의 에러) 좀 더 유연하고 이쁜 디자인 화면의 Window가 뜨게 되겠죠.

AJAX가 유행하면서 유명해진 Lightbox JS를 시초(?)로 background에 PNG파일을 넣어 Transparent 시켜버림으로서 배경이 아웃되고, 내용이 포커스-인 되는 방법이 유행을 하고 있는가운데 Prototype Window Class 또한 위 방법을 따르고 있습니다.

이 프로그램은 프랑스 개발자인 Sébastien Gruhier 아저씨가 만들었구요. 이 아저씨 경력이 많이 화려한 만큼, 코드도 정말 잘 짜셨더라구요. 라이브러리의 이름에서도 알 수 있다 싶이 Prototype을 기반(v1.5+)으로 하고 있고, script.aculo.us의 Visual Effect를 사용하고있어요.

제가 이렇게 설명하는 것보다는 여러분들이 직접 사이트에 가보셔서 놀라셔야 할 것 같아요.
소스코드는 해당 사이트에서 다운 받으시고, 예제들을 감상하세요. 감탄입니다!

아래는 제 블로그 www.ssemi.net에 적용한 Prototype Window Class의 화면입니다.

Written by Ssemi™(semin Seol), www.Ssemi.net

Request개체로 넘어온 Form-Data 쉽게 알아내기에 이어진 라이브러리 2탄!!
웹개발을 하다보면 서버스크립트인 ASP 이외에도 클라이언트 스크립트인 Javascript의 사용은 필수입니다.

아래와 같은 코드를 보십시오.

<%

   '작업 끝! - 커넥션 풀링

   IF oCn.State = 1 Then oCn.Close

%>

<script type="text/javascript">

<!--

   window.alert('확인 테스트');

   document.location.href = '/test.asp';

// -->

</script>

<%

   Response.End

%>

위와 같이 서버/클라이언트의 구분이 있을 경우에는 코딩이 지저분해지고, 중간중간마다 <% %> 구분을 해주면서 Javascript도 함께 써야 하는 불편함이 있습니다.
바로 이와 같은 코드의 불편함을 줄여주고자 프로시져를 사용하여 에러 메시지를 출력합니다.

아래는 프로시져를 사용하여 변경한 코드입니다.

<%

    '작업 끝! - 커넥션 풀링

    IF oCn.State = 1 Then oCn.Close



    FlushError "확인 테스트", "Location", null, "/test.asp"

%>

더욱 깔끔한 코드로 만들 수 있습니다. 가독성이 더욱 뛰어나집니다. ^_^

물론 이와 같은 코드를 모두들 사용하고 계실 것이라 생각합니다.
하지만 선물세트 같이 다용도로 쓰일 수 있게 만든 프로시져라 공개해봅니다 :)


FlushError Procedure

이 프로시져는 서버/클라이언트간에 Javascript 에러 메시지 사용에 있어서 유연한 코딩을 제공해줍니다.
프로시져를 사용함으로서 얻어지는 가독성과 편리함을 느껴보세요 ^_^

▶ 사용법

FlushError 프로시져에는 4가지의 인자(Argument)가 존재합니다.

• ErrorText : 에러메시지 출력
  - 인자의 값이 Null 이거나 길이가 0 일때는 에러메시지가 나오지 않음
  
  
• nOption : 에러메시지 이후의 행동을 명령
  - Default Value : Default // history.back() or document.location.href 의 기능을 수행
  - Back // history.go(nGo)을 통해 history 이동 가능(일반적으로 history.back()의 기능의 명령)
  - Location // document.location.href 를 통해 페이지 이동을 위한 명령
  - Close // 현재 창을 닫고 싶을 때 사용
  - Opener // 부모창을 이동시키고, 현재 창을 닫는데 사용
  - Stop // 아무 반응 없음
  
  
• nGo : history.go(#) 안의 인수(#)
  - Default Value : -1 // history.back()과 같은 기능
  
  
• nPlace : Location.href 를 통해 페이지 이동시에 이동할 위치를 지정
  - Default Value : / // Rootpage

▶ 코드

Sub FlushError(ErrorText, nOption, nGo, nPlace) 

   Response.Write "<script type=""text/javascript"">" & chr(13)

   Response.Write "<!-- " & chr(13)

   

   IF Not isNull(ErrorText) And Len(ErrorText) > 0 Then

       Response.Write "window.alert('"& ErrorText &"');" & chr(13)

   End IF



   IF isNull(nOption) OR Len(nOption) = 0 Then nOption = "default"

   IF isNull(nGo) OR Not isNumeric(nGo) OR Len(nGo) > 2 OR nGo = 0 Then nGo = "-1"

   IF isNull(nPlace) OR Len(nPlace) = 0 OR isNumeric(nPlace) Then nPlace = "/"



   Select Case LCase(CSTR(nOption))

       Case "back"

           Response.Write "history.go("& nGo &");" & chr(13)



       Case "location"

           Response.Write "document.location.href='"& nPlace &"';" & chr(13)



       Case "close"

           Response.Write "self.opener = self;" & chr(13)

           Response.Write "self.close();" & chr(13)



       Case "opener"

           Response.Write "if (window.opener && window.opener != null) { " & chr(13)

           Response.Write "window.opener.location.href='"& nPlace &"';" & chr(13)

           Response.Write "window.close();" & chr(13)

           Response.Write "} else { " & chr(13)

           Response.Write "window.close();" & chr(13)

           Response.Write "}" & chr(13)



       Case "default"

           Response.Write "if (history.length>0) history.go("& nGo &");" & chr(13)

           Response.Write "else document.location.href='"& nPlace &"';" & chr(13)

       Case Else



   End Select



   Response.Write "// --> " & chr(13)    

   Response.Write "</script>" & chr(13)

   Response.End

End Sub

▶ 예제코드

' 테스트1 이라는 에러메시지 출력 후 history.back()기능 수행

FlushError "테스트1", "back", -1, 1 



' 테스트2 이라는 에러메시지 출력 후 /test.asp 로 이동

FlushError "테스트2", "location", -1, "/test.asp" 



' 테스트3 이라는 에러메시지 출력 후 현재 창을 닫음

FlushError "테스트3", "close", -1, 1



' 테스트4 이라는 에러메시지 출력 후 부모창을 /test.asp 로 옮긴 후 현재 창을 닫음

FlushError "테스트4", "opener", -1, "/test.asp"



' 테스트5 이라는 에러메시지 출력 후 멈춤

FlushError "테스트5", "stop", -1, 1



' 에러메시지 없이 /test.asp 로 이동

FlushError "", "Location", -1, "/test.asp"

* nGo, nPlcae 인자는 nOption 에 따라 쓰일 수도, 쓰이지 않을 수도 있음에 유의하여
실제 코딩시에는 FlushError "테스트", "stop", null, null 이라는 명령이 아닌
FlushError "테스트5", "stop", -1, 1 로 쓰게 되면 훨씬 코딩의 이로움이 생깁니다.

도움이 되었길 바라면서 이만 ^_^

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.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" 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")

%>

Form, QueryString 으로 구분해 받는 이유중 가장 중요한 2가지는 보안과 구분입니다.
아래 예제는 구분을 보여줍니다

- 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, "<", "&lt;")

   str = Replace(str, ">", "&gt;")

   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)

▶ 마치며

어떻습니까? 좀 더 수월하게 좀 더 편하게 코드를 만들 수 있었습니다.
물론 이 코드와 비슷한 기능을 하는 프로시져 또는 함수를 구현하신 분이 많으셨으리라 생각합니다.
필요한 부분은 여러분들에 맞게 적절하게 조정해서 써야 하겠습니다.
이 코드들은 실제로 제가 가장 많이 쓰는 프로시져들 중에 하나입니다.

웹개발을 일을 하면서 가장 중요한 것은 시간과의 싸움입니다. ^_^
시스템 프로그램 개발에서 각 코드들을 컴포넌트화 시켜 개발시간을 단축시키는 것과 같이,
웹 개발도 시간을 단축시킬 수 있는 방법을 많이 찾아서 알게 되면 좋겠습니다.