웹 개발에 참고할 만한 곳


웹서핑 하다가 우연히 찾은 곳
Ajax 등이 사용하기 간편하게 클래스로 구현되어 있다.
그 외에도 한 번 둘러보면 괜찮을 듯한 자료들이 있는 듯.

NHN UI Develope Guide

http://html.nhndesign.com/

xml을 html로 출력하기

xml을 html로 출력하려면

[CODE type=html]
<br /> xml 문서 내용<br />
[/HTML][/CODE]

이렇게 해주면 되네요.

테터툴즈 로그인

갑자기 테터툴즈 로그인이 안되더군요.

나중에 알고보니 tt_Sessions테이블이 깨져서 로그인이 되지 않았던 것이였습니다.

repair table tt_Sessions

sql 콘솔에서 이렇게 치면 된다는데...

제가 받고 있는 웹호스팅은 텔넷이나, ssh를 지원해 주지 않습니다.
(무료 호스팅의 비애)

결국 tt_sessions테이블을 drop 시키고,

setup.php안의 내용에 있는..

CREATE TABLE tt_Sessions (
  id varchar(32) NOT NULL default '',
  address varchar(15) NOT NULL default '',
  userid int(11) default NULL,
  preexistence int(11) default NULL,
  data text default NULL,
  server varchar(64) NOT NULL default '',
  request varchar(255) NOT NULL default '',
  referer varchar(255) NOT NULL default '',
  timer float NOT NULL default '0',
  created int(11) NOT NULL default '0',
  updated int(11) NOT NULL default '0',
  PRIMARY KEY  (id,address)
)


내용을 보고 직접 테이블을 생성하니 로그인이 되는군요.

자스크립트로 마우스 위치 얻기(IE, FF)

자바스크립트를 사용해 마우스 좌표를 얻고자 한다. 마우스 좌표를 얻기 위해서는 이벤트 객체를 이용해야 하는데, Internet Explorer(이하 IE)와 Firefox(이하 FF)가 이벤트 객체를 이용하는 방법이 서로 틀리다. IE의 경우를 먼저 살펴 보자.
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

   function doMove()
   {
       var divLayer = document.getElementById('result');
       var x, y;

       x = event.x;
       y = event.y;

       divLayer.innerHTML = "| " + x + " X " + y + " |";
   }

//-->
</SCRIPT>
<DIV id=captureObj onmouseover="this.setCapture();" onmouseout="this.releaseCapture();" 
     onmousemove="doMove();">Mouse Pointer Over</DIV>
<DIV id=result style=color:red></DIV>
</DIV>
</BODY>

이것이 IE에서 마우스 위치를 얻는 전체 소스 이다. 먼저, 움직임을 감지할 영역 captureObj를 잡는다. 이 영역에 마우스가 올라가면 captureObj의 setCapture() 메소드를 이용해 마우스 위치 추적을 시작한다. 이 영역에서 마우스가 빠져나가면 releaseCapture() 메소드를 이용해 마우스 위치 추적을 종료 한다. 마우스의 좌표는 event객체의 x, y를 이용해 얻을 수 있다. FF의 경우를 살펴 보자
<BODY onload="initMouseCapture();">
<SCRIPT LANGUAGE="JavaScript">
<!--

  var eventValue;   

  function doMove()
   {
       var divLayer = document.getElementById('result');
       var x, y;

       x = eventValue.pageX;
       y = eventValue.pageY;

       divLayer.innerHTML = "| " + x + " X " + y + " |";
   }

   function SaveMouseEvent(e)
   {
      eventValue = e;
   }

   function initMouseCapture()
   {
           document.addEventListener('mousemove',SaveMouseEvent,false);
   }   

//-->
</SCRIPT>
<DIV id=captureObj onmousemove="doMove();">Mouse Pointer Over</DIV>
<DIV id=result style=color:red></DIV>
</DIV>
</BODY>
 

이것이 FF에서 마우스 위치를 얻기위한 전체 소스이다. FF에서는 일단 이벤트로 등록을 해야한다. body의 onload에서 SaveMouseEvent함수를 mousemove이벤트의 이벤트 리스너로 등록을 한다. 이벤트 리스너로 등록된 SaveMouseEvent함수는 파라미터로 이벤트 객체를 받고 전역변수에 발생한 이벤트 객체를 저장해 둔다. captureObj 위에서 마우스가 움직이면, 전역변수 eventValue의 pageX, pageY를 참조해 마우스 좌표를 얻는다. 이렇게 각 브라우져 마다 마우스 위치를 얻는 방법은 알았다. 그럼 브라우져 구분은 어떻게 할까?
    function checkIE()
   {
       if (navigator.appName == "Microsoft Internet Explorer")
           isIE = true;
       else
           isIE = false;
   }
 

