ＢＬＡＣＫＢＡＬＬ ™

개인 계정에서 블로그등의 사이트를 운영하시는 분들 중 가끔 외부에서의 컨텐츠 직링크로 인해 트래픽 초과에 걸리시는 분들이 많습니다. 트래픽 문제가 아니더라도, 무단 링크로 인해 저작권을 침해받는 경우도 있겠죠.
이를 해결하기 위해 레퍼러비교 같은 방법도 쓰곤 하는데, 아마 .htaccess 파일을 이용한 것도 많이들 아실 겁니다.

간단히, .htaccess와 워터마킹 기술을 이용해 이미지 링크 제어를 하는 법을 소개합니다.

일단, 이미지들이 저장되는 디렉토리에 .htaccess파일을 만듭니다. (이미 존재한다면 아래의 소스를 마지막에 추가하시면 됩니다.)

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} .*jpg$|.*gif$|.*png$ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !explug\.com [NC]
RewriteCond %{HTTP_REFERER} !eouia0\. [NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]
RewriteRule (.*) image.php?image=$1

...........
잠깐 설명을 하자면,

RewriteCond %{HTTP_REFERER} !explug\.com [NC]
RewriteCond %{HTTP_REFERER} !eouia0\. [NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]

이 부분에 링크를 허용할 URL들을 기재합니다. 정규식 패턴이므로 잘 알아서.. :)
위의 예의 경우 explug.com, eouia0가 포함되는 사이트, google 등에 링크를 허용한 경우입니다. 이 경우에는 원본 이미지를 마음대로 가져다 쓸 수 있습니다.
그외의 URL에서 링크가 걸릴 경우에는

RewriteRule (.*) image.php?image=$1

에 따라, image.php?image=파일이름 으로 리다이렉트됩니다. 만약 그냥 링크 자체를 끊고 싶으시다면 여기에 아무거나 써주셔도 되지요.

이제 워터마킹 처리를 위해 image.php를 작성합니다. GD라이브러리를 사용했으므로 GD가 사용가능한 계정이어야 합니다.

<?
define ("WATERMARK", "watermark.jpg");

header("Content-type: image/jpeg");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

$pic = strip_tags( $_GET['image'] );

$image_url = urldecode($pic);

if (!@fopen($image_url, "r")) {
   $dst_img = imagecreatefromjpeg(WATERMARK);
   $res = imagejpeg($dst_img, "", 100);
   die();
}

$file = pathinfo($image_url);
switch(strtoupper($file["extension"])) {
   case "JPG":
       $src_img = imagecreatefromjpeg($image_url);
       break;
   case "GIF":
       $src_img = imagecreatefromgif($image_url);
       break;
   case "PNG":
       $src_img = imagecreatefrompng($image_url);
       break;
}

$src_w = imagesx($src_img);
$src_h = imagesy($src_img);

$portion = $src_h / $src_w;
$dest_w = 300;
$dest_h = round($dest_w * $portion);

$dst_img = imagecreatetruecolor($dest_w, $dest_h);
imagecopyresized($dst_img, $src_img, 0, 0, 0, 0, $dest_w, $dest_h, $src_w, $src_h);

$watermark = imagecreatefromjpeg(WATERMARK);

$watermark_w = imagesx($watermark);
$watermark_h = imagesy($watermark);

$overlay_img = imagecreatetruecolor($watermark_w, $watermark_h);
imagecopy($overlay_img, $watermark, 0,0,0,0, $watermark_w, $watermark_h);
imagedestroy($watermark);

$white  = imagecolorallocate($overlay_img, 0xFF, 0xFF, 0xFF);
imagecolortransparent($overlay_img, $white);

$offsetX = $dest_w - $watermark_w - 3;
$offsetY = $dest_h - $watermark_h - 3;

imagecopymerge($dst_img,$overlay_img,$offsetX,$offsetY,0,0,$watermark_w,$watermark_h, 100);
imagedestroy($overlay_img);

$res = imagejpeg($dst_img, "", 100);
imagedestroy($dst_img);
?>

실행예는 링크를 보시면 이해하실 수 있을 겁니다. 링크를 허용한 사이트에서는 원본이, 링크를 허용하지 않은 사이트에서는 image.php에 의해 워터마크처리된 이미지로 링크가 걸리게 됩니다. 여기에서는 예를 위해 워터마킹 처리된 이미지의 사이즈를 가로 300으로 고정시켰지만 이 부분은 적당히 소스를 고치시면 원하는 대로 적용시키실 수 있으실 겁니다.

출처 : http://www.xul.fr/en-xml-ajax.html

The XMLHttpRequest class

Attributes

Methods

create an instance

if (window.XMLHttpRequest)     // Object of the current windows
{
       request = new XMLHttpRequest();     // Firefox, Safari, ...
}
else
if (window.ActiveXObject)   // ActiveX version
{
      request = new ActiveXObject("Microsoft.XMLHTTP");   // Internet Explorer
}