부라우져를 구분하는 함수를 하나 만들었다. navigator객체의 appName 값을 확인해 보면 알 수있다. 이제까지의 방법을 이용해 IE와 FF에서 모두 동작하는 스크립트를 작성해 보자.
<BODY onload="initMouseCapture();">
<SCRIPT LANGUAGE="JavaScript">
<!--

   var isIE;
   var eventValue;

   function checkIE()
   {
       if (navigator.appName == "Microsoft Internet Explorer")
           isIE = true;
       else
           isIE = false;
   }

   function startMouseCapture(objCapture)
   {
       if ( isIE == false )
           return;

       objCapture.setCapture();
   }

   function endMouseCapture(objCapture)
   {
       if ( isIE == false )
           return;

       objCapture.releaseCapture();
   }

   function doMove()
   {
       var divLayer = document.getElementById('result');
       var x, y;

       if ( isIE == false )
       {
           x = eventValue.pageX;
           y = eventValue.pageY;
       }
       else
       {
           x = event.x;
           y = event.y;
       }

       divLayer.innerHTML = "| " + x + " X " + y + " |";
   }

   function SaveMouseEvent(e)
   {
      eventValue = e;
   }

   function initMouseCapture()
   {
       checkIE();

       if (isIE == false)
       {
           document.addEventListener('mousemove',SaveMouseEvent,false);
       }
   }   

  
//-->
</SCRIPT>
<DIV id=captureObj onmouseover="startMouseCapture(this);" 
    onmouseout="endMouseCapture(this);" onmousemove="doMove();">
<TABLE height=100 width=100 border=0 bgcolor=#66CC66>
<TR align=center>
   <TD align=vcenter>Mouse Pointer Over</TD>
</TR>
</TABLE>

</DIV>
<DIV id=result style=color:red></DIV>
</DIV>
</BODY>
 


이 코드는 FF 1.5.0.3, IE 6.0.2900.2180에서 테스트 해보았다.



테터툴즈에서 내 도메인을 리퍼러에 나오지 않게 하기

제가 사용중인 도메인을 /blog로 리다이렉트 시켜 사용하고 있습니다.
이렇게 하다보니 리퍼러로 내 도메인이 등록이 되더군요.

내 도메인을 없엘 방법을 찾다가 ViewRefererURL라는 이벤트를 이용해
플러그인을 제작하려고 했는데 ViewRefererURL이벤트 만으로는 목록에서 아예 없에질 못하더군요.

어쩔 수 없이 테터소스를 수정했습니다.

root/trunk/blog/owner/statistics/referer/index.php

의 파일에서

534라인

foreach(getRefererStatistics($owner) as $record){

       $i++;

562라인

foreach(getRefererLogs() as $record){

       $i++;

이 부분에 foreach문 아래 $i++;위에

if( strcmp($record['host'], $_SERVER['SERVER_NAME'] ) == 0 ) continue;

를 추가해 넣었습니다.

이렇게 하니 내 도메인이 리퍼러 목록에서 나오지 않네요.

이미지 링크 방지된것 뚫기

원문 URL
http://blog.naver.com/siso821/20001194757

소켓을 이용해 이미지를 직접 받아 보여준다는 내용 같은데,

직접 테스트 해보지는 않았습니다.


[원문]=-=-=-=-=-=-=-=-=--=-=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
꼭 네이버에 해당하는건 아니지만 이미지 링크방지된곳을 뚤 수 있다는 대강의;;내용입니다

그냥 링크 : <IMG SRC="
http://blogfiles13.naver.net/data1/2004/2/21/44/kaegukgi.gif" />
프로그램 링크 : <IMG SRC="
http://wince.or.kr/php-bin/link.html?url=http://blogfiles13.naver.net/data1/2004/2/21/44/kaegukgi.gif" />


<?php
function link_data($url, $ref='')
{
$urls=explode('/', $url);
$host=$urls[2];
$page=str_replace("http://$host", "", $url);
$request_header  = "GET $page HTTP/1.0\r\n";
$request_header .= "Host: $host\r\n";
$request_header .= "Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, */*\r\n";
$request_header .= "Accept-Language: ko\r\n";
$request_header .= "Accept-Encoding: gzip, deflate\r\n";
if($ref) $request_header .= "Referer: ".$ref."\r\n";
$request_header .= "User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)\r\n";
$request_header .= "Cache-Control: no-cache\r\n";
$request_header .= "Connection: Keep-Alive\r\n";
$request_header .= "Content-Type: application/x-www-form-urlencoded\r\n";
$request_header .= "\r\n";

$socket = @fsockopen($host,80,$errno,$errstr,30);
if($socket){
fwrite($socket,$request_header);
do $header .= fread($socket,1); while (!preg_match('/\\r\\n\\r\\n$/',$header));

if (preg_match('/Transfer\\-Encoding:\\s+chunked\\r\\n/',$header)) {

do {
$byte = "";
$chunk_size="";
do {
$chunk_size.=$byte;
$byte=fread($socket,1);
} while ($byte!="\\r");

fread($socket, 1);
$chunk_size = hexdec($chunk_size);
$result .= fread($socket,$chunk_size);
fread($socket,2);
} while ($chunk_size);

} else {
if(preg_match('/Content\\-Length:\\s+([0-9]*)\\r\\n/',$header,$matches)) {
$result = fread($socket,$matches[1]);
}else{
while (!feof($socket)) $result .= fread($socket, 4096);
}
}

fclose($socket);
} else {
die('Server Connect Error');
}
return $result;
}


echo link_data($_GET[url], '
http://blog.naver.com');
?>

proxy 서버를 이용한 웹 서핑

회사에서 싸이월드를 막나왔군요. 머 제가 싸이월드를 운영하고 있지는 않지만, 막아놨다는 말을 듣고 한번 들어가 봤습니다. 역시 Proxy를 통하면 접속이 가능하네요. 대부분의 Proxy서버는 외국으로 속도가 느리지만, 우리나라에도 Proxy서버가 생각보다 많이 있네요. Proxy 서버 리스트 여기에서 몇페이지 넘어가면 Korea가 있습니다.

UTF-8 인코딩 방식으로 다국어 페이지 만들기

1. 일반 Ansi 형식이 아닌 UTF-8형식의 Text파일로 스크립트 파일을 저장합니다.

2. <% @Codepage = "65001" %>
서버 스크립트 최상단에 위의 코드를 넣어줍니다.

3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 html 해더부에 위의 코드를 넣어 줍니다.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
예재 소스 입니다.

inputUnicode.html
------------------------------------------------------------
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>

<BODY>
<FORM METHOD=POST ACTION="testUnicode.asp">
<INPUT TYPE="text" NAME="uniText" size=100>
<INPUT TYPE="submit">
</FORM>
</BODY>
</HTML>


testUnicode.asp
------------------------------------------------------------
<% @Codepage = "65001" %>
<!--#include virtual="/include/dbcon.asp"-->
 <!--#include virtual="/include/function.asp"-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>

<BODY>
<%
Set db=Server.CreateObject("ADODB.Connection")
db.Open DbConstring


'-------------------------------------------------------------
'  유니코드 DB에 넣기 테스트
'-------------------------------------------------------------

if  request("uniText") <> "" then


response.write "<hr><br><B>DB넣기<U></U></B><br>"

sql = "INSERT INTO tblText ( test ) values ( N'" & request("uniText") & "')"
response.write sql & "<br>"

db.Execute sql

response.write "<br>넣은값 : " & request("uniText") & "<br>"


end if

'-------------------------------------------------------------
'  유니코드 DB에 읽기 테스트
'-------------------------------------------------------------
response.write "<hr><br><B>DB읽기</B><br>"

sql = "select test from tblText"

Set rs = Server.CreateObject("ADODB.RecordSet")
rs.Open sql, db

Do until rs.EOF

       response.write "<br>" & stripHTML(rs("test")) & "<br>"
 
  rs.MoveNext  
Loop


%>
</BODY>
</HTML>


function.asp
------------------------------------------------------------

<%
Function stripHTML(strHTML)

strHTML = Replace(strHTML, "<", " & l t ;")   ' 사용할땐 공백없애고요
strHTML = Replace(strHTML, ">", "& g t ;")

stripHTML = strHTML

End Function


%>


dbcon.asp는 상황에 따라..^^

그리고, mssql의 tblText 테이블의 test 필드는 nvarchar형이어야 합니다.

자바스크립트용 email 주소 검사 함수

function CheckMail( str )
{
       var regValidMail=/^[^@]+@[^\.]+[\.][^$]+$/g;

   if( regValidMail.test(str)  )
       {
               return true;
   }
   return false;
}

mssql -> mysql

mssql에는 shift-jis나 gb2312등 ansi 캐릭터셋의 데이타가 각각 다른 테이블에 저장되어 있다.

이것을 mysql의 ansi캐릭터셋 데이터로 저장 하고자 한다.

mssql의 ansi 데이타를 mysql에 utf-8로 저장해 사용할까도 생각을 했지만,
기존 웹사이트 자체가 ansi 캐릭터셋을 사용하고 있어서 utf-8로 저장해 사용 할 경우 전체 웹사이트를 utf-8로 작업해 주거나, 매번 utf-8로 저장된 데이타를 ansi데이타로 변환해 보여줘야하기 때문에 페이지 로딩이 길어질까봐 일단 ansi데이타로 저장해 놓고, 차후 리뉴얼등을 통해 전체 사이트를 utf-8로 변환 할 기회가 생기면 db의 데이타 역시 그 때 변환하기로 했다..( 게으름.. 지연평가:to be lazy라 말하고 싶은..^^;; )

불행이도 두 서버간에 직접 데이타를 교환 하는 방법은 모두 지원하지 않았다.
( 둘다 각각 다른 호스팅 업체 이다 보니..ㅜ.ㅠ )

뭐 DB잘하시는 분들이야 mssql의 DTS를 이용해 방법이 있으시겠지만,
불행이도 난 DB를 잘 몰랐다.. ( 기껏해야 간단한 쿼리 날리는 정도.. )

어쩔수 없이 mssql의 데이타를 직접 받아 mysql에 넘겨주어야한다.
mysql의 경우 phpMyAdmin 에서 쿼리가 저장된 text문서를 업로드해 대량으로 데이타를 입력하는 방법이 존재했다.

1. mssql의 ansi 캐릭터셋 데이타를 받아오자.
  ansi캐릭터셋의 데이타를 text형태로 받아오면 euc-kr이 아닌경우
  정상적으로 받아오지 못하는 경우가 있었다.
  어쩔수 없이 mssql의 DTS를 이용해 text형태로 저장한다.
  이때 데이타 깨짐을 방지하기 위해 유니코드text, 레코드 구분 중앙선(|),
  필드구분 탭, 문자열 묶음 기호는 없음으로 했다.

2. 유니코드 text파일을 편집해 쿼리문으로 만들자.
  이때 사용한 툴은 울트라에디터 이다. 에디터플러스의 경우
  유니코드 text를 copy & paste하는 과정에서 데이타가 깨지는 현상이 발생했다.
  울트라에디터에서 아래의 순서로 치환해 쿼리는 말들었다.
    가. 따옴표(') -> 쌍따옴표(")
    나. 엔터(^p) -> html줄바꿈(<br>)
    다. 탭( ^t) -> 쿼리 중간 구분자 (', ')
    라. 중앙선(|) -> 쿼리 끝문장, 시작문장 ( '); ^p insert into xxxxxx value ( ' )
  이런 순으로 치환을 했다.

3. 유니코드 text파일을 특정 캐릭터셋의 ansi 문서로 저장한다.
  phpMyAdmin이 유니코드text파일이나, utf-8 text파일을 인식하지 못해
  어쩔 수 없이 ansi text문서로 만들어야 했다.
  이건 간단히 MFC를 이용해 유니코드 text파일을
  특정 캐릭터셋의 ansi문서로 저장해 주는 유틸을 만들어 변환했다.

4. phpMyAdmin을 이용해 데이타를 저장한다.
  이때 간혹 쿼리문이 잘못되어 중간에 실패하는 경우가 있는데.
  ansi 캐릭터셋의 문서는 에디터플러스를 이용해 편집했다.
  ( 울트라 에디터의 경우 ansi문서를 copy & paste하는 과정에서
    데이타 깨짐현상이 발행했다.
    asni, unicode를 완변하기 지원하는 text편집기는 메모장 뿐이란말인가 ㅜ.ㅠ )

이렇게 힘겹게 힘겹게 데이타 변환 작업을 수행했다.