wait for the response

request.onreadystatechange = function() { // instructions to process the response };

if (request.readyState == 4)
{
   // received, OK
} else
{
// wait...
}

make the request itself

XSL 에서 데이터를 정렬(Sort)하여 보여주기!
1. 소트 명령 형식
  아래의 경우 price(가격)기준으로 오름차순으로 정렬합니다.
  내림차순으로 정렬하려면 -price 로 입력하세요...
 

      <xsl:for-each select="card/stock" order-by="price">           
2.  x13sort.xml 소스
<?xml version="1.0" encoding="euc-kr"?>
<?xml-stylesheet type="text/xsl" href="x13sort.xsl"?>
<card>
  <stock exchange="bad">
  <name>고추</name>
  <symbol>매워</symbol>
  <price>13.50</price>
  </stock>
  <stock exchange="good">
  <name>감자</name>
  <symbol>조아</symbol>
  <price>30.35</price>
  </stock>
  <stock exchange="good">
  <name>마늘</name>
  <symbol>냄새</symbol>
  <price>21.85</price>
  </stock>
  <stock exchange="good">
  <name>파</name>
  <symbol>빛깔</symbol>
  <price>17.20</price>
  </stock>
  <stock exchange="good">
  <name>무우</name>
  <symbol>외모</symbol>
  <price>23.30</price>
  </stock>
</card>
3. x13sort.xsl 소스
<?xml version="1.0" encoding="euc-kr"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
  <xsl:template match="/">
  <HTML>
  <BODY>
  <font color="red">
       1. 가격순으로보이기(오름차순) order-by="price" <br/>
  </font>
  <TABLE BORDER="2" width="50%">
     <colgroup>
        <col width="30%"></col>
        <col width="30%"></col>
        <col width="40%" bgcolor="yellow"></col>
     </colgroup>
     <TR bgcolor="#eeeeee">
       <TH>주 의</TH>
       <TH>제 품</TH>
       <TH>가 격</TH>
     </TR>
     <xsl:for-each select="card/stock" order-by="price">
     <TR>
         <TD><xsl:value-of select="symbol"/></TD>
         <TD><xsl:value-of select="name"/></TD>
         <TD><xsl:value-of select="price"/></TD>
     </TR>
     </xsl:for-each>
  </TABLE><br/><br/>
  <font color="red">
      2. 가격순으로보이기(내림차순) order-by="-price" <br/>
  </font>
  <TABLE BORDER="2" width="50%">
     <colgroup>
        <col width="30%"></col>
        <col width="30%"></col>
        <col width="40%" bgcolor="yellow"></col>
     </colgroup>
     <TR bgcolor="#eeeeee">
       <TH>주 의</TH>
       <TH>제 품</TH>
       <TH>가 격</TH>
     </TR>
     <xsl:for-each select="card/stock" order-by="-price">
     <TR>
         <TD><xsl:value-of select="symbol"/></TD>
         <TD><xsl:value-of select="name"/></TD>
         <TD><xsl:value-of select="price"/></TD>
     </TR>
     </xsl:for-each>
  </TABLE><br/><br/>
  <font color="red">
      3. 제품순으로보이기(오름차순) order-by="name" <br/>
  </font>
  <TABLE BORDER="2" width="50%">
     <colgroup>
        <col width="30%"></col>
        <col width="30%" bgcolor="yellow"></col>
        <col width="40%"></col>
     </colgroup>
     <TR bgcolor="#eeeeee">
        <TH>주 의</TH>
        <TH>제 품</TH>
        <TH>가 격</TH>
     </TR>
     <xsl:for-each select="card/stock" order-by="name">
     <TR>
         <TD><xsl:value-of select="symbol"/></TD>
         <TD><xsl:value-of select="name"/></TD>
         <TD><xsl:value-of select="price"/></TD>
     </TR>
     </xsl:for-each>
  </TABLE><br/><br/>
  <font color="red">
     4. 제품순으로보이기(내림차순) order-by="-name" <br/>
  </font>
  <TABLE BORDER="2" width="50%">
     <colgroup>
       <col width="30%"></col>
       <col width="30%" bgcolor="yellow"></col>
       <col width="40%"></col>
     </colgroup>
     <TR bgcolor="#eeeeee">
        <TH>주 의</TH>
        <TH>제 품</TH>
        <TH>가 격</TH>
     </TR>

     <xsl:for-each select="card/stock" order-by="-name">
     <TR>
        <TD><xsl:value-of select="symbol"/></TD>
        <TD><xsl:value-of select="name"/></TD>
        <TD><xsl:value-of select="price"/></TD>
     </TR>
     </xsl:for-each>
  </TABLE><br/><br/>

</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
  실행결과 :
1. 가격순으로보이기(오름차순) order-by="price"
주 의    제 품    가 격
매워    고추    13.50
빛깔    파    17.20
냄새    마늘    21.85
외모    무우    23.30
조아    감자    30.35

2. 가격순으로보이기(내림차순) order-by="-price"
주 의    제 품    가 격
조아    감자    30.35
외모    무우    23.30
냄새    마늘    21.85
빛깔    파    17.20
매워    고추    13.50

3. 제품순으로보이기(오름차순) order-by="name"
주 의    제 품    가 격
조아    감자    30.35
매워    고추    13.50
냄새    마늘    21.85
외모    무우    23.30
빛깔    파    17.20

4. 제품순으로보이기(내림차순) order-by="-name"
주 의    제 품    가 격
빛깔    파    17.20
외모    무우    23.30
냄새    마늘    21.85
매워    고추    13.50
조아    감자    30.35

***************예제2*****************************
XSL - 마우스로 메뉴클릭시 "소트"하여 보이기

JavaScript

JavaScript - Sort
  function sort(key) {
    mm="*/xsl:template[@match="menu"]//xsl:apply-templates/@order-by"
    var s = document.XSLDocument.selectNodes(mm);
    for (var i = s.nextNode(); i != null; i = s.nextNode())
      {
      i.value = key;
      }
    var d = document.XMLDocument.selectSingleNode("story/menu");
    menu.innerHTML = d.transformNode(document.XSLDocument);
  }
 
XML 문서의 소스입니다.

x17sortdisp.xml

<?xml version="1.0" encoding="euc-kr"?>
<?xml:stylesheet type="text/xsl" href="x17sortdisp.xsl"?>

<book>
  <menu>
  <card>
     <name>엉터리 국밥</name>
     <price>900 원</price>
  </card>
  <card>
     <name>멀건 국수</name>
     <price>200 원</price>
  </card>
  <card>
     <name>형편없는 라면</name>
     <price>100 원</price>
  </card>
  <card>
     <name>넘질긴 냉면</name>
     <price>300 원</price>
  </card>
  <card>
     <name>냄새만 갈비탕 </name>
     <price>700 원</price>
  </card>
  <card>
     <name>허연 짜장밥 </name>
     <price>600 원</price>
  </card>
  </menu> 
</book>

XSL 문서의 소스입니다.

x17sortdisp.xsl

<?xml version="1.0" encoding="euc-kr"?> 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" > 
 
<xsl:template> 
  <xsl:apply-templates/> 
</xsl:template> 
 
<xsl:template match="text()"> 
  <xsl:value-of/> 
</xsl:template> 
 
<xsl:template match="/"> 
<HTML> 
  <HEAD> 
  <TITLE>XSL-DOM Sort</TITLE> 
  <STYLE> 
  .my  { color: blueviolet; font-family: Times, serif;  
          background:bisque;vertical-align: top;} 
  </STYLE> 

  <SCRIPT language="JavaScript"><xsl:comment><![CDATA[ 
 
  function sort(key)
{ 
  mm="*/xsl:template[@match="menu"]//xsl:apply-templates/@order-by" 
      var s = document.XSLDocument.selectNodes(mm); 
      for (var i = s.nextNode(); i != null; i = s.nextNode())  { 
         i.value = key; 
      } 
      var d = document.XMLDocument.selectSingleNode("book/menu"); 
      menu.innerHTML = d.transformNode(document.XSLDocument); 
} 
  ]]></xsl:comment></SCRIPT> 
  </HEAD> 
 
  <BODY> 
  <TABLE WIDTH="400" CELLSPACING="8"> 
  <TR> 
  <TD> 
     <DIV id="menu"> 
       <xsl:apply-templates select="book/menu"/> 
     </DIV> 
     <P> 
       <A href="javascript:sort("price")"> Price Order </A><br/> 
       <A href="javascript:sort("-price")"> -Price Order </A><br/> 
       <A href="javascript:sort("name")">  Name Order </A><br/> 
       <A href="javascript:sort("-name")"> -Name Order </A> 
     </P> 
  </TD> 
  </TR> 
  </TABLE> 
  </BODY> 
</HTML> 

</xsl:template> 

<xsl:template match="menu"> 
  <TABLE CELLSPACING="3"> 
    <xsl:apply-templates select="card" order-by="name"/> 
  </TABLE> 
</xsl:template> 
 
<xsl:template match="card"> 
  <TR> 
    <TD class="my" width="200">
       <xsl:value-of select="name"/>
    </TD> 
    <TD class="my" VALIGN="bottom" width="100">
       <xsl:value-of select="price"/>
    </TD> 
  </TR> 
</xsl:template> 
 
</xsl:stylesheet>




실행결과 :
냄새만 갈비탕     700 원
넘질긴 냉면     300 원
멀건 국수     200 원
엉터리 국밥     900 원
허연 짜장밥     600 원
형편없는 라면     100 원
Price Order -Price Order Name Order -Name Order