'분류 전체보기'에 해당되는 글 2491건

  1. 2009.04.16 네이버 콤보스타일 셀렉트 메뉴
  2. 2009.04.16 엑셀처럼 리사이즈 되는 td 만들기 table
  3. 2009.04.16 네비게이션 메뉴바 만들기
  4. 2009.04.15 oracle MERGE 한번에 조건에 따라 INSERT,UPDATE 가 가능합니다.
  5. 2009.04.15 홈페이지 품질관리 및 개인정보 노출현황 점검 툴
  6. 2009.04.14 IPlanet 6.1 인증서 설치 매뉴얼
  7. 2009.04.14 TCP 네트워크로부터 읽고 쓰기
  8. 2009.04.14 플래시 메뉴 만들기
  9. 2009.04.13 달력 스크립트
  10. 2009.04.13 Solaris 8에서 Apache 1.3.27과 Tomcat 4.1.24 연동하기
  11. 2009.04.13 오라클 - 실수로 Delete 후 commit 한 자료 복원하기 1
  12. 2009.04.13 오라클 10g 에서의 CLOB처리
  13. 2009.04.13 was 별 clob 처리..
  14. 2009.04.11 큐브리드 기초자료
  15. 2009.04.11 리눅스 기본명령어
  16. 2009.04.10 접근성을 해치지 않는 자바스크립트의 사용
  17. 2009.04.10 Weblogic 8.1.5 + Sun Java System Web Server 6.1 SP6 연동
  18. 2009.04.10 WebLogic Platform 8.1 Installation
  19. 2009.04.10 WebLogic Server 8.1을 설치
  20. 2009.04.07 블러그 소스 코드 부분 깔끔 편집 - syntaxhighlighter
  21. 2009.04.07 UNION ALL 과 ORDER BY 섞어서 쓰기
  22. 2009.04.07 각각의 게시판에서 제일 최근글하나씩을 모아 정렬
  23. 2009.04.07 rownum 으로 범위지정을 해주고 싶을 때
  24. 2009.04.07 현재페이지를 알아오는 방법
  25. 2009.04.07 쿠키정보를 확인하고 활용할수 있는 코드
  26. 2009.04.07 새창을 데이타 크기에 따라서 자동조절되는 프린트 화면
  27. 2009.04.07 javascript 디버깅 툴 - Companion.JS
  28. 2009.04.07 javascript 에서 html value 값을 버전관계없이 바꾸고 싶을때
  29. 2009.04.07 동적으로 테이블을 추가하는 방법과 Disable 처리 예제 1
  30. 2009.04.07 javascript 에서 input 값에 숫자이외의 글 입력막기
반응형
<html>
<head>
    <title>http://technote.co.kr</title>
<style>
    #bannerbox .oherpromotion {display:inline; position:relative; float:left; margin:3px 11px 0 0 ; }
    #bannerbox .oherpromotion h3 {float:left; width:188px; height:20px; background:url(http://imgshopping2.naver.com/2007/new/main/bg_oftenview.gif) no-repeat left top; color:#666; font-weight:normal; font-size:12px; text-align:left; letter-spacing:-1px}
    #bannerbox .oherpromotion h3 a {display:block; width:184px; height:16px; padding:4px 0 0 7px; color:#666; text-decoration:none;}
    #bannerbox .oherpromotionlist {position:absolute; left:0px; top:18px; width:188px; background:url(http://imgshopping2.naver.com/2007/new/main/bg_ranking_list_mid.gif) repeat-y left top; z-index:100;}
    #bannerbox .oherpromotioninner {background:url(http://imgshopping2.naver.com/2007/new/main/bg_ranking_list_bottom.gif) no-repeat left bottom;}
    #bannerbox .oherpromotionlist ul {width:158px; margin:0 8px; padding:3px 0; overflow:hidden;}
    #bannerbox .oherpromotionlist li {width:100%; padding:6px 0 4px 0; background:url(http://imgshopping2.naver.com/2007/new/rankingshop/dot_gray01.gif) repeat-x left top; font-size:12px; vertical-align:top; line-height:1em; letter-spacing:-1px; text-align:left;}
    #bannerbox .oherpromotionlist li a {padding-left:15px; background:url(http://imgshopping2.naver.com/2007/new/rankingshop/bu_arrow02.gif) no-repeat 3px top; color:#7f7f7f;}
    #bannerbox .oherpromotionlist li a:hover {color:#64a32f;}

</style>
<script>
function toggleView(target){
    var sTarget = target.href.split("#");
    var aTarget = document.getElementById(sTarget[sTarget.length-1]);
    if(aTarget.style.display == "none") aTarget.style.display = "block";
    else aTarget.style.display = "none";   
}
</script>
</head>
<body>
<div id="bannerbox">
    <div class="oherpromotion">
    <h3><a href="#oherpromotionview" onClick="toggleView(this); return false;" onfocus=this.blur()>네이버 콤보스타일 메뉴</a></h3>
        <div id="oherpromotionview" class="oherpromotionlist" style="display:none;">
            <div class="oherpromotioninner">
                <ul>
                    <li><A HREF="http://technote.co.kr">테크 1</A>
                    <li><A HREF="http://technote.co.kr">테크 2</A>
                    <li><A HREF="http://technote.co.kr">테크 3</A>
                    <li><A HREF="http://technote.co.kr">테크 4</A>
                    <li><A HREF="http://technote.co.kr">테크 5</A>
                    <li><A HREF="http://technote.co.kr">테크 6</A>
                    <li><A HREF="http://technote.co.kr">테크 7</A>
                    <li><A HREF="http://technote.co.kr">테크 8</A>
                    <li><A HREF="http://technote.co.kr">테크 9</A>
                    <li><A HREF="http://technote.co.kr">테크 10</A>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
 
Posted by 1010
반응형

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=euc-kr">

<style>
.ellipsis  {font:9pt "굴림"; width:100%; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.colresize {font:9pt "굴림"; cursor:""; }
.input_box {width:expression(this.parentNode.clientWidth-8); }
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
// 자료출처 : phpschool.com ==> kisses
var mousedown = false; //마우스를 누른 상태
var td = "";           //사이즈 변경할 td
var td_width;          //변경할 td의 width,
var x = 0;             //마우스 드레그전 가로위치

function TCstartColResize(obj){
       mousedown = true;
       td = obj;
       td_width = td.width;
       x = event.clientX;
}
function TCColResize()
{
       if (mousedown){
              var distX = event.x - x; //이동한 간격
              td.width = parseInt(td_width) + parseInt(distX);
       }
}
function TCstopColResize(){
       mousedown = false;
       td = '';
}

function cell_left(obj){//마우스가 셀의 왼쪽인지 측정
       if(event.offsetX < 5 && obj.cellIndex!=0)
              return true;
       else
              return false;
}
function cell_right(obj){//마우스가 셀의 오른쪽인지 측정
       if(event.offsetX > obj.width-4)
              return true;
       else
              return false;
}

//리사이즈시작
document.onmousedown = function(){
try{
       var now_mousedown = window.event.srcElement;
       if(now_mousedown.className.toUpperCase()=="COLRESIZE"){
              if( cell_left(now_mousedown) ){
                     now_mousedown = now_mousedown.parentNode.childNodes[now_mousedown.cellIndex-1];
              }else if( !cell_right(now_mousedown) ){
                     return true;//오른쪽도 왼쪽도 아니면 사이즈 조절 안함
              }
              TCstartColResize(now_mousedown);
       }
}catch(e){ return true; }
}

//리사이즈
document.onmousemove = function(){
try{
       var now_mousemove = window.event.srcElement;
       if(now_mousemove.className.toUpperCase()=="COLRESIZE" || td!=""){

              //셀의 가장자리면 마우스 커서 변경
              if( cell_left(now_mousemove) || cell_right(now_mousemove) ){
                     now_mousemove.style.cursor = "col-resize";
              }else{
                     now_mousemove.style.cursor = "";
              }

              TCColResize(now_mousemove);
       }else{
              now_mousemove.style.cursor = "";
    }
}catch(e){ return true; }
}

//리사이즈종료
document.onmouseup = function(){
try{
       var now_mouseup = window.event.srcElement;
       //if(now_mouseup.className=="colResize"){
              TCstopColResize(now_mouseup);
       //}
}catch(e){ return true; }
}

//리사이즈 도중 텍스트 선택 금지
document.onselectstart = function(){
try{
    if(td != ""){
        return false;
    }
}catch(e){ return true; }
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<div style="width:100%;height:100;overflow-x:auto;overflow-y:auto">
    <table width="430" border="0" cellpadding="3" cellspacing="1" bgcolor="#B8B8B8" nowrap style='table-layout:fixed'>
        <tr bgcolor="#A5D4D2" align="center" height="25">
            <td width="35"  class="colresize">선택</td>
            <td width="35"  class="colresize">순번</td>
            <td width="70" class="colresize">품목명</td>
            <td width="30"  class="colresize">수량</td>
            <td width="50"  class="colresize">단위</td>
            <td width="70"  class="colresize">날짜</td>
            <td width="70"  class="colresize">장소</td>
            <td width="70" class="colresize">비고</td>
        </tr>
        <tr bgcolor="#FFFFFF" height="27" align="center">
            <td><Input type="radio" name="radio"></td>
            <td>1</td>
            <td><input type='text' class="input_box"></td>
            <td><input type='text' class="input_box"></td>
            <td><select class="input_box"><option>EA</option></select></td>
            <td><input type='text' class="input_box"></td>
            <td><input type='text' class="input_box"></td>
            <td nowrap class="ellipsis">비고 비고 비고 비고 비고 비고 비고 비고 비고</td>
        </tr>
    </table>
</div>
</BODY>
</HTML>

Posted by 1010
반응형

<style type="text/css">

#minitabs{
margin:0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}

#minitabs li{
margin: 0;
padding: 0;
display: inline;
list-style-type:none;
}



#minitabs a{
 float: left;
 line-height: 14px;
 font-weight: bold;
 margin: 0 10px 4px 10px;
 text-decoration:none;
 font-size: 12px;
 color: #9c9; // 처음 보이는 기본 색깔
}


#minitabs a.active, #minitabs a:hover {
 border-bottom: 4px solid #232; // 글씨 위에 마우스 올릴때  라인 색깔
 padding-bottom: 2px; //글씨에 라인이 떨어질 위치(거리)

 color: #344;  // active 되었을때 색깔
}


 

#minitabs a:hover{
color: #696; // 글씨 위에 마우스 올릴때 색깔
}


</style>


<body>

<ul id="minitabs">
<li><a href="#" class="active">링크</a></li>   // 하이라이트된 탭이 계속 켜져있게 하기
<li><a href="#">책</a></li>
<li><a href="#">영화</a></li>
<li><a href="#">음악</a> </li>
</ul>
</body>

Posted by 1010
02.Oracle/DataBase2009. 4. 15. 11:35
반응형
MERGE

 - 한번에 조건에 따라 INSERT,UPDATE 가 가능합니다.
 - 해당 ROW가 있으면 UPDATE, 없으면 INSERT 문장이 실행 됩니다.
 
 
 ◈syntax
MERGE INTO target_table_name
      USING (table|view|subquery) ON (join condition)
WHEN MATCHED THEN
     UPDATE SET col1 = val1[, col2 = val2…]
WHEN NOT MATCHED THEN
     INSERT(...) VALUES(...)
 

 ◈ syntax 설명
 - INTO : DATA가 UPDATE되거나 INSERT될 TABLE이름을 지정 합니다.

 - USING : 대상 TABLE의 DATA와 비교한 후 UPDATE 또는 INSERT할 대상이 되는 DATA의 SOURCE 테이블 또는 뷰를 지정
 - ON  : UPDATE나 INSERT를 하게 될 조건으로, 해당 condition을 만족하는 DATA가 있으면 WHEN MATCHED 절을 실행하게 되고, 없으면 WHEN NOT MATCHED 이하를 실행하게 됩니다.

 - WHEN MATCHED : ON 조건절이 TRUE인 ROW에 수행 할 내용

 - WHEN NOT MATCHED
: ON 조건절에 맞는 ROW가 없을 때 수행할 내용
 
 
-- scott유저로 접속
C:\>SQLPLUS scott/tiger
 
-- 테스트를 위한 테이블 생성
SQL>CREATE TABLE emp_test
    AS SELECT * FROM emp WHERE deptno = 10;
 
-- 부서번호가 10인 사원만 데이터가 생성되었습니다.
SQL>SELECT empno, ename, sal FROM emp_test
EMPNO ENAME        SAL
----- ---------- -----
 7782 CLARK       2450
 7839 KING        5000
 7934 MILLER      1300
 
 
-- 간단하게 emp_test테이블에 데이터가 있으면 급여를 10%인상하고 없으면
-- 새로 INSERT하는 예제 입니다
.
SQL>MERGE INTO emp_test et
    USING emp e
    ON(et.empno = e.empno)
 WHEN MATCHED THEN
    UPDATE SET et.sal = e.sal*1.1
 WHEN NOT MATCHED THEN
    INSERT VALUES (e.empno,e.ename,e.job,e.mgr,e.hiredate,e.sal,e.comm,e.deptno)
14 행이 병합되었습니다.
 
 
-- 실행결과를 조회 해 봅니다.
SQL>SELECT empno, ename, sal FROM emp_test
EMPNO ENAME        SAL
----- ---------- -----
 7782 CLARK       2695
 7839 KING        5500
 7934 MILLER      1430
 7844 TURNER      1500
 7521 WARD        1250
 7654 MARTIN      1250
 7788 SCOTT       3000
 7698 BLAKE       2850
 7566 JONES       2975
 7499 ALLEN       1600
 7902 FORD        3000
 ...
14 개의 행이 선택되었습니다.



출처 : http://oracleclub.com/lectureview.action
Posted by 1010
반응형

CoolCheck 무료체험

웹 품질관리 및 개인정보보호 솔루션 CoolCheck

쿨첵은 웹사이트의 생산성 향상과 비용절감을 이루어드립니다.

coolcheck 제품 이미지

웹 품질관리

홈페이지의 기술적 문제점과 방문객의 체감 만족도 진단

검색 최적화 마케팅을 위한 메타데이터 및 사이트 가용성 진단

유해 웹사이트, 금칙어, 구글(검색엔진) 해킹 등 홈페이지 안전성 점검

모든 문서와 파일에 대한 웹자산 현황 제공

개인정보보호

홈페이지의 구조적/기술적 결함분석을 통한 누출원인 파악

주민번호, 신용카드 등 치명적 개인식별정보의 누출 점검

coolcheck 상세정보
개인정보보호솔루션
개인정보진단 솔루션 CoolCheck Privacy Ed. 개인정보차단 솔루션 CoolFilter
coolcheck privacy edition 제품 이미지

홈페이지의 구조적 결함분석을 통한

누출원인 파악

주민번호, 신용카드 등 제반 개인식별

정보의 누출 점검

홈페이지내 기술적 보호조치의 진단

coolfilter 제품 이미지

개인정보 등록시 별표(*)로 자동전환

로그기록 및 통계 기능 제공

서버부하, 네트워크 트래픽 최소화

완벽한 작동성능 및 안전성 제공

coolcheck privacy edition 상세정보 coolfilter 상세정보
웹사이트간 싱글사인온 솔루션 CoolPass

운영체제 또는 DBMS의 기종과 상관없이 통합 가능

서버간 이중 인증을 통한 로그인 위변조 방지(쿠키 사용 배제)

회원가입 및 로그인 한번만으로 모든 연동된 사이트 이용 가능

coolpass 상세정보
Posted by 1010
98..Etc/Etc...2009. 4. 14. 17:58
반응형

4.1 하고 6.1 두개..
Posted by 1010
01.JAVA/Java2009. 4. 14. 11:55
반응형

자바에서는 파일을 복사하는 것은 그리 어렵지 않습니다.

자바에는 풍부한 I/O 클래스가 많기 때문에 유연성있게 사용할 I/O 객체가 많습니다.

만약 특정파일을 디스크에서 디스크로 복사하는 것이 아니라 네트워크를 이용해서 파일을

다른 컴퓨터로 복사하다면 어떨까요?

자바에서는 이 또한 그리 어렵지 않습니다.

 

TCP 네트워크 Socket 객체를 얻기만 한다면 Socket에서 InputStream, OutputStream

얻을 수 있고, 자바 I/O 객체를 이용해서 InputStream에서 읽고 OutputStream으로 쓰기만

하면 네트워크에서 읽고 쓰기가 되는 것이니까요.

 

자바 I/O 객체를 이용해서 파일을 복사하는 경우할 때 복사할 원본 파일을 읽는 프로그램이

결국 대상 파일을 만듭니다. 파일을 읽는 것, 파일을 쓰는 것이 같은 버추얼 머신에 의해서

실행됩니다. 하지만 네트워크를 이용해서 복사를 하는 경우에는 파일을 읽어서

네트워크로 보내는 프로그램(클라이언트)과 네트워크로부터 데이터를 읽어서 파일에 쓰기를

하는 프로그램(서버)으로 나눌 수 있을 것입니다.

그럼 이와 같이 네트워크를 통해서 파일을 복사하는 프로그램을 만들어 보겠습니다.

TCP 네트워크 프로그램에서는 네트워크에 참여하는 참여자가 항상 둘인데 거의 대부분

클라이언트, 서버의 서비스 구조입니다.

 

 

package tcp;

 

import java.io.*;

import java.net.*;

 

/**

* 스트림 복사를 합니다.

*/

public interface Zerox {

            /**

            * InputStream로 부터 읽은 데이터를 OutputStream으로 보냅니다.

            * @param is         InputStream

            * @param os                      OutputStream

            * @exception        IOException

            */

            public void copy(InputStream is, OutputStream os)

                          throws IOException;

}

예제 11 - 3 Zerox.java

 

Zerox 인터페이스는 public void copy(InputStream, OutputStream) 메소드를 하나 선언

했는데, 그 이름에서 짐작하듯이 InputStream으로부터 데이터를 읽고,그 읽은 데이터를

OutputStream으로 씁니다. 복사의 기본이 읽은 것을 읽은 그대로 쓰는 것이기 때문입니다.

 

먼저 TCP 네트워크 서버를 살펴보겠습니다.

 

package tcp;

 

import java.io.*;

import java.net.*;

 

/**

* 스트림 복사를 합니다.

*/

public class CopyServer implements Zerox{

 

            /**

            * InputStream로 부터 읽은 데이터를 OutputStream으로 보냅니다.

            * @param is         InputStream

            * @param os                      OutputStream

            * @exception        IOException

            */

            public void copy(InputStream is, OutputStream os)

                          throws IOException {

                          int c = -1;

                          while((c = is.read()) != -1) {

                                        os.write(c);

                          }

                          os.flush();

            }

           

            public static void main(String[] args) throws Exception {

                          /*

                          데이타 Copy를 위해서 네트워크 InputStream 생성

                          */

                          ServerSocket ss = new ServerSocket(8989);                 

                          Socket s = ss.accept();                               

                          InputStream is = s.getInputStream();                             

                         

                          /*

                          데이타 Copy를 위한 파일 OutputStream 생성

                          */                                                 

                          OutputStream os = new FileOutputStream(new File(args[0]));     

 

                          /*

                          데이타 Copy를 위한 Zerox 생성

                          */

                          Zerox zerox = new CopyServer();                               

                          /*

                          데이타 Copy - InputStream 데이타를 OutputStream으로 복사                

                          */                       

                          zerox.copy(is,os);             

 

                          /* 네트워크 자원 해제 */

                          os.close();                                                                                                                                 

                          is.close();                                                                                                                                 

                          s.close();                                                                                                                                   

            }

}

예제 11 - 4 CopyServer.java

 

CopyServer는 우선 Zerox 인터페이스를 구현했습니다.

CopyServer가 구현한 public void copy(InputStream, OutputStream)을 살펴보면

InputStread에서 한 바이트를 읽고 읽은 바이트를 그대로 OutputStream으로 쓰는데,

이러한 행동을 InputStream으로부터 더 이상 읽을 데이터가 없을 때 까지 계속 반복하고

있습니다.InputStream은 복사할 원래의 데이터소스로부터 만들어진 것이니,

InputStream의 마지막에 이를 때까지 읽고,쓰기를 반복하면 결국엔 OutputStream으로는

원래의 데이터소스에 있던 모든 데이터가 씌여지는 셈입니다.복사의 기본입니다.

InputStream으로부터 데이타를 모두 읽은후에는 버퍼에 있을지 모를 데이터를

flush() 메소드를 호출해서 강제적으로 OutputStream으로 씁니다.

 

CopyServer public static void main(String[])CopyServerTCP 서버로 동작하도록

환경을 설정합니다.

우선 TCP 8989포트로 ServerSocket을 만들고 있습니다. 그리고 클라이언트가 TCP 연결을

하기를 기다리고 있습니다. 클라이언트가 TCP 연결을 한다면 public Socket accept()

메소드가 Socket을 리턴합니다. CopyServer는 대부분의 삶을 public Socket accept()에서

머물러 있습니다. 일단 Socket이 만들어졌다는 것은 TCP 연결이 된 것입니다.

Socket으로부터 InputStreamOutputStream을 얻습니다.

물론 이제부터는 자바의 I/O객체를 이용해서 마음껏 읽고 쓸수 있습니다. 

CopyServer는 복사할 대상 파일의 OutputStreamFileOutputStream으로 합니다.

InputStream OutputStream은 복사를 담당하는 Zeroxcopy(InputStream,OutputStream)

메소드의 인자로 쓰여집니다.

Zerox는 그 원래 만들어진 것이 오로지 InputStream으로 읽은 데이터를 OutputStream으로

쓰기만 하므로 , 결국 여기서는 네트워크 스트림으로부터 데이터를 읽어서 파일을 의미하는

OutputStream으로 쓰는 행동을 합니다.

CopyServer는 다 사용한 시스템자원(네트워크 자원)을 해제하는데,TCP 네트워크 연결과

같은 시스템 자원은 열린 자원(Open Resources)라고 해서 사용한 후에는 반드시 정리해

주는 습관을 같져야 합니다. 자바의 가비지 컬렉터(Garbage Collector)는 열린 자원에 대해

서는 청소를 하지 않기 때문입니다.

열린 자원은 프로그래머가 명시적으로 정리하지 않으면 시스템 자원이 물 새듯 새나가고,

언젠가는 큰 낭패를 당합니다.

 

 

이젠 TCP 네트워크 클라이언트를 살펴보겠습니다.

 

package tcp;

 

import java.io.*;

import java.net.*;

/**

* 스트림 복사를 합니다.

*/

public class CopyClient implements Zerox{

 

            /**

            * InputStream로 부터 읽은 데이터를 OutputStream으로 보냅니다.

            * @param is         InputStream

            * @param os                      OutputStream

            * @exception        IOException

            */

            public void copy(InputStream is, OutputStream os)

                          throws IOException {

                          int c = -1;

                          /*

                           InputStream is로 부터 EOF일때까지 데이타를  읽고,

                           읽은 데이타를 OutputStream os로 보냅니다.

                          */

                          while((c = is.read()) != -1) {

                                        os.write(c);

                          }

                          os.flush();            // OutputStream 버퍼에 있을 수 있는 데이타를 강제 출력

            }

           

            public static void main(String[] args) throws Exception {

 

                          /*

                          데이타 Copy를 위해서 파일 InputStream 생성

                          */                       

                          InputStream is = new FileInputStream(new File(args[0]));           

                         

                          /*

                          데이타 Copy를 위해서 네트워크 OutputStream 생성

                          */                       

                          Socket s = new Socket("localhost",8989);                                                           

                          OutputStream os = s.getOutputStream();                                                                           

 

                          /*

                          데이타 Copy를 위한 Zerox 생성

                          */

                          Zerox zerox = new CopyClient();                   

                          /*

                          데이타 Copy - InputStream 데이타를 OutputStream으로 복사                

                          */                                                                                                     

                          zerox.copy(is,os);                                                                                                                                   

 

                          /*

                          네트워크 자원 해제

                          */

                          is.close();                                                                                                                                                                         

                          os.close();                                                                                                                                                         

                          s.close();                                                                                           

            }

}

예제 11 - 5 CopyClient.java

 

CopyClient 역시 CopyServer와 마찬가지로 TCP기반의 Socket 객체를 사용하고 있는터라

tcp 패키지에 속하게 했습니다.

 

CopyClient에서 눈여겨 볼 것은 Socket 객체의 생성자에 사용된 두개의 인자인 “localhost”

8989의 값입니다.

localhost TCP 네트워크 연결을 하고자한는 서버가 위치한 컴퓨터의 IP 주소를

말합니다. 8989는 서버가 서비스하는 포트를 의미합니다.

 

CopyClient가 서비스를 받으려하는 CopyServerTCP 8989로 서비스하고 있으므로

클라이언트는 TCP 포트 8989로 네트워크 연결을 해야합니다.

localhost “127.0.0.1”IP 주소에 대한 또 다른 이름이며, "127.0.0.1"Loopback

주소로 자기자신의 IP주소와 같다고 컴퓨터입니다.

예제 11 - 5CopyClient가 서버의 IP 주소를 "localhost"라고 한 것은 CopyServer

CopyClient를 실행하는 컴퓨터에서 Listen하면서 서비스를 제공하고 있기 때문입니다.

 

CopyClient역시 Zerox이므로 Zeroxpublic void copy(InputStream, OutputStream)

이용합니다. FileInputStream에서 데이타를 읽어서 TCP 네트워크에서 만들어진

OutputStream으로 데이터를 쓰습니다. 여기서 TCP 트워크 반대쪽에서는 서버가 열심히

정보를 데이터를 읽고 있을 것입니다.

CopyClient 역시 사용한 시스템 자원을 정리하고 있습니다.

Zerox 인터페이스를 보면 마치 로컬에서 파일을 복사하는 형태를 가지지만

CopyServer, CopyClient는 가장 기본적인 TCP 네트워크로부터 읽고,쓰기를 보여줍니다.


 

 

  

 

그림 11 - 6TCP 네트워크 서버인 tcp.CopyServer를 실행시킨 모습입니다.

그리고 아래 그림 11 - 7tcp.CopyClient를 실행시킨 모습이구요.

src 폴더아래의 Zerox.java 를 현재 폴더 Zerox.copy로 복사하는 내용입니다.

 


 

사용자 삽입 이미지

 

 

Posted by 1010
00.Flex,Flash,ActionScript2009. 4. 14. 02:46
반응형
Posted by 1010
반응형

사용자 삽입 이미지



<script language="javascript">

var fixedX = -1; ////////// 레이어 X축 위치 (-1 : 버튼에 바로 아래에 표시)
var fixedY = -1; ////////////// 레이어 Y축 위치 (-1 : 버튼에 바로 아래에 표시)
var startAt = 0; ///////////// 일요일 표시 부분 / 0 : 일요일(일월화...) / 1 : 월요일(...금토일)
var showToday = 1; // 오늘 날자 표시 유무 - 0 : 감춤 / 1 : 보임
var imgDir = './'; // 이미지 디렉토리 - ./ : 현재 디렉토리

/////////////////////////////// 각 변수 선언 ///////////////////
var crossobj, crossMonthObj, crossYearObj, monthSelected, yearSelected, dateSelected, omonthSelected, oyearSelected, odateSelected, monthConstructed, yearConstructed, intervalID1, intervalID2, timeoutID1, timeoutID2, ctlToPlaceValue, ctlNow, dateFormat, nStartingMonth, nStartingYear

var bPageLoaded = false;
var ie = document.all;
var dom = document.getElementById;
var bShow = false;
var ns4 = document.layers;

var today = new    Date(); /////////////// 날자 변수 선언
var dateNow = today.getDate(); //////////////// 로컬 컴퓨터의 일(day)을 구함 
var monthNow = today.getMonth(); ///////////////// 로컬 컴퓨터의 월(month)을 구함
var yearNow = today.getYear(); ///////////////// 로컬 컴퓨터의 년(year)을 구함

var    monthName =    new    Array("1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월")
var    monthName2 =    new    Array("1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월")

if (startAt==0) {
    dayName = new Array    ("일","월","화","수","목","금","토")
} else {
    dayName = new Array    ("월","화","수","목","금","토","일")
}
var oPopup = window.createPopup();
var oPopBody = oPopup.document.body;
var strCalendar;
var cleft;
var ctop;

if(dom) {
    strCalendar = "<img src='' width=0 height=0>";
    strCalendar += "<style type='text/css'>";
    strCalendar += "td {font-size:12px; font-family:굴림; text-decoration:none; }";
    strCalendar += "A:link,A:active,A:visited{text-decoration:none;font-size:12PX;color:#333333;}";
    strCalendar += "A:hover {text-decoration:none; color:ff9900}";
    strCalendar += "font { font-size: 9pt; }";
    strCalendar += ".cnj_close {font-size:8pt;color:#000000; background-color:#EFEFEF; border-width:1; border-color:#808080; border-style:solid;cursor:hand;font-weight:bold;height:16px;width:16px;text-align:center;vertical-align:bottom}";
    strCalendar += ".cnj_close2 {font-size:8pt;color:#000000; background-color:#EFEFEF; border-width:1; border-color:#808080; border-style:solid;cursor:hand;font-weight:bold;height:16px;width:16px;text-align:center;vertical-align:bottom}";
    strCalendar += ".cnj_input {background-color:rgb(240,240,240);border-width:1pt; height:16pt;cursor:hand;}";
    strCalendar += ".cnj_input2 {font-size:8pt;color:#808080; background-color:#EFEFEF; border-width:1; border-color:#808080; border-style:solid;cursor:hand;height:16px;}";
    strCalendar += ".cnj_input3 {font-size:8pt;color:#000000; background-color:#FFFFFF; border-width:1; border-color:#C00000; border-style:solid;cursor:hand;height:16px;}";
    strCalendar += ".cnj_input4 {font-size:8pt;color:#C00000; background-color:#FFFFFF; border-width:1; border-color:#808080; border-style:solid;cursor:hand;height:16px;}";
    strCalendar += ".cnj_td {border-width:1;border-style:solid;border-color:#a0a0a0;}";
    strCalendar += "</style>";

    strCalendar += "<div id='calendar' style='z-index:+999;position:absolute;;'>";
    strCalendar += "<table width='190' class='cnj_td'>";
    strCalendar += "    <tr bgcolor='#EEEEEE' height=20>";
    strCalendar += "        <td>";
    strCalendar += "            <table width='188' border=0>";
    strCalendar += "                <tr height=20>";
    strCalendar += "                    <td style='padding:0px;'><font color='#ffffff'><B><span id='caption'></span></B></font></td>";
    strCalendar += "                    <td align=right><input type='button' value='x' class='cnj_close' title='닫기' onclick='parent.oPopup.hide()' onfocus='this.blur()' onMouseover=\"this.className='cnj_close2'\" onMouseout=\"this.className='cnj_close'\"></td>";
    strCalendar += "                </tr>";
    strCalendar += "            </table>";
    strCalendar += "        </td>";
    strCalendar += "    </tr>";
    strCalendar += "    <tr height=1>";
    strCalendar += "        <td style='padding:3px' bgcolor=#ffffff><span id='content'></span></td>";
    strCalendar += "    </tr>";
           
    if(showToday==1) {
        strCalendar += "<tr bgcolor=#f0f0f0 height=20><td style='padding:5px' align=center><span id='lblToday'></span></td></tr>";
    }
           
    strCalendar += "</table>";
    strCalendar += "</div>";
    strCalendar += "<div id='selectMonth' style='z-index:+999;position:absolute;display:none;'></div> ";
    strCalendar += "<div id='selectYear' style='z-index:+999;position:absolute;display:none;'></div>";
    oPopBody.innerHTML = strCalendar;
}

function init() {
    if(!ns4) {
        if(!ie) {
            yearNow += 1900;
        }

        crossobj = oPopBody.all.calendar;
        crossMonthObj = oPopBody.all.selectMonth;
        crossYearObj = oPopBody.all.selectYear;
        monthConstructed = false;
        yearConstructed = false;

        sHTML1="<input type='button' value='◀' class='cnj_input2' onClick='javascript:parent.movedecMonth()' onfocus='this.blur()' title='이전 달(월)로 이동' "
        sHTML1+="onMouseover=\"this.className='cnj_input3';window.status='이전 달(월)로 이동'\" onMouseout=\"this.className='cnj_input2';window.status=''\"> </span> "

        sHTML1+="<input type='button' value='▶'  class='cnj_input2' onClick='javascript:parent.moveincMonth()' onfocus='this.blur()' title='다음 달(월)로 이동' "
        sHTML1+="onMouseover=\"this.className='cnj_input3';window.status='다음 달(월)로 이동'\"  onMouseout=\"this.className='cnj_input2';window.status=''\"> </span> "

        sHTML1+="<span id='spanMonth'  class='cnj_input4' onclick='parent.popUpMonth()' title='월 선택' "
        sHTML1+="onMouseover=\"this.className='cnj_input3';window.status='월 선택'\" onMouseout=\"this.className='cnj_input4';window.status=''\"></span>&nbsp;";

        sHTML1+="<span id='spanYear'  class='cnj_input4' onclick='parent.popUpYear()' title='년도 선택' "
        sHTML1+="onMouseover=\"this.className='cnj_input3';window.status='년도 선택'\" onMouseout=\"this.className='cnj_input4';window.status=''\"></span> ";

        oPopup.document.getElementById("caption").innerHTML = sHTML1;
        bPageLoaded = true;
       
        if(showToday==1) {
            oPopup.document.getElementById("lblToday").innerHTML =    ""+
            "<div onmousemove='window.status=\"오늘 날짜로 표시하기\"' onmouseout='window.status=\"\"' title='오늘 날짜로 표시하기' "+
            //" style='"+styleAnchor+"' href='javascript:monthSelected=monthNow;yearSelected=yearNow;constructCalendar();' onFocus='this.blur()'>"+
            " style='"+styleAnchor+"' onclick=parent.totoday() onFocus='this.blur()'>"+
            "오늘 날짜 :  "+yearNow+"년 "+
            ""+monthName[monthNow].substring(0,3)+" "+
            ""+dateNow+"일 "+  // 일
            "</div>";
        }       
    }
}

function totoday(){ // 오늘 날짜로 표시하기
    monthSelected=monthNow;
    yearSelected=yearNow;
    constructCalendar();
}

function HolidayRec(d, m, y, desc) {
    this.d = d;
    this.m = m;
    this.y = y;
    this.desc = desc;
}

var HolidaysCounter = 0;
var Holidays = new Array();

function addHoliday(d, m, y, desc) {
    Holidays[HolidaysCounter++] = new HolidayRec ( d, m, y, desc );
}

var styleAnchor = "text-decoration:none;color:black;cursor:hand;width:100%;height:100%";
var styleLightBorder = "border-style:solid;border-width:1px;border-color:#a0a0a0;text-decoration:underline;font-weight:bold;cursor:hand;width:100%;height:100%";

function padZero(num) {
    return (num < 10)? '0' + num : num;
}

function constructDate(d,m,y) {
    sTmp = dateFormat
    sTmp = sTmp.replace("dd","<e>");
    sTmp = sTmp.replace("d","<d>");
    sTmp = sTmp.replace("<e>",padZero(d));
    sTmp = sTmp.replace("<d>",d);
    sTmp = sTmp.replace("mmmm","<p>");
    sTmp = sTmp.replace("mmm","<o>");
    sTmp = sTmp.replace("mm","<n>");
    sTmp = sTmp.replace("m","<m>");
    sTmp = sTmp.replace("<m>",m+1);
    sTmp = sTmp.replace("<n>",padZero(m+1));
    sTmp = sTmp.replace("<o>",monthName[m]);
    sTmp = sTmp.replace("<p>",monthName2[m]);
    sTmp = sTmp.replace("yyyy",y);

    return sTmp.replace("yy",padZero(y%100));
}

function closeCalendar() {
    oPopup.hide();
    ctlToPlaceValue.value =    constructDate(dateSelected,monthSelected,yearSelected);
}

function moveincMonth() {
    monthSelected++;

    if (monthSelected>11) {
        monthSelected=0;
        yearSelected++;
    }
    constructCalendar();
}

function movedecMonth() {
    monthSelected--;

    if (monthSelected<0) {
        monthSelected=11;
        yearSelected--;
    }
    constructCalendar();
}

function incMonth() {
    if (nStartingMonth + 6 == 12) return;
    for(i = 0; i < 7; i++) {
        newMonth = (i + nStartingMonth) + 1;

        if (newMonth > 12) {nStartingMonth--; break;}
        if (newMonth == monthSelected + 1) {
            txtMonth = " <B>"+ newMonth +"월</B> ";
        } else {
            txtMonth = " " + newMonth + "월";
        }
        oPopup.document.getElementById("m"+i).innerHTML = txtMonth;
    }
    nStartingMonth++;
    bShow = true;
}

function decMonth() {
    if (nStartingMonth == 1) return;
    for (i=0; i<7; i++) {
        newMonth    = (i+nStartingMonth)-1;

        if (newMonth < 1) {nStartingMonth++; break;}
        if (newMonth==monthSelected + 1) {
            txtMonth = " <B>"+ newMonth +"월</B> ";
        } else {
            txtMonth = " " + newMonth + "월";
        }
        oPopup.document.getElementById("m"+i).innerHTML = txtMonth;
    }
    nStartingMonth--;
    bShow = true;
}

function selectMonth(nMonth) {
    monthSelected = parseInt(nMonth + nStartingMonth - 1);
    monthConstructed = false;
    constructCalendar();
    popDownMonth();
}

function constructMonth() {
    popDownYear();
    sHTML =    "";

    if(!monthConstructed) { // 월 이전 월 링크
        sHTML ="<tr><td align='center' style='cursor:pointer'     "
        sHTML +="    onmouseover='this.style.backgroundColor=\"#FFCC99\"' "
        sHTML +="    onmouseout='clearInterval(parent.intervalID1);this.style.backgroundColor=\"\"'  "
        sHTML +="    onmousedown='clearInterval(parent.intervalID1);parent.intervalID1=setInterval(\"parent.decMonth()\",30)' "
        sHTML +="    onmouseup='clearInterval(parent.intervalID1)'> "
        sHTML +="    ▲</td></tr>";
        j = 0;
       
        var nSelectedMonth = monthSelected + 1;
       
        nStartingMonth = (nSelectedMonth - 3) < 1 ? 1 : nSelectedMonth - 3; //시작월 - 3 이 1보다 작으면 1로 고정
        nStartingMonth = nStartingMonth > 6 ? 6 : nStartingMonth; //시작월이 6보다 크면 6로 고정 (6 시작 월 + 목록 숫자 6 = 12 종료 월)

        var nEndMonth = (nSelectedMonth + 3) > 12 ? 12 : (nSelectedMonth + 3); // 종료월 + 3이 12보다 크면 12로 고정
        nEndMonth = nEndMonth < 7 ? 7 : nEndMonth; //종료 월이 7보다 작으면 7로 고정
       
        for (i = nStartingMonth; i <= nEndMonth; i++) {
            sName =    i;

            //////////////// 현재 월 ////////////////////////
            if (i == nSelectedMonth) { sName = "<b>" + sName + "</b>" }
            sHTML +="<tr><td height='15' id='m" + j + "' onmouseover='this.style.backgroundColor=\"#FFCC99\"' onmouseout='this.style.backgroundColor=\"\"' "
            sHTML +=" style='cursor:pointer' onClick='parent.selectMonth("+j+");event.cancelBubble=true'> " + sName + "월"
            sHTML +="</td></tr>";
            j ++;
        }
       
         // 월 다음 월 링크
        sHTML += "<tr><td align='center' onmouseover='this.style.backgroundColor=\"#FFCC99\"' style='cursor:pointer' "
        sHTML += " onmouseout='clearInterval(parent.intervalID2);this.style.backgroundColor=\"\"' "
        sHTML += " onmousedown='clearInterval(parent.intervalID2);parent.intervalID2=setInterval(\"parent.incMonth()\",30)'    "
        sHTML += " onmouseup='clearInterval(parent.intervalID2)'> "
        sHTML += " ▼</td></tr>";

          /////// 월 표 크기 ///////////////////////////////
        oPopup.document.getElementById("selectMonth").innerHTML    = ""+
        "<table width='50' style='font-family:굴림; font-size:11px; border-width:1; border-style:solid; border-color:#a0a0a0;' bgcolor='#FFFFDD' "+
        " onmouseover='clearTimeout(parent.timeoutID2)' "+
        " onmouseout='clearTimeout(parent.timeoutID2);parent.timeoutID2=setTimeout(\"parent.popDownMonth()\",100)' cellspacing=0>"+
        ""+ sHTML    + ""+
        "</table>";
        monthConstructed    = true;
    }
}

function popUpMonth() {
    constructMonth();
    crossMonthObj.style.display = "";
    crossMonthObj.style.left = crossobj.style.left + 50;
    crossMonthObj.style.top = crossobj.style.top + 26;
}

function popDownMonth()    {
    crossMonthObj.style.display = "none";
}

function incYear() {
    for(i=0; i<7; i++) {
        newYear    = (i+nStartingYear)+1;

        if (newYear==yearSelected) {
            txtYear = " <B>"+ newYear +"년  </B> ";
        } else {
            txtYear = " " + newYear + "년  ";
        }
        oPopup.document.getElementById("y"+i).innerHTML = txtYear;
    }
    nStartingYear++;
    bShow = true;
}

function decYear() {
    for (i=0; i<7; i++) {
        newYear    = (i+nStartingYear)-1;

        if (newYear==yearSelected) {
            txtYear = " <B>"+ newYear +"년  </B> ";
        } else {
            txtYear = " " + newYear + "년  ";
        }
        oPopup.document.getElementById("y"+i).innerHTML = txtYear;
    }
    nStartingYear--;
    bShow = true;
}

function selectYear(nYear) {
    yearSelected = parseInt(nYear+nStartingYear);
    yearConstructed = false;
    constructCalendar();
    popDownYear();
}

function constructYear() {
    popDownMonth();
    sHTML =    "";

    if(!yearConstructed) { // 년도 이전 년도 링크
        sHTML ="<tr><td align='center' style='cursor:pointer'     "
        sHTML +="    onmouseover='this.style.backgroundColor=\"#FFCC99\"' "
        sHTML +="    onmouseout='clearInterval(parent.intervalID1);this.style.backgroundColor=\"\"'  "
        sHTML +="    onmousedown='clearInterval(parent.intervalID1);parent.intervalID1=setInterval(\"parent.decYear()\",30)' "
        sHTML +="    onmouseup='clearInterval(parent.intervalID1)'> "
        sHTML +="    ▲</td></tr>";
        j = 0;
        nStartingYear =    yearSelected-3;

        for (i=(yearSelected-3); i<=(yearSelected+3); i++) {
            sName =    i;

            if (i==yearSelected) { sName =    "<b>" +    sName +    "</b>" }
            sHTML +="<tr><td height='15' id='y" + j + "' onmouseover='this.style.backgroundColor=\"#FFCC99\"' onmouseout='this.style.backgroundColor=\"\"' "
            sHTML +=" style='cursor:pointer' onClick='parent.selectYear("+j+");event.cancelBubble=true'> " + sName + "년  "
            sHTML +="</td></tr>";
            j ++;
        }
       
         // 년도 다음 년도 링크
        sHTML += "<tr><td align='center' onmouseover='this.style.backgroundColor=\"#FFCC99\"' style='cursor:pointer' "
        sHTML += " onmouseout='clearInterval(parent.intervalID2);this.style.backgroundColor=\"\"' "
        sHTML += " onmousedown='clearInterval(parent.intervalID2);parent.intervalID2=setInterval(\"parent.incYear()\",30)'    "
        sHTML += " onmouseup='clearInterval(parent.intervalID2)'> "
        sHTML += " ▼</td></tr>";

         /////// 년도 표 크기 ///////////////////////////////
        oPopup.document.getElementById("selectYear").innerHTML    = ""+
        "<table width='55' style='font-family:굴림; font-size:11px; border-width:1; border-style:solid; border-color:#a0a0a0;' bgcolor='#FFFFDD' "+
        " onmouseover='clearTimeout(parent.timeoutID2)' "+
        " onmouseout='clearTimeout(parent.timeoutID2);parent.timeoutID2=setTimeout(\"parent.popDownYear()\",100)' cellspacing=0>"+
        ""+ sHTML    + ""+
        "</table>";
        yearConstructed    = true;
    }
}

function popDownYear() {
    clearInterval(intervalID1);
    clearTimeout(timeoutID1);
    clearInterval(intervalID2);
    clearTimeout(timeoutID2);
    crossYearObj.style.display = "none";
}

function popUpYear() {
    constructYear();
    crossYearObj.style.display = "";
    crossYearObj.style.left = crossobj.style.left + (6 + oPopup.document.getElementById("spanYear").offsetLeft) + "px";
    crossYearObj.style.top = crossobj.style.top + 26;
}

function constructCalendar() {
    var aNumDays = Array (31,0,31,30,31,30,31,31,30,31,30,31);
    var dateMessage;
    var startDate =    new Date (yearSelected,monthSelected,1);
    var endDate;
    var intWeekCount = 1;
   
    if(monthSelected==1) {
        endDate    = new Date (yearSelected,monthSelected+1,1);
        endDate    = new Date (endDate    - (24*60*60*1000));
        numDaysInMonth = endDate.getDate();
    } else {
        numDaysInMonth = aNumDays[monthSelected];
    }

    datePointer = 0;
    dayPointer = startDate.getDay() - startAt;
       
    if(dayPointer<0) {
        dayPointer = 6;
    }
    sHTML =    "<table     border=0 style='font-family:verdana;font-size:10px;'><tr height=16>";

    for(i=0; i<7; i++) {   /////// 요일 ///////////////////////
        sHTML += "<td width='27' align='right'><B>"+ dayName[i]+"</B></td>";
    }
    sHTML +="</tr><tr height=16>";
       
    for(var i=1; i<=dayPointer;i++)    {  // 빈 날짜
        sHTML += "<td> </td>";
    }
   
    for(datePointer=1; datePointer<=numDaysInMonth; datePointer++) {
        dayPointer++;
        sHTML += "<td align=right>";
        sStyle = styleAnchor;

        if((datePointer==odateSelected) && (monthSelected==omonthSelected) && (yearSelected==oyearSelected)) {
            sStyle += styleLightBorder;
        }
        sHint = "";

        for(k=0;k<HolidaysCounter;k++) {
            if((parseInt(Holidays[k].d)==datePointer)&&(parseInt(Holidays[k].m)==(monthSelected+1))) {
                if((parseInt(Holidays[k].y)==0)||((parseInt(Holidays[k].y)==yearSelected)&&(parseInt(Holidays[k].y)!=0))) {
                    sStyle+="background-color:#FFDDDD;";
                    sHint+=sHint==""?Holidays[k].desc:"\n"+Holidays[k].desc;
                }
            }
        }
        var regexp= /\"/g;
        sHint=sHint.replace(regexp,"&quot;");
        /////////////// 날짜 선택시 ==> 마우스가 날짜 위로 갔을때 ///////////////////////////////
        dateMessage = "title=' 날짜 선택 : "+ yearSelected + "년 " +    monthName[monthSelected] +" "  + datePointer + "일"+"' onmousemove='window.status=\" 날짜 선택 : "+ yearSelected + "년 " +    monthName[monthSelected] +" "  + datePointer + "일"+"\"' onmouseout='window.status=\"\"' ";

        if((datePointer == dateNow) && (monthSelected == monthNow) && (yearSelected == yearNow)) {  // 현재 오늘 날짜
            sHTML += "<b><div style='"+sStyle+"' onclick='javascript:parent.dateSelected="+datePointer+";parent.closeCalendar();'><font color=#0000C0> " + datePointer + "</font> </div></b>";
        } else
        if((dayPointer % 7 == (startAt * -1)+1) || (dayPointer % 7 == (startAt * -1))) {  // 일요일, 토요일일때
            sHTML += "<div style='"+sStyle+"' onclick='javascript:parent.dateSelected="+datePointer + ";parent.closeCalendar();'> <font color=red>" + datePointer + "</font> </div>";
        } else {
            sHTML += "<div style='"+sStyle+"' onclick='javascript:parent.dateSelected="+ datePointer + ";parent.closeCalendar();'>" + datePointer + "</div>";
        }
        sHTML += "";

        if((dayPointer+startAt) % 7 == startAt) {
            sHTML += "</tr><tr height=16>";
            intWeekCount ++;
        }
    }
    sHTML += "</tr>";
    sHTML = sHTML.replace("<tr height=16></tr>", "");
    if (((dayPointer+startAt) % 7) == 0) intWeekCount--;
    oPopup.document.getElementById("content").innerHTML = sHTML; 
    //////// 셀릭트 월 선택
    oPopup.document.getElementById("spanMonth").innerHTML = " " +    monthName[monthSelected] + " <input type='button'  id='changeMonth'value='▼'  class='cnj_input2' onfocus='this.blur()' onMouseover=\"this.className='cnj_input3'\" onMouseout=\"this.className='cnj_input2'\">"

    //////// 셀릭트 년도 선택
    oPopup.document.getElementById("spanYear").innerHTML =    " " + yearSelected    + "년 <input type='button'  id='changeYear'' value='▼'  class='cnj_input2' onfocus='this.blur()' onMouseover=\"this.className='cnj_input3'\" onMouseout=\"this.className='cnj_input2'\">"

    //alert(intWeekCount);
    var popHeight;
    if (intWeekCount == 6)
        popHeight = 195;
    else
        popHeight = 177;
    oPopup.show(cleft, ctop, 198, popHeight, document.body);
}

function popUpCalendar(ctl, ctl2, format) {
    var leftpos = 0;
    var toppos = 0;
    var leftscroll = 0;
    var topscroll = 0;

    if(bPageLoaded) {
        ctlToPlaceValue    = ctl2;
        dateFormat=format;
        formatChar = " ";
        aFormat    = dateFormat.split(formatChar);

            if(aFormat.length<3) {
                formatChar = "/";
                aFormat    = dateFormat.split(formatChar);

                if(aFormat.length<3) {
                    formatChar = ".";
                    aFormat    = dateFormat.split(formatChar);

                    if(aFormat.length<3) {
                        formatChar = "-";
                        aFormat    = dateFormat.split(formatChar);

                        if (aFormat.length<3) {
                            formatChar="";
                        }
                    }
                }
            }
            tokensChanged =    '0';

            if(formatChar != "") {
                aData =    ctl2.value.split(formatChar);

                for(i=0;i<3;i++) {
                    if ((aFormat[i]=="d") || (aFormat[i]=="dd")) {
                        dateSelected = parseInt(aData[i], 10);
                        tokensChanged++;
                    } else
                    if((aFormat[i]=="m") || (aFormat[i]=="mm")) {
                        monthSelected =    parseInt(aData[i], 10) - 1;
                        tokensChanged++;
                    } else
                    if(aFormat[i]=="yyyy") {
                        yearSelected = parseInt(aData[i], 10);
                        tokensChanged++;
                    }else
                    if(aFormat[i]=="mmm") {

                        for(j=0; j<12;    j++) {
                            if (aData[i]==monthName[j]) {
                                monthSelected=j;
                                tokensChanged++;
                            }
                        }
                    } else
                    if(aFormat[i]=="mmmm") {
                        for(j=0; j<12;    j++) {
                            if (aData[i]==monthName2[j]) {
                                monthSelected=j;
                                tokensChanged ++;
                            }
                        }
                    }
                }
            }

            if((tokensChanged!=3) || isNaN(dateSelected) || isNaN(monthSelected) || isNaN(yearSelected)) {
                dateSelected = dateNow;
                monthSelected =    monthNow;
                yearSelected = yearNow;
            }
            odateSelected=dateSelected;
            omonthSelected=monthSelected;
            oyearSelected=yearSelected;

            aTag = ctl;
            bTag = ctl;
           
            do {
                aTag = aTag.offsetParent;
                leftpos    += aTag.offsetLeft;
                toppos += aTag.offsetTop;
                leftscroll    += aTag.scrollLeft;
                topscroll += aTag.scrollTop;   
       
            } while(aTag.tagName!="BODY");
           
            cleft =    fixedX==-1 ? (ctl.offsetLeft + leftpos) - leftscroll : fixedX;
            ctop = fixedY==-1 ?    (ctl.offsetTop + ctl.offsetHeight + toppos) - topscroll :    fixedY;
            constructCalendar (1, monthSelected, yearSelected);

            bShow = true;
            ctlNow = ctl;
        }
    }

init();
</script>

<input type="button" value="달력" onclick="popUpCalendar(this, txtDate, 'yyyy-mm-dd')">
<input type="text" name="txtDate" readonly>

Posted by 1010
60.Unix2009. 4. 13. 14:11
반응형

Solaris 8에서 Apache 1.3.27과 Tomcat 4.1.24 연동하기
4일동안 꼬박 헤메이다가 지금에야 연동 성공했다.
1. 고생한 이유
A. Unix를 잘 몰라서
B. Java 버전 문제
C. Unix에서 사용하는 프로그램 버전이 낮아서
2. 계정 만들기 (apcss)
A. useradd –d /data02 apcss
3. tar 다운로드
A. 기존 Solaris 8에 있는 tar는 z option이 없다. Gunzip 과 tar를 이용하여 풀면 나중에 에러가 발생할 수 있으니 www.sunfreeware.com에서 Solaris8 버전의 tar를 Download 받는다.
B. Download 받은 tar 파일은 root 권한으로 들어가 “pkgadd -d 파일명”으로 설치한다. 설치후 해당 계정에 path를 잡아주면 사용할 수 있다.
4. 아파치 설치
A. apache 다운로드 (apache.org)
i. www.apache.kr.net나 www.apache.org에서 apache를 다운 받는다.
B. apache 압축 풀기
i. “tar xvfz 파일명”으로 압축을 풀어준다.
C. ./configure
i. 아파치의 압축을 풀면 생긴 디렉토리로 들어가서 ./configure를 해준다. 이때 여러 옵션을 줄 수 있는데, 예제에 적힌 enable로 시작하는 3가지 옵션은 주어야 한다. 그래야 나중에 톰캣과 연동할 때 LoadModule를 사용할 수 있다. (이를 몰라서 무척 헤멨었음.) prefix이후는 아파치를 설치할 디렉토리명을 적어주면 된다.
ii. <예제> “./configure --prefix=/data02/apache --enable-shared=max --enable-rule=SHARED_CORE --enable-module=so”
iii. 만일 gcc가 설치되지 않았거나 path 잡혀있지 않다면 에러가 발생하니, www.sunfreeware.com에서 다운받거나 패스를 잡아주도록 한다.
D. apache make
i. configure가 이상없이 실행되면 “make”를 실행한다.
ii. 이때 ar이나 ranlib가 설치되지 않았거나 path 잡혀있지 않다면 에러가 발생하니, www.sunfreeware.com에서 다운받거나 패스를 잡아주도록 한다.
E. apache make install
i. make가 이상없이 실행되면 “make install”을 실행하면 해당 디렉토리에 apache가 설치된다.
F. apache/conf/httpd.conf
i. 우리 Site의 경우에는 기존에 apache가 설치되어 사용하고 있어서 port를 변경했다. $apache_home/conf에 들어가 “vi httpd.conf”를 한후 “/80”으로 포트를 찾은 후 80  90으로 변경한다. 그리고 ServerName을 해당 도메인이 있다면 주고 아니라면 “127.0.0.1” 로 준후 저장하여 닫는다.
ii. $apache_home/bin에 들어가 “apachectl start”를 실행 후 브라우저를 띄워서 “해당 IP:90”또는 “127.0.0.1:90”을 실행하여 index.html.xx가 적힌 화면이 나오면 설치 완료.
5. Tomcat 설치
A. JDK 설치
i. Tomcat 4.1.24 스팩에는 JDK 1.2이상이면 된다고 되어 있으나, 우리 SITE의 경우 JDK 1.2를 깔아 사용하니 톰캣이 작동을 안함. (솔라리스 내부 문제인지 잘 모르겠음) 그래서 JDK 1.3 이상을 깔기를 권장함.
B. 환경변수 JAVA_HOME
i. JDK를 설치하였다면 해당 계정의 .profile에 export JAVA_HOME=JDK Path를 적고 저장하여 닫는다.
C. tomcat 다운로드 (apache.org)
i. www.apache.org에서 Tomcat 4.1.24를 다운로드 받는다.
ii. “Tar xvfz 톰캣파일명”으로 압축을 푼다.
iii. 풀려서 생성된 디렉토리는 그대로 사용이 가능하다. 이를 원하는 곳으로 mv명령어를 이용하여 옮긴다.
D. 환경변수 CATALINA_HOME
i. “.profile에 export CATALINA_HOME=Tomcat 설치 디렉토리”를 적고 저장한다.
ii. 변경된 .profile을 다시 적용한후 $tomcat_home/bin에 들어가 startup.sh을 구동한후 Browser에서 “해당 IP:8080” 또는 “127.0.0.1:8080”을 실행하여 수코양이가 보이면 설치 완료
6. Apache와 Tomcat 설치
A. http://jakarta.apache.org/builds/jakarta-tomcat-connectors/jk/release/v1.2.0/bin/solaris8/에서 해당되는 mod_jk.so파일을 다운 받는다. (우리 Site의 경우 mod_ssl을 같이 안 깔았아서 mod_jk-1.3-noeapi.so을 다운 받음. 그리고 jk가 v.2.X버전도 나와 있다고 들었으나 참조한 레퍼런스에서 불안정하다하여 1.2.0버전으로 설치함)
B. 받은 파일을 mod_jk.so로 이름을 변경하여 $apache_home/libexec/밑에 저장한다.
C. mod_jk.conf
i. www.jongsclub.com/pds/mod_jk.conf에서 다운 받은 후 $tomcat_home/conf 밑에 저장한다.
D. workers.properties
i. www.jongsclub.com/pds/workers.properties에서 다운 받은 후 $tomcat_home/conf 밑에 저장한다.
E. Apache 설정 파일 수정
i. $apache_home/conf/httpd.conf 수정
<IfModule mod_dir.c>

DirectoryIndex index.html index.php index.jsp

</IfModule>


우선 DirectoryIndex 부분에 index.jsp 를 추가해넣습니다.
( esc키를 누른후 /DirectoryIndex 엔터 하시면 쉽게 찾을수 있습니다. )

그리고 아래처럼 DocumentRoot 라고 된 부분을 톰캣의 /webapps/ROOT 경로로 잡아놓습니다.
DocumentRoot “/data02/tomcat/webapps/ROOT”

ROOT 어플리케이션은 톰캣에서 최상위 즉 http://hostname/ 으로 매핑되기 때문에 디렉토리 패턴으로 매핑 하기위해서는 반드시 설정해주셔야 합니다

( /jsp-examples/* 이런형태를 ajp로 매핑했을경우 루뜨에서 부터 찾아나가기 때문에 결국 /톰캣/webapps/jsp-examples/ 로 찾아갈수 있습니다. )

다음으로 맨 밑줄로 이동한후 ( esc 키를 누른뒤 Shift+g ) 아래와 같이 mod_jk.conf 를 인클루드 시켜줍니다
Include “/data02/tomcat/conf/mod_jk.conr”

(톰캣의 경로는 자신의 설치경로로 정확히 입력해주세요 )

ii. $Tomcat_home/conf/mod_jk.conf 수정
LoadModule jk_module libexec/mod_jk.so
JkWorkersFile /usr/local/tomcat-5.0.1/conf/workers.properties
JkLogFile logs/jk.log
JkLogLevel error
JkMount /*.jsp ajp13
JkMount /servlet/* ajp13
JkMount /jsp-examples/* ajp13

JkMount /디렉토리패턴 ajp13 ,,, 즉 해당 패턴의 url 요청이 들어오면 연동포트인 ajp로 보내라는 소립니다. 별로 어려운 내용이 없습니다. ^^
iii. $Tomcat_home/conf/workers.properties 수정
tomcat 이 실행될 환경을 지정하는 workers.properties 파일을 수정합니다. 다음과 같은 곳을 수정해줍니다. 필요에 따라 localhost 를 도메인으로 바꿔주시면 됩니다. 주석(#)을 잘 보시면서 설정을 해주시면 됩니다.

C:\tomcat4\conf\workers.properties
...
workers.tomcat_home=c:\tomcat4
...
workers.java_home=c:\jdk1.3
...
worker.list=ajp12, ajp13
...
worker.ajp13.port=8009
worker.ajp13.host=localhost
worker.ajp13.type=ajp13

위로서 모든 설정이 끝났음

$Tomcat_home/bin/startup.sh
$apache_home/bin/./apachectl start

실행후
웹브라우저로 http://ip 혹은 도메인/ 을 입력하고 고양이 로고가 그려진 톰캣 첫화면을 띄운뒤
jsp-examples 메뉴를 클릭해서 잘돌아가는지 테스트 합니다.
다른 메뉴도 테스트 해보시려면 mod_jk.conf 에서 패턴 매핑을 시켜줘야 합니다..


관련 자료.
1. http://okjsp.pe.kr/lecture/lec01/mod_jk01.html
2. http://www.jongsclub.com/webedit/studyView.jsp?num=3
3. 아리샘 자료중

Posted by 1010
02.Oracle/DataBase2009. 4. 13. 13:18
반응형

작성일 : 2008.02.20 11:07



Oracle Commit 한 데이터 복구방법



C:\>sqlplus scott/tiger

SQL*Plus: Release 9.2.0.5.0 - Production on 토 Jan 26 01:09:34 2008

Copyright (c) 1982, 2002, Oracle Corporation.  All rights reserved.


다음에 접속됨:
Oracle9i Enterprise Edition Release 9.2.0.5.0 - Production
With the Partitioning, OLAP and Oracle Data Mining options
JServer Release 9.2.0.5.0 - Production

SQL> select * from emp;


     EMPNO ENAME      JOB              MGR HIREDATE        SAL       COMM   DEPTNO
---------- ---------- --------- ---------- -------- ---------- ---------- ----------

         7369       SMITH     CLERK          7902 80/12/17           800                             20  

.

.

.

14 개의 행이 선택되었습니다.


SQL> delete from emp;

14 행이 삭제되었습니다.


SQL> commit;

커밋이 완료되었습니다.


// 실수로 Table Data를 삭제한 뒤 commit 명령 까지  실행 함.  (--);


SQL> select * from emp;


선택된 레코드가 없습니다.



SQL> insert into emp (empno, ename, job, mgr, hiredate, sal, comm, deptno)
    2     select empno, ename, job, mgr, hiredate, sal, comm, deptno
    3        from emp as of timestamp ( systimestamp - interval '10' minute) ;


14 개의 행이 만들어졌습니다.


SQL> select * from emp;


     EMPNO ENAME      JOB              MGR HIREDATE        SAL       COMM   DEPTNO
---------- ---------- --------- ---------- -------- ---------- ---------- ----------

         7369       SMITH     CLERK          7902 80/12/17           800                             20  

.

.

.

14 개의 행이 선택되었습니다.


SQL>


SQL> commit;

커밋이 완료되었습니다.



-- 실수로 삭제 한 데이터 복구 완료 .. (^^);

Posted by 1010
02.Oracle/DataBase2009. 4. 13. 09:16
반응형

기존 오라클에서 empty_clob() 를 써서 하던 부분을 오라클 10g에서는 standard API로 clob를 사용할 수 있도록
수정되었다고 합니다.

직접 테스트 해보진 않아서 정확한 작동은 보장하진 않습니다 -_-;


1.  property 사용하여 clob 입력

import java.sql.Connection;
import java.sql.DriverManager;
import oracle.jdbc.OracleDriver;
import java.util.Properties;
..........

// Load the database details into the variables.
String url = "jdbc:oracle:thin:@localhost:1521:orcl";
String user = "scott";
String password = "tiger";


// Create the properties object that holds all database details
Properties props = new Properties();
props.put("user", user );
props.put("password", password);
props.put("SetBigStringTryClob", "true");


// Load the Oracle JDBC driver class.
DriverManager.registerDriver(new OracleDriver());

// Get the database connection
Connection conn = DriverManager.getConnection( this.url, this.props );
PreparedStatement pstmt = conn.prepareStatement(
"INSERT INTO clob_tab VALUES(?)");

// Read a big file(larger than 32765 bytes).
// Note: method readFile() not listed here.
// It can be any method that reads a file.
String str = this.readFile("bigFile.txt");


// The string data is automatically transformed into a CLOB and
// inserted into the database column.
// Make sure that the Connection property - 'SetBigStringTryClob' is
// set to true for the insert to happen.
pstmt.setString(1, str);
pstmt.executeUpdate();


2. OraclePreparedStatement 를 사용하여 clob 사용

import java.sql.*;
import java.io.*;
import java.util.*;
import oracle.jdbc.*;
import oracle.jdbc.pool.*;
..........

// Create SQL query to insert CLOB data and other columns in the database.
String sql = "INSERT INTO clob_tab VALUES(?)";

// Read a big file(larger than 32765 bytes).
// Note: method readFile() not listed here.
// It can be any method that reads a file.
String str = this.readFile("bigFile.txt");


// Create the OraclePreparedStatement object
opstmt = (OraclePreparedStatement)conn.prepareStatement(sql);


// Use the new method to insert the CLOB data (for data greater or lesser than 32 KB)
opstmt.setStringForClob(1,str);


// Execute the OraclePreparedStatement
opstmt.executeUpdate();
...........

3. clob 데이터 가져오기

.....
// Create a PreparedStatement object
PreparedStatement pstmt = null;

// Create a ResultSet to hold the records retrieved.
ResultSet rset = null;
.......


// Create SQL query statement to retrieve records having CLOB data from
// the database.
String sqlCall = "SELECT clob_col FROM clob_tab";
pstmt= conn.prepareStatement(sqlCall);


// Execute the PrepareStatement
rset = pstmt.executeQuery();

String clobVal = null;

// Get the CLOB value larger than 32765 bytes from the resultset
while (rset.next()) {
clobVal = rset.getString(1);
System.out.println("CLOB length: "+clobVal.length());
}
Posted by 1010
02.Oracle/DataBase2009. 4. 13. 09:15
반응형

import java.sql.Clob;
import weblogic.jdbc.common.OracleClob;
import oracle.jdbc.driver.OracleResultSet;
import oracle.sql.CLOB;
import org.apache.commons.dbcp.DelegatingResultSet;


String query1 = "select content from "+table+" where no="+ no + " for update";

con = getConnection();
con.setAutoCommit(false);//꼭 setAutoCommit을 false로 지정

pstmt = con.prepareStatement(query1);
rs = pstmt.executeQuery();

while (rs.next()){

 /**********************************************
 * Tomcat
 * ********************************************/
 Clob clob = rs.getClob(1);
 Writer writer = ((CLOB)clob).getCharacterOutputStream();
 Reader src = new CharArrayReader(contentData.toCharArray());
 char[] buffer = new char[1024];
 int read = 0;
 while ( (read = src.read(buffer,0,1024)) != -1)
 {
   writer.write(buffer, 0, read); // write clob.
 }
 src.close();               
 writer.close();   


 /**********************************************
 * weblogic
 * ********************************************/
 Clob clob = rs.getClob(1);
 Writer writer = ((OracleClob)clob).getCharacterOutputStream();
 Reader src = new CharArrayReader(contentData.toCharArray());
 char[] buffer = new char[1024];
 int read = 0;
 while ( (read = src.read(buffer,0,1024)) != -1)
 {
   writer.write(buffer, 0, read); // write clob.
 }
 src.close();               
 writer.close();


 /**********************************************
 * sunone
 * ********************************************/
 Clob clob = rs.getClob(1);
 Writer characterStream = clob.setCharacterStream(0);
 characterStream.write(contentData);
 characterStream.close();


 /**********************************************
 * interstage

 * ********************************************/

 CLOB clob = ((OracleResultSet)((DelegatingResultSet)rs).getDelegate()).getCLOB(1);
 BufferedWriter writer = new BufferedWriter(clob.getCharacterOutputStream());
 writer.write(form.getContent());
 writer.close();

}

con.commit();
con.setAutoCommit(true);

Posted by 1010
02.Oracle/DataBase2009. 4. 11. 17:48
반응형
1.   데이타베이스란?
2.   큐브리드 구조
3.   큐브리드 특징
4.   큐브리드 Windows에서의 설치와 실행
5.   큐브리드 Linux에서의 설치와 실행
6.   큐브리드 환경 설정 - ODBC
7.   큐브리드 환경 설정 - JDBC
8.   큐브리드 매니저 소개
9.   큐브리드 매니저 실행
10.   큐브리드 매니저 데이타베이스 생성 및 삭제
11.   큐브리드 매니저 사용자 관리
12.   큐브리드 매니저 질의 편집기 사용방법
13.   CSQL 이란?
14.   CSQL 질의 사용 방법
15.   큐브리드 매니저로 테이블 생성 및 삭제하기
16.   테이블 생성 및 삭제 SQL 구문
17.   큐브리드 매니저로 테이블 변경하기
18.   테이블 변경 SQL 구문
19.   데이터 정의 및 타입 - 문자 스트링
20.   데이터 정의 및 타입 - 비트 스트링
21.   데이터 정의 및 타입 - 수치형
23.   데이터 정의 및 타입 - 날짜/시간
23.   데이터 정의 및 타입 - 집합형
24.   기본 SQL문 - SELECT
25.   기본 SQL문 - FROM
26.   기본 SQL문 - WHERE
27.   기본 SQL문 - WHERE절 조건식
28.   기본 SQL문 - ORDER BY
29.   기본 SQL문 - DISTINCT
30.   기본 SQL문 - ROWNUM
31.   기본 SQL문 - INSERT
32.   기본 SQL문 - UPDATE
33.   기본 SQL문 - DELETE
34.   관계 연산자
35.   산술 연산자
36.   집합 연산자
37.   CAST 연산자
38.   EXTRACT 연산자
39.   스트링 함수
40.   수치 연산함수
41.   날짜/시간 함수
42.   데이터 타입 변환 함수
43.   집계 함수
44.   조건/비교 관련 함수
45.   GROUP BY HAVING 절
46.   컬럼 조인
47.   부질의 (서브쿼리)
48.   인덱스(INDEX)
49.   트리거(TRIGGER) 생성
50.   트리거(TRIGGER) 변경
51.   트리거(TRIGGER) 삭제
52.   가상 테이블(VIEW)
Posted by 1010
61.Linux2009. 4. 11. 10:58
반응형

   퍼미션(권한)이란?

Owner

Group

Other

Owner와 Group은 파일소유자자신과 자신이 속한그룹. Other은 제3자, 웹사이트 방문객은 제3자로 nobody로 취급.

r

w

x

r

w

x

r

w

x

r은 파일 읽기(4), w는 파일 쓰기(2), x는 파일 실행(1)

7

5

5

파일소유자는 그것을 읽고 쓰고 실행시킬 수 있지만, 제3자는 읽고 실행만 시킬 수 있다.

7

7

7

제3자도 쓰기 권한이 주어진다.

*.html  *.cgi, *.pl *.txt등의 파일은 업로드시 반드시 ascii로 하고 나머지 그림(*.gif *.jpg)이나 자바 애플릿(*.class), 실행파일(*.exe *.zip *.rar)등은 binary mode로 업로드 할 것.

   리눅스 기본명령어

명령어

사 용 법

login

사용자 인증과정

리눅스 시스템은 기본적으로 multi-user 개념에서 시작하였기 때문에 시스템을 이용하기 위해서는 반드시 로그인을 하여야 합니 다. 로그인은 PC 통신에서도 많이 사용되어져 왔기 때문에 그 개 념  설정에 그다지 어려움이 없을 것입니다. 흔히 말하는 ID를 입력하는 과정입니다. 

passwd

패스워드 변경

리눅스, 특히 인터넷의 세계에서는 일반 컴퓨팅 상황에 비하여 훨씬 해킹에 대한 위험이 높습니다. 패스워드는 완성된 단어 보다는 단어 중간에 숫자나 키보드의 ^, #, ' 등과 같은 쉽게 연상 할 수 없는 기호를 삽입하여 만들어 주는 것이 좋습니다

du

하드사용량 체크(chkdsk)

자신의 하드공간을 알려면
# du
특정 디렉토리의 사용량을 알려면
# du -s diretory_name

ls

파일 리스트 보기(dir)

F : 파일 유형을 나타내는 기호를 파일명 끝에 표시
    (디렉토리는 '/', 실행파일은 '*', 심볼릭 링크는 '@'가 나타남).
l  : 파일에 관한 상세 정보를 나타냅니다.
a : dot 파일(.access 등)을 포함한 모든 파일 표시.
t  : 파일이 생성된 시간별로 표시
C : 도스의 dir/w명령과 같 이 한줄에 여러개의 정보를 표시
R : 도스의 dir/s 명령과 같이 서브디렉토리 내용까지.

(예)
# ls -al  
# ls -aC
# ls -R

cd

디렉토리를 변경

# cd cgi-bin     : 하부 디렉토리인 cgi-bin으로 들어감.
# cd  ..             : 상위디렉토리로 이동
# cd 또는 cd ~  : 어느곳에서든지 자기 홈디렉토리로 바로 이동
# cd /webker     : 현재 작업중인 디렉토리의 하위나 상위 디렉토리가
                          아닌 다른 디렉토리(webker)로 이동하려면 /로
                          시작해서 경로이름을 입력하면 된다.

cp

화일 복사(copy)

# cp index.html index.old
     : index.html 화일을 index.old 란 이름으로 복사.

# cp /home/test/*.*  .
     : test 디렉토리내의 모든 화일을 현 디렉토리로 복사.

mv

파일이름(rename) / 위치(move)변경

# mv index.htm index.html
     : index.htm 화일을 index.html 로 이름 변경

$ mv file  ../main/new_file
     : 파일의 위치변경

mkdir

디렉토리 생성

# mkdir download  : download 디렉토리 생성

rm

화일삭제

# rm test.html : test.html 화일 삭제
# rm -r <디렉토리> : 디렉토리 전체를 삭제
# rm -i a.*
     : a로 시작하는 모든 파일을 일일이 삭제할 것인지 확인하면서 삭제

rmdir

디렉토리 삭제

# rmdir cgi-bin : cgi-bin 디렉토리 삭제

pwd

현재의 디렉토리 경로를 보여주기

pico

리눅스용 에디터

put

ftp 상태에서 화일 업로드

> put  guestbook.tar.gz

get

ftp 상태에서 화일 다운로드

> get  guestbook.tar.gz

mput 또는 mget

여러개의 화일을 올리고 내릴때 (put,get과 사용법동일)

chmod

화일 permission 변경

리눅스에서는 각 화일과 디렉토리에 사용권한을 부여.

예) -rwxr-xr-x   guestbookt.html
rwx  :처음 3개 문자 = 사용자 자신의 사용 권한
r-x  :그다음 3개 문자 = 그룹 사용자의 사용 권한
r-x  :마지막 3개 문자 = 전체 사용자의 사용 권한

읽기(read)---------- 화일 읽기 권한
쓰기(write)---------- 화일 쓰기 권한
실행(execution)---------- 화일 실행 권한
없음(-)---------- 사용권한 없음

명령어 사용법
chmod [변경모드] [파일]

# chmod 666  guestbook.html
     : test.html 화일을 자신에게만 r,w,x 권한을 줌

# chmod 766  guestbook.html
     : 자신은 모든 권한을 그룹사용자와,전체사용자에게는
       읽기와 쓰기 권한만 줌

alias

" doskey alias" 와 비슷하게 이용할 수 있는 쉘 명령어 alias는 말그대로 별명입니다. 사용자는 alias를 이용하여 긴 유 닉스 명령어를 간단하게 줄여서 사용할 수도 있습니다.
이들 앨리어스는 [alias ls 'ls -al'] 같이 사용하시면 되는데, 한 번 지정한 alias를 계속해서 이용하시려면, 자신의 홈디렉토리에 있는
.cshrc(Hidden 속성)을 pico등의 에디터를 이용하여 변경시 키면 됩니다.

cat

파일의 내용을 화면에 출력하거나 파일을 만드는 명령( 도스의 TYPE명령)

# cat filename

more

cat 명령어는 실행을 시키면 한 화면을 넘기는 파일일 경우 그 내용을 모두 볼수가 없다. 하지만 more 명령어를 사용하면 한 화면 단위로 보여줄 수 있어 유용.

# more <옵션>
옵션은 다음과 같습니다.

Space bar : 다음 페이지
Return(enter) key : 다음 줄
v : vi 편집기로 전환
/str : str 문자를 찾음
b : 이전 페이지
q : more 상태를 빠져나감
h : 도움말
= : 현재 line number를 보여줌

who

현재 시스템에 login 하고 있는 사용자의 리스트를 보여줍니다.

# who

whereis

소스, 실행파일, 메뉴얼 등의 위치를 알려줍니다

# whereis perl : perl의 위치를 알려준다

vi,
touch,
cat

새로운 파일을 만드는 방법

# vi newfile :  vi 편집기 상태로 들어감
# touch newfile : 빈 파일만 생성됨
# cat > newfile  : vi 편집기 상태로 들어감, 문서 작성후 Ctrl+D로 빠져나옴

cat,
head,
tail

파일 내용만 보기

# cat filename         : 파일의 내용을 모두 보여줌
# head -n filename : n줄 만큼 위세서부터 보여줌
# tail -n filename     : n줄 만큼 아래에서부터 보여줌


   압축명령어 사용법

압축 명령어

사 용 법

tar .tar, _tar로 된 파일을 묶거나 풀때 사용하는 명령어
(압축파일이 아님)

# tar cvf [파일명(.tar, _tar)] 압축할 파일(또는 디렉토리): 묶을때
# tar xvf [파일명(.tar, _tar)]  :  풀 때
   (cf) cvfp/xvfp 로 하면 퍼미션 부동
compress 확장자 .Z 형태의 압축파일 생성

# compress    [파일명]     : 압축시
# uncompress [파일명]    : 해제시
gzip 확장자 .gz, .z 형태의 압축파일 생성

#  gzip     [파일명]    : 압축시
#  gzip -d [파일명]   : 해제시
기타 .tar.Z
이것은 tar로 묶은 후에 compress를 사용하여 압축한 것으로 uncompress를 사용해서 압축을 푼 다음,
다시 tar를 사용해서 원래의 파일들을 만들어내면 됩니다.
아니면 다음과 같이 한 번에 풀 수도 있다.
# zcat  [파일명].tar.Z  : 해제시

.tar.gz또는 .tar.z
# gzip -cd [파일명]    : 해제시

.tar.gz 또는 .tar.z .tgz
gzip을 사용해서 푼 다음 다시 tar를 사용해서 원래 파일을 만들어 낼 수 있으나,
하지만 다음과 같이 하면 한 번에 처리를 할 수 있다.

# gzip -cd 파일.tar.gz | tar xvf -  또는
# tar xvzf 파일.tar.gz
# tar xvzf 파일.tgz

   리눅스 필수명령어

Linux/Unix 명령어

설 명

MS-DOS 비교

./x

x 프로그램 실행
(현재 디렉토리에 있는 것)

x

/

이전에(↑) / 다음에(↓) 입력했던 명령어

doskey

cd x (또는 cd /x)

디렉토리 X로 가기

cd

cd .. (또는 cd ../ 또는 cd /..)

한 디렉토리 위로 가기

cd..

x 다음 [tab] [tab]

x 로 시작하는 모든 명령어 보기

-

adduser

시스템에 사용자 추가

/

ls (또는 dir)

디렉토리 내부 보여주기

dir

cat

터미널 상의 텍스트 파일 보기

type

mv x y

파일 x를 파일 y로 바꾸거나 옮기기

move

cp x y

파일 x를 파일 y로 복사하기

copy

rm x

파일 지우기

del

mkdir x

디렉토리 만들기

md

rmdir x

디렉토리 지우기

rd

rm -r x

디렉토리 x를 지우고 하위도 다 지우기

deltree

rm p

패키지 지우기

-

df (또는 df x)

장치 x의 남은 공간 보여주기

chkdsk ?

top

메모리 상태 보여주기(q는 종료)

mem

man x

명령어 x에 관한 매뉴얼 페이지 얻기

/

less x

 텍스트 파일 x 보기
(리눅스에서는 더 많은 필터 적용 가능)

type x | more

echo

어떤 것을  echo 화면에 인쇄한다.

echo

mc

UNIX를 위한 노턴 커맨더

nc

mount

장치 연결(예: CD-ROM, 연결을 해제하려면 umount)

-

halt

시스템 종료

-

reboot ([ctrl] + [alt] +[del])

시스템  다시 시작하기

[ctrl] + [del] + [del]

    고급명령어

 고급 명령어

 

chmod <권한> <파일>

파일 권한(permissions) 변경

ls -l x

파일 x의 자세한 상황을 보여줌

ln -s x y

 x에서 y로 심볼릭 링크를 만들어 줌

find x -name y -print

디렉토리 x안에서 파일 y를 찾아서 화면에 그 결과를 보여줌

ps

지금 작동중인 모든 프로세스들을 보여줌

kill x

 프로세스 x를 종료 (x는 ps 명령으로 알 게 된 PID)

[alt] + F1 - F7

 터미널 1-7까지 바꾸기 (텍스트 터미널에서; F7은 X-윈도우(시작될때))

lilo

 부트 디스크를 만듦

 

용어


symlink

다른 파일이나 디렉토리로 심볼릭 링크. 윈도유98의 바로가기 같은 것

shell script

여러 명령어들을 차례로 수행하게 한 것. MS-DOS의 배치 파일 같은 것

     팁!!

 - 웹에서 생성한 노바디파일 삭제 하는방법..

기본적으로 웹서버는 nobody 권한으로 동작이 되게 됩니다.
고객님께서 FTP 로 접속하여 전송한 파일이 아니라 웹상에서 사용자들이 파일을 업로드 한 경우나 웹상에서 생성된 파일의 경우 삭제가 되지 않는 경우가 있을 수 있습니다.

웹서버의 동작 권한은 nobody 이고 웹상에서 생성된 파일이므로 해당 파일이 nobody 소유권으로 시스템에 생성이 되게 됩니다.

아래와 같이 웹상에서 실행시키면 됩니다.

1. 메모장을 열어 아래 소스를 붙여넣기 하신후..

<?

//폴더/파일 삭제시

$cmd = `rm -rf 노버디로된파일혹은폴더명`;

echo "$cmd";

echo "폴더가 삭제 되었습니다.";

?>

-- 위에까지..
-- **위에서 수정할 사항은 "노버디로된파일혹은폴더명"을 삭제하시고자 하는 파일명으로 바꿔주세요..

2. 파일 -> 다른이름으로저장 -> 아래 탭에서 파일형식을 "모든파일"로 선택후

   -> "원하는파일명.php" 로 저장 (ex: del.php)

3. ftp를 통해 고객계정에 파일업로드를 하시고 웹에서 파일을 불러주시면 됩니다

   ex: html폴더안에/temp 안에 삭제하고자하는 파일이 있을경우 / html폴더/temp안에 del.php를 업로드하고..

       브라우저에서 http://고객도메인/temp/del.php 를 하면 됩니다

4. 실행하시면 삭제되고 nobody 권한의 폴더만 남습니다.(폴더안의화일들만 지워짐)

   그후 ftp 접속후 폴더를 삭제하시면 됩니다.

ex)

<?

퍼미션 변경시

$cmd = `chmod -R 777 노버디로된파일혹은폴더명`;

echo "$cmd";

echo "퍼미션 변경되었습니다.";

?>

Posted by 1010
반응형

디자인이 어디갔지?

왜 이 홈페이지에 스타일이 사라졌는지 궁금하다면, Annual CSS Naked Day 사이트를 방문해 주세요. 한국어 설명도 있습니다.



접근성을 해치지 않는 자바스크립트의 사용

신현석

2006년 5월

자바스크립트에 대한 잘못된 생각

자바스크립트 없이는 개발을 할 수 없다?

많은 개발자들이 자바스크립트가 없이는 개발을 할 수 없다고 생각한다. 그만큼 자바스크립트를 일상적으로 많이 사용하고, 자바스크립트에 대해서 잘못 오해하고 있는 부분이 많다는 것이다. 자바스크립트는 클라이언트 환경에서 작동하기 때문에 핵심로직에 사용해서는 안된다. 핵심적인 로직은 서버사이드 언어로 처리를 하고 자바스크립트는 그 옆에서 UI구성을 위해서 도와주기만 해야 한다. 바꿔 말하면 자바스크립트가 없어도 핵심 로직은 작동을 해야 한다. 먼저 자바스크립트없이 HTML과 서버사이드 언어만으로 완벽하게 작동 할 수 있게 개발을 끝낸 후 자바스크립트를 이용해서 좋은 UI나 유효성 검사 등을 하는 부분을 추가 하는 순서로 만들어야 한다. 만약 이를 어기고 자바스크립트를 기능의 일부로 사용하면 접근성이 떨어지는 것 뿐만 아니라 보안도 떨어지고 데이터의 무결성도 보장되지 않는다.

자바스크립트가 작동하지 않는 환경도 고려를 해 줘야 하는가?

자바스크립트가 작동하지 않는 환경이 일반적인 상황은 아니지만 스크립트를 사용할 수 없는 환경에 대한 고려는 반드시 필요하다. 실제로 브라우져에 따라서는 자바스크립트 버젼이 다를 수 있고 개발 환경에서는 잘 작동하던 기능이 어떤 사용자 환경에서는 작동하지 않을 수도 있다. 그리고 사용자 중에서도 여러 이유로 스스로 자바스크립트 사용을 중지하고 사용하는 경우도 있다. 자바스크립트를 사용하지 않아도 핵심 기능을 구현할 수 있음에도 불구하고 불필요한 자바스크립트를 사용하여 접근성을 떨어뜨리는 것이 올바른 페이지 제작 방법은 아니다.

서버 부하를 줄이기 위해서 자바스크립트로만 유효성 검사를 한다?

자바스크립트를 이용해서 서버의 부하를 줄일 수 있다는 것은 많은 사람들이 알고 있을 것이다. 자바스크립트로 선처리를 행함으로서 네트웍이나 서버의 처리를 감소시킨다는 것인데 이것을 잘못 이해하여 자바스크립트만으로 유효성을 체크하는 것이 좋다고 생각하는 사람들이 있다. 자바스크립트로 선처리를 한결과물을 그대로 믿으면 안된다. 사용자측으로 부터 넘오온 모든 값은 그 값의 유효성을 완전히 보장할 수 없기 때문에 서버측에서도 유효성 체크를 해 줘야만 한다. 이것은 서버의 부하를 높이는 것 이전에 자료의 무결성을 보장하는 중요한 과정이다. 자바스크립트를 거치지 않고 서버에 임의로 변조된 값을 보내는 일은 아주 쉬운 일이다.

자바스크립트를 사용하지 않으면 UI가 불편해 진다?

자바스크립트를 이용해서 RIA나 좋은 UI를 만들 수 있는 것은 사실이지만 웹환경을 이해하고 일반적인 웹 인터페이스를 이용해서 만드는 것이 더 좋은 UI를 제공할 수 있다. 사용자 친화적인 UI에 대한 고민을 해야지 자바스크립트를 사용했다고 좋은 UI가 나오는 것은 아니다. 실제적으로 가장 사용자가 이해하기 쉬운 UI는 사용자 OS나 브라우저에서 기본적으로 제공하는 컨트롤 인터페이스를 그대로 사용하는 것이고 이는 자바스크립트 없이도 충분히 가능하다.

자바스크립트는 사용자 환경에 내려보내지고 사용자의 브라우져에서 실행이 되기 때문에 이에 의존해서 프로그램을 만들게 되면 보안, 접근성에 문제가 생기기 쉽다. 이러한 자바스크립트의 특징을 정확히 이해하지 못한 잘못된 개발 방법이나 상식들 때문에 자바스크립트가 오용되고 있는 경우가 많다. 자바스크립트는 어디까지나 보조적인 수단이라는 것을 이해하고 핵심적인 기능을 해치지 않는 한도에서 사용하는 것이 무엇보다 중요하다.

자바스크립트 선언

<script language="Javascript">
//code
</script>

자바스크립트는 <script> 엘리먼트로 선언을 한다. 모든 <script>엘리먼트는 type을 명시해 주어야 하고 자바스크립트의 type은 "text/javascript" 이다. 많은 경우 language 만을 선언해서 자바스크립트버젼을 명시하는데 반드시 type도 같이 명시를 해 주어야 한다.

<script type="text/javascript">
//code
</script>

<a>의 href 속성과 자바스크립트의 사용

href는 Hypertext REFerence의 약자이다. 다시 말해서 hypertext의 위치를 나타내는 uri를 그 값으로 갖는다. 하지만 많은 경우 이 href안에 "javascript:myFunction()"과 같이 잘못된 구문을 이용하는 것을 볼 수 있다. 이와 같이 href안에 잘못된 값이 들어가게 될 경우, 북마크나 새창, 새탭으로 열기 등의 href 관련된 브라우저의 기능들이 정상적으로 작동하지 않게 된다. 따라서 href안에는 항상 uri가 들어가도록 하고 자바스크립트 적용은 onclick과 같은 이벤트 속성을 이용해야 한다.

의미 없는 href 값을 사용한 경우

사용자의 링크 클릭이 링크와 관련이 있고 이를 자바스크립트를 이용해서 처리를 하야 하는 경우가 있다면 우선은 자바스크립트를 빼고도 페이지의 이동을 할 수 있게 href에 적절한 값을 넣어 주어야 한다. 이와 같은 경우로 탭메뉴를 들 수 있다. 탭메뉴의 경우 탭을 누르면 해당 탭과 관련있는 컨텐츠를 보여주는 식으로 작동하게 된다. javasript가 없다면 탭을 클릭했을 때 해당 컨텐츠로 이동을 하는 식으로 구현 되면 된다. href 안의 값으로 페이지 안에서의 해당 컨텐츠 앵커 주소를 넣는 것으로 간단히 구현 된다.

<a href="#notice-list"><img src="notice-tab.gif" alt="Notice" /></a>

그리고 이 마크업을 기본으로 하여 이벤트 속성으로 원하는 기능을 넣어주면 된다.

<a href="#notice-list" onclick="showNoticeTab(); return false;"><img src="notice-tab.gif" alt="Notice" /></a>

onclick으로 탭을 보여준 후 false를 리턴하여 해당 앵커로 이동하지 않도록 처리 한다. 자바스크립트가 작동을 할 때에는 클릭하면 정상적으로 탭으로 작동을 할 것이고, 그렇지 않을 경우에는 해당 컨텐츠로 이동을 하여 높은 접근성을 유지할 수 있다.

만약 자바스크립트가 링크와 관련이 없는 경우에는 <a>태그를 사용해서 스크립트를 적용하면 안된다. 보통 특정 효과를 주는 것이 이러한 것에 해다하게 되는데 이 경우 자바스크립트가 작동을 하지 않아도 컨텐츠 이해에 크게 문제가 되지 않는 경우이다.

<img src="button.gif" style="cursor: pointer;" onclick="myAction()" />

효과를 위한 자바스크립트는 단순히 onclick을 이용해서 적용을 하고 <a>를 사용하지 않는다. 그리고 사용자가 마우스 포인터를 올렸을 때 손모양으로 나오는 것은 스타일로 처리하면 된다.

팝업창을 열 때(window.open)

<img src="openWindow.gif" onclick="window.open('popup.html', '', 'widht=300,height=200')">
<a href="#"><img src="openWindow.gif" onclick="window.open('popup.html', '', 'widht=300,height=200')"></a>

href에 #과 같은 의미 없는 값을 넣거나 onclick 안에 경로를 처리하는 경우가 있는데 팝업창은 링크이고 페이지가 별도로 존재 하기 때문에 <a>를 이용해서 기능을 구현하고 href엔느 해당 팝업의 경로를 넣어야 한다.

<a href="popup.html" onclick="window.open(this.href, 'popupName', 'width=300,height=200'); return false;"><img src="openWindow.gif"></a>

이럴 경우 사용자가 자신의 의도 대로 팝업창을 새창, 새탭 등으로 열 수 있고 심지어 즐겨 찾기도 할 수 있다.

자바스크립트를 이용한 페이지 이동

웹사이트를 이용하다 보면 폼에서 값을 입력하고 서밋을 하는 순간 "따다다닥" 하는 식으로 클릭을 여러번 한 것과 같은 소리가 나는 경우를 접하게 된다. 프로세스가 여러페이지에 걸쳐서 일어나게 되는데 이 처리를 자바스크립트로 처리를 해서 이러한 현상이 발생을 하게 된다.

<script type="text/javascript">document.location.href="redirection.html";</script>

위와 같이 페이지를 이동 하거나 아래와 같이 <form>을 이용해서 값을 넘기는 경우가 이러한 경우이다.

<form name="login_form">
	<input type="hidden" name="user_id" value="myid" />
	<input type="hidden" name="user_pwd" value="mypassword" />
	<input type="hidden" name="redirect_url" value="http://mysite.com/login/" />
	<input type="hidden" name="somevalue" value="blahblah" />
	...
</form>
<script type="text/javascript">
f = document.forms.login_form;
f.action = "http://login.oursite.com/login/";
...
f.submit();
</script>

심한 경우 아래와 같이 전혀 의미 없는 폼을 이용하기도 한다.

<form method="post" name="sg_form" action="http://www.qubi.com/" target="_top">
</form>
<script> sg_form.submit(); //3</script>

위와 같은 페이지들은 html 문법상 오류가 있는 페이지 들이고 이 때문에 작동이 안 될 수도 있다. <form>엘리먼트나 <script>엘리먼트는 상위에 <body>나 <head>엘리먼트가 있어야 하는데 위와 같은 경우 이러한 엘리먼트가 없기 때문에 html로 해석이 안되어 스크립트가 작동 되지 않거나 값이 넘어가지 않을 수도 있다. 그리고 <form>에 submit <input>이 없기 때문에 자바스크립트로 submit이 일어나지 않을 수도 있다.

이와 같이 페이지를 이동하거나 값을 넘길 필요가 있을 때 자바스크립트에 의존해서 이를 처리하게 되면 클라이언트의 환경에 따라서 동작이 실패할 수 있다. 따라서 이러한 처리는 자바스크립트에서 처리 하지 말고 서버 측에서 http헤더 정보를 이용해서 처리해야 한다.

이러한 중간과정에서의 처리를 서버측에서 모두 처리 하는 것이 가장 바람직 하지만 어쩔 수 없이 사용을 해야할 경우에는 - 그럴 경우가 많지는 않겠지만 기존의 호환성을 위해서 - DTD선언이나 <html> 루트 엘리먼트, <head>, <body>와 같이 필수 엘리먼트들이 존재하는 완결된 페이지를 사용 하도록 하고, 자바스크립트가 작동하지 않는 경우를 위해서 <form>에 submit버튼도 제공을 하고, 결과 메세지도 alert외에 일반 text와 <a>를 이용한 링크를 제공하도록 해야 한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Redirect</title>
</head>
<body>
<script type="text/javascript">
/*
 some processes...
*/
alert('이래저래한 이유로 다시 돌아 갑니다.');
document.location.href="redirection.html";
</script>
<p><a href="redirection.html">이래저래한 이유로 다시 돌아 갑니다.</a></p>
</body>
</html>

charset이 없는 경우 브라우져의 기본 설정으로 alert이 작동하기 때문에 브라우져의 기본 설정이 ko-kr이 아닌 경우 한글이 깨지게 된다. 문서의 mime-type도 text/html인지 확인해야 한다.

<form>에서의 자바스크립트 사용

일반적으로 <form>은 사용자가 입력한 값을 서버측에 전달하는 역할을 하고 그 전달은 <form>의 submit 기능을 통해서 이루어 진다. 이러한 폼을 구현 할 때에 일반적으로 자바스크립트를 사용하는 경우가 많다.

submit

폼은 그 자체적으로 값을 보내는 서밋기능을 제공하고 있다. <input type="submit" />이나 <input type="image" />이 서밋기능을 하는 컨트롤인데 폼의 값 유효성 체크를 하는 과정에서 이러한 폼의 자체적인 서밋기능을 이용하지 않고 자바스크립트로 폼 서밋을 하는 경우가 있다.

<script type="text/javascript">
function submitForm() {
	loginForm.submit();
}
</script>
<form id="loginForm" name="loginForm" action="">
	User Id <input type="text" name="loginId">
	User Password <input type="password" name="loginPassword"><br>
	<img src="login.gif" onclick="submitForm()">
</form>

위와 같은 경우 폼에 서밋기능이 없기 때문에 브라우져에 따라서 script로 서밋이 안되는 경우도 있고 서밋 대신에 이미지가 들어가 있기 때문에 의미적으로도 맞지 않게 된다. 따라서 폼을 제작할 때에는 반드시 서밋기능을 <input>을 이용해서 제공해야 한다.

<form id="loginForm" name="loginForm" action="">
	<p>
		<label for="loginId">User Id</label>
		<input type="text" id="loginId" name="loginId" /><br />
		<label for="loginPassword">User Password</label>
		<input type="password" id="loginPassword" name="loginPassword" />
	</p>
	<p>
		<input type="image" src="login.gif" alt="Login" />
	</p>
</form>

많은 경우 <html>제작 과정에서 서밋을 <img>로 넣는 경우가 있는데 이 경우 이를 그냥 사용하면 안되고 적절한 <input>으로 바꾸어서 사용해야 한다.

validation

클라이언트 측에서 자바스크립트를 이용한 유효성 검증은 <form>의 서밋 이벤트를 캐치하는 방식으로 구현해야 하고 자바스크립트가 폼을 서밋하는 방식을 사용하면 안된다.

<script type="text/javascript">
function submitForm() {
	if (!loginForm.loginId.value) {
		alert("아이디를 넣어주세요.");
		loginForm.loginId.focus();
	} else if (!loginForm.loginPassword.value) {
		alert("비밀번호를 넣어주세요.");
		loginForm.loginPassword.focus();
	} else {
		loginForm.submit();
	}
}
</script>
<form id="loginForm" name="loginForm" action="">
	아이디 <input type="text" name="loginId">
	비밀번호 <input type="password" name="loginPassword"><br>
	<img src="login.gif" onclick="submitForm()">
</form>

위와 같은 경우 자바스크립트만을 이용해서 폼을 서밋하고 있기 때문에 자바스크립트가 없이 HTML만으로는 기능이 작동하지 않는다.

<script type="text/javascript">
function submitForm(formEl) {
	//TrimAll(formEl);

	var errorMessage = null;
	var objFocus = null;

	if (formEl.loginId.value.length == 0) {
		errorMessage = "아이디를 넣어주세요.";
		objFocus = formEl.loginId;
	} else if (formEl.loginPassword.value.length == 0) {
		errorMessage = "비밀번호를 넣어주세요.";
		objFocus = formEl.loginPassword;
	}

	if(errorMessage != null) {
		alert(errorMessage);
		objFocus.focus();
		return false;
	}
	return true;
}
</script>

<form id="loginForm" name="loginForm" action="" onsubmit="return submitForm(this)">
	<label for="loginId">아이디</label> <input type="text" id="loginId" name="loginId" />
	<label for="loginPassword">비밀번호</label> <input type="password" id="loginPassword" name="loginPassword" /><br />
	<input type="image" src="login.gif" alt="Login" />
</form>

이와 같이 onsubmit 이벤트를 이용해서 폼의 유효성을 체크하고 그 결과를 true나 false로 보내줌으로써 폼이 스크립트에 따라서 서밋을 진행하거나 멈출 수 있고, onsubmit 이벤트가 발생하지 않아도 사용자는 폼을 사용할 수 있기 때문에 접근성이 높아지게 된다.

게시판 등에서 기능을 모두 자바스크립트로 하는 경우

게시판에서 페이지의 이동을 자바스크립트만으로 하는 것을 많이 볼 수 있다. 아래와 같이 사용자 인풋이 없는 빈 <form>을 하나 만들고 이것과 자바스크립트를 이용해서 글을 읽거나 페이지를 이동하는 것이다.

<form method="post" name="vars">
	<input type="hidden" name="articleId" value="23" />
	<input type="hidden" name="page" value="3" />
	<input type="hidden" name="keysord" value="" />
	<input type="hidden" name="searchType" value="" />
	<!-- 등등 -->
</form>

...

<a href="javascript:ArticleRead()">글읽기</a>
<a href="javascript:GoList()">리스트 보기</a>

url이 간단해 지고 다루기 쉽다는 이유로 이러한 방식으로 개발을 하는 경우가 많은 것 같은데 절대로 사용해서는 안되는 방식이다.

우선 위와 같이 모든 기능을 자바스크립트를 이용해서 구현을 하게 되면 자바스크립트 오류가 있거나 핸드폰과 같이 자바스크립트가 정상적으로 작동 하지 않는 상황에서는 접근을 할 수 없게 된다. 또한 모든 변수를 post를 통해서 전달하기 때문에 url에 표시가 되지 않고 해당 페이지를 따로 북마크 한다든지 저장을 할 수가 없게된다. 게시판의 경우 해당 게시물로의 접근을 쉽게 해 주어야 하는데 사용자가 url을 알 수 없게 함으로써 접근을 원천적으로 막게 된다.

자바스크립트를 이용하지 않고도 <a>와 url만으로도 작동 가능한 페이지를 만들고 QueryString을 효율적으로 다루는 방법을 모색하여 개발을 진행하는 것이 가장 좋은 방법이다.

마치며

본인이 웹사이트 개발을 하면서 접할 수 있었던 몇몇 잘못된 자바스크립트 사용 예를 적어 보았다. 그런데 놀라운 것은 이러한 개발 방식을 초보부터 어느정도 경력이 된 개발자들 까지 아무런 고민 없이 사용하고 있다는 것이다. 책이 잘못된 것인지 교육이 잘못 된 것인지 정확히 근원을 알 수는 없지만 많은 개발자들이 웹이 가지고 있는 기본적은 특성을 무시한채 잘못된 방법을 이용하여 개발을 하고 있는 것이 사실이다. 그리고 또 초보 개발자들은 HTML을 잘 모르기 때문에 이러한 개발 방식을 아무 고민 없이 그냥 받아들이고 있는 것이 사실이다.

브라우저 접근성을 가장 크게 낮추고 있는 것이 바로 이 잘못된 자바스크립트의 사용이다. 부디 조금이라도 많은 개발자들이 링크에 기초한 웹의 특성을 이해하고 접근성 높은 웹사이트, 웹 어플리케이션을 구축 하기를 바라는 바이다.

다운로드 : accessible-javascript.pdf(pdf 225KB)



Posted by 1010
98..Etc/weblogic2009. 4. 10. 15:20
반응형

출처 : http://blog.htdocs.kr/entry/Weblogic-815-Sun-Java-System-Web-Server-61-SP6-연동


1.  Sun Java System Web Server 6.1 SP6 (iPlanet) 설치
다음 URL 에서 다운로드 설치: http://www.sun.com/download/products.xml?id=44d819d9
설치된 파일 위치가 /usr/local/SUNwbsvr 에 있다 가정

2. Weblogic 8.1.6 설치
다음 URL 에서 다운로드 설치: http://commerce.bea.com/showallversions.jsp?family=WLS
설치된 파일 위치가 /usr/local/weblogic 에 있다 가정

3. WebServer 환경설정
SJS Web Server의 Configuration 파일들은 웹서버 홈디렉토리의 https-xxx/config 디렉토리에 위치함.
ex) /usr/local/SUNwbsvr/https-eServer/config

  • 연동에 필요한 라이브러리 파일 복사 - 서버가 다른 곳에 위치한다면 반드시 복사함.
    # cd /usr/local/weblogic/bea/weblogic81/server/lib/linux/i686
    # cp libproxy* /usr/local/SUNwbsvr/plugins

  • magnus.conf 수정 - 한 줄씩 작성
    # cd /usr/local/SUNwbsvr/https-eServer/config
    # vi magnus.conf

    magnus.conf (Language : xml)
    1. # 아래와 같이 마지막 줄에 추가
    2. Init fn="load-modules" funcs="wl_proxy,wl_init" shlib="/usr/local/SUNwbsvr/plugins/libproxy.so"
    3. Init fn="wl_init"

  • obj.conf 수정 - "NameTrans fn=..." 과 "PathCheck fn=..." 사이에 추가
    # vi obj.conf

    obj.conf (Language : xml)
    1. # Weblogic 으로 보내야 할것이 JSP 와 Struts를 사용하므로 DO 를 추가
    2. NameTrans fn=document-root root-"$docroot"
    3. Service method="(GET|HEAD|POST|PUT)" type=text/jsp fn=wl_proxy WebLogicHost=123.45.67.89 WebLogicPort=7001
    4. Service method="(GET|HEAD|POST|PUT)" type=text/do fn=wl_proxy WebLogicHost=123.45.67.89 WebLogicPort=7001
    5. PathCheck fn=unix-uri-clean
    6. #
    7. # Servlet을 사용하면 맨아래 다음 아래와 같이 추가
    8. #
    9. <Object name="weblogic" ppath="*/weblogic/*">
    10. Service fn=wl_proxy WebLogicHost=123.45.67.89 WeblogicPort=7001 PathTrim="/weblogic"
    11. </Object>

  • mime.types 수정
    type=magnus-internal/jsp 부분을 찾아서 text/jsp로 바꿈. (없으면 그냥 추가)

    mime.conf (Language : xml)
    1. type=text/jsp     exts=jsp
    2. type=text/do      exts=do

  • WebLogic 서버 서비스 확인

  • SJS Web Server 재시작
    콘솔을 이용하여 재시작 하거나 직접 시작해줌.
    # /usr/local/SUNwbsvr/https-eServer/start

    [LS ls1] http://123.45.67.89 port 80 ready to accept requests
    startup: server started successfully

    위와 같이 메시지가 보이면 성공
  • WebLogic에 JSP 페이지를 작성한 후 http://123.45.67.89 로 접속하여 작성한 JSP가 나오면 연동 성공

※ 자세한 메뉴얼은 http://www.itadvisor.co.kr 에서 다운받을 수 있음. 
Posted by 1010
98..Etc/weblogic2009. 4. 10. 15:08
반응형

WebLogic Platform 8.1 Installation

Guide and so on



Table of Contents

1. WebLogic Platform 8.1 설치 4
1.1. Windows에서 GUI mode로 설치 4
1.2. Unix에서 Console mode로 설치 8
1.2.1. .bin 설치 파일인 경우 8
1.2.2. .jar 설치 파일인 경우 14
1.3. Silent mode로 설치 15
2. Domain Configuration Wizard로 Domain 생성 16
2.1. Wizard를 시작 16
2.2. 새로운 Domain을 생성 17
2.3. Domain의 종류를 선택 17
2.4. Configuration 방법 선택 18
2.5. Administrative username과 pasword설정 18
2.6. Startup mode와 JDK 선택 19
2.7. Summary 와 Domain 이름을 설정 19
2.8. Domain Configuration 결과 20
3. Apache Plug-In 사용방법 21
3.1. Apache HTTP Server Plug-In 정보 21
3.2. Plug-In의 설치 22
3.2.1. 해당하는 플랫폼용 Shared Object 디렉토리로 이동 22
3.2.2. 사용할 Plug-In파일을 선택 22
3.2.3. mod_so.c module의 상태를 점검 22
3.2.4. Apache HTTP Server용 Plug-In을 설치 23
3.2.4.1. Apache 1.x일 경우 23
3.2.4.2. Apache 2.x일 경우 24
3.2.5. Apache HTTP Server Plug-In을 위한 httpd.conf파일 수정 24
3.2.5.1. httpd.conf파일을 open 24
3.2.5.2. WebLogic Server module 확인 24
3.2.5.3. IfModule 블럭을 추가 24
3.2.5.4. IfModule 블록에 MatchExpression을 추가 24
3.2.5.5. t3와 IIOP를 위한 HTTP tunneling 설정(Optional) 25
3.2.5.6. weblogic.conf파일을 사용한 설정(Optional) 25
3.2.6. httpd.conf파일의 syntax 검증 26
3.3. WebLogic Server를 다시 시작 27
3.4. Apache HTTP server를 다시 시작 28
3.5. Plug-In 테스트 29
3.5.1. 테스트용 JSP 29
3.5.2. Web Application을 생성(Default Web Application으로 설정) 29
3.5.3. Web Application을 배포 30
3.5.4. 테스트 34
4. Default Web Application 설정방법 36
5. JDBC 관련 설정방법 37
5.1. JDBC Connection Pool 37
5.1.1. Start Script의 CLASSPATH에 JDBC driver 추가 37
5.1.2. WebLogic Server를 시작 38
5.1.3. JDBC Connection Pool 설정 39
5.2. DataSource 44

Posted by 1010
98..Etc/weblogic2009. 4. 10. 15:03
반응형
WebLogic Server 8.1을 설치하는 것은 매우 간단하다. BEA 홈페이지에서 설치하고자 하는  OS에 맞는 WebLogic Server 8.1 SP6를 다운 받은 다음에 실행 권한을 주고 실행해 주면 된다.

$ ./server816_linux32.bin
Extracting 0%....................................................................................................100%
Unable to instantiate GUI, defaulting to console mode.

프로그램을 실행시키면 먼저 압축되어 있는 설치 파일의 압축을 제거한 한다. GUI 모드에서 실행했다면 설치가 좀더 쉬운 화면이 보였겠지만 지금은 콘솔에서 설치해서 console mode로 기동한다.

<--------------------- BEA Installer - WebLogic Server 8.1 SP6 -------------------->

Welcome:
--------

This installer will guide you through the installation of WebLogic Server 8.1 SP6. Type "Next" or enter to proceed to the next prompt.  If you want to change data entered previously, type
"Previous".  You may quit the installer at any time by typing "Exit".




Enter [Exit][Next]>


다음으로는 WebLogic 설치에 대한 환영인사가 나타난다. 설치가 싫으면 Exit를 입력하라고 한다. 머 언제든지 설치를 중단할 수 있기 때문에 신경 쓰지 않아도 된다. 우선 Enter를 눌러 설치를 진행한다.

<--------------------- BEA Installer - WebLogic Server 8.1 SP6 -------------------->

BEA Systems License Agreement:
------------------------------

BEA SYSTEMS, INC. SOFTWARE LICENSE AGREEMENT

USE OF SOFTWARE ORDERED FROM BEA SYSTEMS, INC. ("BEA") IS PROVIDED ONLY UNDER LICENSE FROM BEA. PLEASE READ THE FOLLOWING LICENSE CAREFULLY AND INDICATE YOUR ACCEPTANCE BY CLICKING THE ACCEPTANCE
BOX. CERTAIN CAPITALIZED TERMS ARE DEFINED IN SECTION 11.

1.      LICENSE TERMS

a.      WebLogic SDK Use.  The terms of this Section 1(a) are applicable to you if you have registered as a WebLogic SDK customer. Subject to the terms of this Agreement, BEA grants to you a
non-exclusive, non-transferable, royalty-free license to use WebLogic SDK solely for Development Use and Scale-Limited Personal Use for the number of users and/or developers and the number of
CPU's, Servers and/or at the Sites, as specified at the time of registration. Third party software products or modules supplied by BEA, if any, may be used solely with the Software. All rights not specifically granted to you herein are retained by BEA.

...

i.      Territory.  The license grants hereunder are limited to use within the Territory.

Select Option:
    1 - Yes, I agree with the terms of the license
    2 - No, I do not agree with the terms of the license




Enter option number to select OR [Up][Down][Exit][Previous]> 1

WebLogic Server의 라이센스 조항이 나오고 이 라이센스에 동의하면 1번을 누르라고 한다. 동의를 안하면 설치가 중단된다. 선택이 있겠는가 1번을 눌러 설치를 진행한다.

<--------------------- BEA Installer - WebLogic Server 8.1 SP6 -------------------->

Choose BEA Home Directory:
--------------------------

    "BEA Home" = [/app/bea/bea]



Input new BEA Home OR [Exit][Previous][Next]> /app/bea

BEA 홈 디렉토리의 위티를 물어본다. Enter를 입력하면 기본 위치인 /app/bea/bea가 설정되고 변경하고자 한다면 원하는 디렉토리를 입력한다.

<--------------------- BEA Installer - WebLogic Server 8.1 SP6 -------------------->


Choose Install Type:
--------------------

 ->1|Complete
    |Install the complete BEA WebLogic Platform.

   2|Custom Installation
    |Choose software components to install and perform optional configuration.




Enter index number to select OR [Exit][Previous][Next]> 1

전체 설치를 할건지 필요한 컴포넌트만 설치할 것인지를 물어보는 창이 뜬다. 쉽게 설치를 하려면 전체 설치를 선택한다.

<--------------------- BEA Installer - WebLogic Server 8.1 SP6 -------------------->

Choose Product Directory:
-------------------------

    "Product Installation Directory" = [/app/bea/weblogic81]



Input new Product Installation Directory OR [Exit][Previous][Next]>

WebLogic Server 8.1 제품이 설치될 위치를 결정한다. 원하는 위치가 있다면 원하는 위치를 적어준다. 기본은 $WL_HOME/weblogic81로 설정된다.

<--------------------- BEA Installer - WebLogic Server 8.1 SP6 -------------------->

Installing files..

0%          25%          50%          75%          100%
[------------|------------|------------|------------]
[***************************************************]

설치가 진행되며 '*'가 모두 채워지면 파일이 생성되는 등의 설치가 완료된다.

<--------------------- BEA Installer - WebLogic Server 8.1 SP6 -------------------->

Installing JDK....

0%          25%          50%          75%          100%
[------------|------------|------------|------------]
[***************************************************]

설치가 완료된 줄 알았는데.. JDK를 설치 한다고 한다.

<--------------------- BEA Installer - WebLogic Server 8.1 SP6 -------------------->

Installation Complete


Congratulations! WebLogic Server 8.1 SP6 has been successfully installed to /app/bea/weblogic81.


Press any key to continue OR [Exit]>

드디어 설치가 완료되었다. Enter키를 누르면 끝이다.

$ ls -la
total 350860
drwx------ 11 bea  web       4096 2007-11-16 11:53 .
drwxr-xr-x  5 root root      4096 2007-11-15 13:45 ..
-rw-------  1 bea  web       2405 2007-11-16 18:19 .bash_history
-rw-r--r--  1 bea  web         33 2007-11-15 13:45 .bash_logout
-rw-r--r--  1 bea  web        284 2007-11-16 10:09 .bash_profile
-rw-r--r--  1 bea  web        124 2007-11-15 13:45 .bashrc
drwxr-xr-x  2 bea  web       4096 2007-11-16 10:15 bea
drwxr-xr-x  3 bea  web       4096 2007-11-16 10:58 domains
drwxr-xr-x  2 bea  web       4096 2007-11-16 10:10 ext_components
drwxr-xr-x  7 bea  web       4096 2007-11-16 10:10 jdk142_11
drwxr-xr-x 10 bea  web       4096 2007-11-16 10:11 jrockit81sp6_142_10
-rw-r--r--  1 bea  web      11514 2007-11-16 10:10 license.bea
-rw-r--r--  1 bea  web      10467 2007-11-16 10:10 license_scale_limited.bea
drwxr-xr-x  2 bea  web       4096 2007-11-16 10:16 logs
-rw-r--r--  1 bea  web         91 2007-11-16 10:07 .mailcap
-rw-r--r--  1 bea  web        230 2007-11-16 10:07 .mime.types
-rw-r--r--  1 bea  web       1446 2007-11-16 10:11 registry.xml
-rwxr-xr-x  1 bea  web  358708754 2007-11-15 14:16 server816_linux32.bin
-rwxr-xr-x  1 bea  web        851 2007-11-16 10:10 UpdateLicense.sh
drwxr-xr-x  3 bea  web       4096 2007-11-16 10:10 utils
-rw-------  1 bea  web       4902 2007-11-16 11:53 .viminfo
drwxr-xr-x  3 bea  web       4096 2007-11-16 11:13 webapps
drwxr-xr-x  8 bea  web       4096 2007-11-16 10:10 weblogic81
-rw-r--r--  1 bea  web        658 2007-11-15 13:45 .zshrc


설치가 완료되면 위와 같은 디렉토리가 생긴다. 설치된 디렉토리를 보면 WebLogic Server 엔진 디렉토리와 JDK 들이 설치된다.

다음에는 WebLogic Server를 이용하여 Admin Server와 Managed Server를 만들어보기로 한다.
Posted by 1010
98..Etc/Etc...2009. 4. 7. 11:50
반응형

블러그에 글을 올리다가 항상 아쉬웠던 것이 소스코드 편집문제였다

개발툴에 있는 Edit 처럼 사용자 편의대로 편집할수도 없고 여간 불편한게 아니였다.
그러다 SyntaxHighlighter 이라는 자바 스크립트를 알게되었다.

http://code.google.com/p/syntaxhighlighter/
구글 사이트에 가면 소개가 되어있다.

소스는 옆 탭 downloads 를 눌러 받으면 된다.


압축을 풀고 관리자 > 스킨 > HTML/CSS 편집을 클릭한다.


파일 업로드 탭을 선택하고 압축푼 폴더중에 Script., Styles 에 있는 파일을 업로드한다


그리고 HTML/CSS 편집 탭을 클릭하여 Head 부분에 아래와 같은 스크립트
삽입 태그를 넣는다.


<!-- SyntaxHighlighter Include souce Start -->

<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>

<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shBrushCpp.js"></script> 

<script type="text/javascript" src="./images/shBrushCSharp.js"></script>  

<script type="text/javascript" src="./images/shBrushCss.js"></script>   

<script type="text/javascript" src="./images/shBrushDelphi.js"></script>    

<script type="text/javascript" src="./images/shBrushJava.js"></script>      

<script type="text/javascript" src="./images/shBrushJScript.js"></script>       

<script type="text/javascript" src="./images/shBrushPhp.js"></script>        

<script type="text/javascript" src="./images/shBrushPython.js"></script>         

<script type="text/javascript" src="./images/shBrushRuby.js"></script>          

<script type="text/javascript" src="./images/shBrushSql.js"></script>           

<script type="text/javascript" src="./images/shBrushVb.js"></script>           

<script type="text/javascript" src="./images/shBrushXml.js"></script>             

<script language="javascript">

 dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';

 dp.SyntaxHighlighter.HighlightAll('code');

</script>

<!-- SyntaxHighlighter Include source End -->

 

지원하는 언어는 다음과 같다

Language

Aliases

C++

cpp, c, c++

C#

c#, c-sharp, csharp

CSS

css

Delphi

delphi, pascal

Java

java

Java Script

js, jscript, javascript

PHP

php

Python

py, python

Ruby

rb, ruby, rails, ror

Sql

sql

VB

vb, vb.net

XML/HTML

xml, html, xhtml, xslt

 

설정값에 따라 표현형식을 바꿀수가 있는데 다음과 같은 속성이 있다

속성

설명

nogutter

Will display no gutter

nocontrols

Will display no controls at the top

collapse

Will collapse the block by default

firstline[value]

Will begin line count at value. Default value is 1.

showcolumns

Will show row columns in the first line.

 

이것들을 한번씩 설정해서 그 변화된 모습을 보면 금방 이해할것같다

화면에서 사용할때는 다음과 같이 태그중간에 코드를 삽입하면된다

class java 가 들어간거보니 stylesheet 에서 java 언어에 대한 값을

적용하는 것이다. 위의 표처럼 원하는 언어를 선택해서 class 값에 넣어주면 된다

<TEXTAREA class="java" name="code" rows=10 cols=50>

  <!-- 소스코드삽입 -->

</TEXTAREA>

 

<PRE class="brush:c#" name="code">

  <!-- 소스코드삽입 -->

</PRE>

버전이 몇부터인지는 모르겠으나 <TEXTAREA> 태그가 안먹는다고 한다.
그럴땐 밑에 PRE 태그를 사용한다.

한번 적용한 모습이다
. 이제 소스 정리가 깔끔하게 되는거 같아 정말 좋다.


한참 미루었던 일을 치루니 일주일 변비가 한꺼번에 분출된거 같아 정말 시원하다
..

역시 일은 미루면 어느모로 보나 손해다 ㅋㅋ


출처 : http://mainia.tistory.com/category/유틸리티

Posted by 1010
02.Oracle/DataBase2009. 4. 7. 11:48
반응형
각 게시판에 최근글을 모아서 리스트를 만들려고 시도했던 적이있다.
UNION ALL 과 ORDER BY 구문을 쓰다가 에러났는데 해결되었다.
-- 에러구문
(SELECT TOP 1 No, Title, Idate FROM tbCellPhoto ORDER BY Idate DESC
UNION ALL
SELECT TOP 1 No, Title, Idate FROM tbExchange ORDER BY Idate DESC)
ORDER BY Idate DESC

-- 문법
SELECT ....
FROM (SELECT TOP 1 ...
FROM ...
ORDER BY ...) AS x
UNION ALL
SELECT ....
FROM (SELECT TOP 4 ...
FROM ...
ORDER BY ... DESC) AS y

-- 다음과 같이 적용시켯다
SELECT TOP * FROM (
select * from (SELECT TOP 5 No, Title, Idate, path = '/Border/CellPhoto' FROM tbCellPhoto ORDER BY No DESC) AS a1
UNION ALL
select * from (SELECT TOP 5 No, Title, Idate, path = '/Border/Confession' FROM tbConfession ORDER BY No DESC) AS a2
) AS a3
ORDER BY Idate DESC
Posted by 1010
02.Oracle/DataBase2009. 4. 7. 11:48
반응형
게시판의 제일 최근글을 가져오는 쿼리를 합치고 정렬하면 될것같아서 다음과 같이 해봤다
-- 최근글 하나를 얻어온다
SELECT TOP 1 No, Title, Idate FROM tbCellPhoto ORDER BY Idate DESC

위쿼리를 UNION ALL 로 합치면 될것이다. UNION 과의 차이는 중복을 허용하느냐 아니냐의 차이이다.
-- 이쿼리는 ORDER 에러가 났다
(SELECT TOP 1 No, Title, Idate FROM tbCellPhoto ORDER BY Idate DESC
UNION ALL
SELECT TOP 1 No, Title, Idate FROM tbExchange ORDER BY Idate DESC)
ORDER BY Idate DESC

위쿼리는 에러가 나서 못쓰고 최근글을 얻어오는 쿼리를 바꾸어야 했다. 이것도 최근글 얻어오는쿼리이다.
-- No 제일 큰값과 일치하는 No 의 글 하나를 얻어오는것
SELECT TOP 1 No, Title, Idate, path = '/Border/Exchange' FROM tbExchange
WHERE No = (SELECT MAX(No)  FROM tbExchange)

그리고 위의 쿼리를 UNION ALL 과 합쳐서 결과 값을 얻어 올수 있었다. 테이블이 많이 좀 무식한 방법이라
생각이 들지만 아직 이방법밖에는 생각이 나지 않는다.
SELECT TOP 1 No, Title, Idate, path = '/Border/Exchange' FROM tbExchange
WHERE No =  (SELECT MAX(No)  FROM tbExchange)
UNION ALL
SELECT TOP 1 No, Title, Idate, path = '/Border/Confession' FROM tbConfession
WHERE No = (SELECT MAX(No)  FROM tbConfession)

path = '/Border/Exchange'  값을 넣은것은 메인에 최근글을 링크했을경우 클릭하면 그 본문을 찾아가야 되는데
그 글의 본문 경로를 임의로 넣었다.


출처 : http://mainia.tistory.com/entry/각각의-게시판에서-제일-최근글하나씩을-모아-정렬
Posted by 1010
반응형

오라클에서 rownum 은 쿼리가 실행될 때 결과 레코드에 번호를 나타내어 주는 필드이다.

물론 table 을 만들 때 rownum 을 만들어줄 필요는 없다.

어떠한 테이블이라도 "select rownum from boardtable" 의 형태로 쿼리를 날리면 레코드에

번호컬럼이 생기는 것을 볼수 있다.

따라서 페이징을 위한 쿼리에서 우리는 rownum 10 보다 크고 20 보다 작은

이런 식의 조건을 주어 원하는 범위의 레코드만 쿼리 할수 있다.

Select * from boardtable where rownum > 10 and rownum <=20

 

위와 같이 쿼리 하면 어떨가? 결과가 하나도 않나올 것이다. 왜냐하면 쿼리가 실행될 때

Where 부분이 먼저 실행한다. Select 하기 전에 rownum 이 발생하지 않기 때문에

rownum 할 데이터가 없어서 아무 값도 가져오지 못하게 되는것이다.

다시 쿼리를 수정하게 되면 다음과 같다.

Select 서브 쿼리를 날려서 먼저 데이터를 가져온후에 rownum 을 하는것이다.

Select * from (select rownum numrow, boardtable from boardtable)

Where numrow > 10 and numrow <= 20

 

여기에서 문제가 다 해결된건 아니다. Order by 절을 사용하게 되면 또다른 문제에 직면하게 된다

Select * from (select rownum numrow, boardtable from boardtable order by reg_date desc)

Where numrow > 10 and numrow <= 20

 

실행해 보면 원하는 결과가 나오지 않는 것을 알수있을것이다.

이유는 order by rownum 값을 만드는데 영향을 못주는 것으로 생각된다.

order by 를 지정한다고 해도 rownum 은 최초의 order by 가 없는 상태로 만들어진다.

원하는 형태의 정렬 데이터를 rownum 하고 싶다면 서브쿼리를 order by 절로 날린후

Rownum 을 매기면 된다.

Select rownum numrow, aa.* from (select * from boardtable order by reg_date desc) aa

 

여기에 범위지정 쿼리를 써넣게 되면 어떻게 될까? 위에서 설명한 대로 아무값도 안나오게 된다

Select rownum numrow, aa.* from (select * from boardtable order by reg_date desc) aa

Where numrow > 10 and numrow <= 20

 

이것을 제대로 구현할려면 한번더 select 구문 서브쿼리를 날려야한다.

Select * from (select rownum numrow, aa.* from (select * from boardtable order by reg_date desc) aa ) where numrow > 10 and numrow <= 20

 

이와 같이 하게 되면 서브쿼리를 몇번이나 날리게 되어 데이터 양이 많을경우

퍼포먼스에 문제가 생길수가 있다. 그래서 index hint 절을 사용하여 성능을 향상시켜준다.

Index order by 구문에 나오는 reg_date 를 주면될것이다.

Create unique index  idx_board_reg_date on boardtable (reg_date, idx)

Posted by 1010
반응형

자바스크립트 객체의 종류와 설명이다
document : 현재 웹 페이지의 본문을 나타낸다. 이 객체를 사용하면 링크(link), 이미지, 앵커(anchor) 등과
                같은 웹 페이지의 모든 구성요소에 접근할 수 있다.

history : 웹 브라우저에서 현재 페이지를 열기 전까지의 사이트 기록을 같고있다. 이객체를 사용하면,
            히스토리(history) 목록을 통해 이전 페이지 또는 다음 페이지로 이동할 수 있다.

location : 현재 웹 페이지의 위치에 대한 URL, 도메인이름, 경로, 서버포트 등의 정보를 갖는다.

navigator : 실제로 브라우저 자체를 가리킨다. 이 객체를 사용하면, 사용중인 브라우저의 종류를 알아낼 수 있다.

window : 현재 브라우저 창을 가리키며, 여러가지 강력한 메소드들을 제공한다.
             Internet Explorer에서는 event라는 하위 객체를 사용하여 이벤트를 처리할 수 있다.

■ location 객체 프로퍼티

href 문서의 URL 주소 위 주소 전체
host 호스트 이름과 포트 http://www.codewiz.co.kr:80
hostname 호스트 컴퓨터이름 http://www.codewiz.co.kr
hash 앵커이름 #top
pathname 디렉토리 이하 경로 /column2/list.asp
port 포트번호 부분 80
protocol 프로토콜 종류 http:
search URL 조회부분 table=table30&page=2

location 객체 메서드
eval() 문자열을 숫자로 바꿈
toString() 오브젝트를 문자열로 바꿈
reload() 현재 문서를 다시 읽어옴
replace() 현재 문서를 다른 URL 문서로 바꿈
valueOf() 오브젝트 값을 표시
toSource() 오브젝트 값을 문자열로 표시

■ 활용예제

<script language="javascript">
// URL을 이동시킴
location.href= http://codewiz.com
//location.href= "login.html"
</script>
<script language="javascript">
alert("회원가입을 하시겠습니까?")
location.href= "member.html"
</script>
<script language="javascript">
// 연 창의 URL 이동
opener.location.href= "member.html"
</script>
<script language="javascript">
// 부모창 지정프레임의 URL 이동
parent .frame1.location.href= "member.html"
</script>
<script language="javascript">
// 전체창에 새 페이지 열기
top.location.href= "index.html"
</script>


활용예제이다.
// 역슬레쉬로 구분해서 배열을 만든다
var path = parent.frames["input"].location.pathname.split('/');
// 배열의 마지막 요소의 값을 저장한다
var temp = "";
temp = path[path.length - 1];


출처 : http://mainia.tistory.com/entry/현재페이지를-알아오는-방법

Posted by 1010
반응형

전체 쿠키 정보를 Text 로 출력한다 . 모든 쿠키에 대한 정보를 알아볼려면  document.cookie 를 호출하면 된다. 집어 넣는 곳은 cookieOut 이라는 DIV 내에 Text 를 출력하는  로직이다.
// 모든 쿠키출력
function viewCookie()
{
   if( document.cookie.length > 0 )
      cookieOut.innerText = document.cookie;
   else
      cookieOut.innerText = "저장된 쿠키가 없습니다.";
}
// 출력화면
<DIV id = "cookieOut"></DIV>


저장된 쿠키값을 쿠키명으로 검색해서 넘겨주는 함수이다.
// param : 쿠키명
// return : 쿠키값
function getCookie( cookieName )
{
   var search = cookieName + "=";
   var cookie = document.cookie;

   // 현재 쿠키가 존재할 경우
   if( cookie.length > 0 )
   {
       startIndex = cookie.indexOf( cookieName );// 해당 쿠키명이 존재하는지 검색후 위치정보를 리턴.

       if( startIndex != -1 ) // 존재한다
      {
         startIndex += cookieName.length;// 값을 얻어내기 위해 시작 인덱스 조절
         endIndex = cookie.indexOf( ";", startIndex );// 값을 얻어내기 위해 종료 인덱스 추출
         if( endIndex == -1) endIndex = cookie.length; // 만약 종료 인덱스 못찾으면 쿠키 전체길이로 설정

         return unescape( cookie.substring( startIndex + 1, endIndex ) );// 쿠키값을 추출하여 리턴
      } else {
         return false; // 존재하지 않을때
      }
   } else {
      return false; // 쿠키 아예없을때
   }
}

쿠키값을 설정한다. 파라미터로는 쿠키명, 쿠키값, 쿠키날짜를 넘긴다
function setCookie( cookieName, cookieValue, expireDate )
{
   var today = new Date();
   today.setDate( today.getDate() + parseInt( expireDate ) );
   document.cookie = cookieName + "=" + escape( cookieValue ) + "; path=/; expires=" +                
           today.toGMTString() + ";"
}


쿠키명을 넘겨 해당하는 쿠키를 삭제한다
function deleteCookie( cookieName )
{
   var expireDate = new Date();
 
   //어제 날짜를 쿠키 소멸 날짜로 설정한다.
   expireDate.setDate( expireDate.getDate() - 1 );
   document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString() + "; path=/";
}



Posted by 1010
반응형
부모창에서 자식 새창으로 submit 데이타를 보낼때 자식창에선 그것을 데이타 크기에 맞게
늘렸다 줄였다 할수있다. 이것은 프린트 공통 화면을 만들때 유용하게 쓰인다.
내용은 화면이 시작되고 나서 밑쪽에 initWindow 함수가 실행되게 된다.

<html>
<head>
#parse("common/common_head.vm")
<link href="${rc.contextPath}/css/ord.css" rel="stylesheet" type="text/class" />
<script language="JavaScript">
<!--
 // submit 넘어오는 html 데이타를 화면 크기에 맞게 배치해준다.
 function initWindow(win){
    var winBody = win.document.body;
    // 새창의 사이즈에 더해줄 marginWidth 와 marginHeight
    var marginHeight = parseInt(winBody.topMargin)+parseInt(winBody.bottomMargin);
    var marginWidth = parseInt(winBody.leftMargin)+parseInt(winBody.rightMargin);
    // 새창의 사이즈 설정
    var wid = winBody.scrollWidth + (winBody.offsetWidth - winBody.clientWidth) + marginWidth - 5;
    var hei = winBody.scrollHeight + (winBody.offsetHeight - winBody.clientHeight) + marginHeight + 17;
    // 사이즈 재조정
    win.resizeTo(wid, hei);
 }
 
 var initBody; // 프린트 실행전 내용이 담기는 공간
 function beforePrint(){
    initBody = document.body.innerHTML;
    document.body.innerHTML = resultPrint.innerHTML;
 }
 function afterPrint(){
    document.body.innerHTML = initBody;
 }
 function printArea(){
    window.print();
 }
 window.onbeforeprint = beforePrint; // 프린트 하기 이전의 내용실행 해서  body 의 내용을 바꾼다.
 window.obafterprint = afterPrint; // 프린트 후 함수를 실행하여 이전에 저장해놨던 정보로 내용을 바꾼다.
//-->
</script>
</head>
<body>
 <table width="100%" border="0" cellspacing="0" cellpadding="10">
   <tr>
     <td valign="top">
     <DIV id="resultPrint">
      $!{print}
     </DIV>
     </td>
   </tr>
   <tr>
    <td><a href="javascript:printArea();"> 프린트 하기 </a></td>
     </tr>
 </table>
 <script language='javascript'>
 <!--
  initWindow(this);
 //-->
 </script>
</body>
</html>

Posted by 1010
반응형
javascript 가 복잡해지면 에러를 찾기가 만만치 않다. 그래서 브라우저에 포함된 디버깅툴이 있다면
상당히 프로그램하기에 편할뿐더라 생산성 또한 높일수 있을것이다.
파이어폭스 플러그인 Firebug 의 콘솔 API 와 유사한데 IE 사용할수 있다.
Companion.JS 이며 http://www.my-debugbar.com/wiki/CompanionJS/Homepage 에서 다운받을수있다.

이프로그램을 먼저 설치하기 전에 Microsoft Script Debugger 를 먼저설치한다.
http://www.microsoft.com/downloads/details.aspx?familyid=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en

다음은 스크립트 디버딩사용안함 을 체크해제한다.

사이트에 가서 다운로드 한다.

설치를 하게 되면 익스플로어에 다음과 같이 설치가 된다.

아래 그림과 같이 디버깅 창이 나오게 된다.
Posted by 1010
반응형

브라우저의 종류에 따라서 text 값을 바꾸는 방식이 모두다 적용되는것은아니다.
아래 내용은 IE6, Netscape 6.2 and 7, Firefox 1.04,  Opera 8 on the PC. 동일하게 적용되는
과정을 알아본다.

<input type="button"> 선언된 버튼의 value 값을 바꿔보는데
첫번째 예제는  getElementById("ID").value 변수로 값을 바꾸는 방식이다

<input type="button" value="Button Text" id="myButton1"></input>
document.getElementById("myButton1").value="New Button Text";

위의 방식은 IE6 에서는  "Unknown Runtime Error; Netscape 7 에서는  won't change the text
에러가 날것이다. 그래서 두번째는 innerHTML 을 사용해서 바꾸는 방식이다.

document.getElementById("myButton1").innerHTML="New Button Text";

다음은 버튼 태그 사이의 text  값을 바꿔본다.
innerHTML 을 사용해서 바꾸었다.

document.getElementById("myButton2").innnerHTML=  "New Button Text using innerHTML";
<button type="button" id="myButton2">Button Label</button>

위의 방식은 Netscape 6.2 and 7.02 에서 쓰레기 값을 가져오게 되어 에러가 발생한다.
그래서 childNodes  를 아래와 같이 사용한다.
이와 같이 값을 바꾸고자 할때 버전에 구애받지 않게 적용하고 싶을 것이다.
아래의 함수는 처음에 childNodes 바꿀수 있는지 체크해서 시도하고 그게 안된다면 value 로 적용한다
그리고 그것도 안된다면 innerHTML 을 사용하는 전천후 함수이다.

<SCRIPT LANGUAGE="JavaScript">

<!--

function replaceButtonText(buttonId, text)

{

  if (document.getElementById)

  {

    var button=document.getElementById(buttonId);

    if (button){

      if (button.childNodes[0]){

        button.childNodes[0].nodeValue=text;

      }

      else if (button.value){

        button.value=text;

      }

      else //if (button.innerHTML){

        button.innerHTML=text;

      }

    }

  }

}

//-->

</SCRIPT>

replaceButtonText('myButton1', 'new button text');

Posted by 1010
반응형

<script language="javascript">

<!--

function add(){

   var target = document.getElementById("dynamicTable");

   var currentRowIndex = target.rows.length;

   var row = target.insertRow(-1);

   var cell = row.insertCell(-1);

   cell.innerHTML = "<input type='text' name='point"+ currentRowIndex +

         "' size='5' maxlength=='5' value='20'>&nbsp;&nbsp;" +

         "<select name='scope" + currentRowIndex + "'>" +

         "<option>초과</option>" +

         "<option>이상</option>" +

         "<option>이하</option>" +

         "<option>미만</option>" +

         "</select>";

}

 

function checkToggle(form){

   var i=1;

   var isDisabled = (form.auto.checked) ? true : false;

   while(true){

      var scopeElement = form["scope" + i];

      var pointElement = form["point" + i++];

      if (scopeElement){

          scopeElement.disabled = isDisabled;

          pointElement.disabled = isDisabled;

      }else{

          break;

      }

   }

}

//-->

</script>

</head>

 

<body>

<form name="form">

   <input type="checkbox" name="auto" onclick="checkToggle(this.form)"> Disabled 된다

   <input type="button" value="add" onclick="add()">행추가

   <table id="dynamicTable" border="0" cellpadding="5" cellspacing="1" align="center">

     <thead>

       <tr align="center">

         <td width="130">점수</td>

       </tr>

     </thead>

     <tbody>

        <tr align="center">

           <td colspan="4">

      <input type="text" name="point1" size="5" maxlength="5" value="20">

      &nbsp;&nbsp;

              <select name="scope1">

                 <option>초과</option>

                 <option>이상</option>

                 <option>이하</option>

                 <option>미만</option>

              </select>

            </td>

        </tr>

     </tbody>

  </table>

</form>

</body>
Posted by 1010
반응형
javascript 에서 input 값에 숫자이외의 글을 넣었을때 더이상 입력이 되지 않도록 막는 소스이다.

<script language="JavaScript">
function checkForNumber() {
  var key = event.keyCode;
  if(!(key==8||key==9||key==13||key==46||key==144||
      (key>=48&&key<=57)||key==110||key==190)) {
      event.returnValue = false;
  }
}
</script>

javascript 함수는 위의 것을 쓰면되고 Input 에 key 입력시 event 객체가 가로채서 그 내용을
분석한후 event.returnValue = false 리턴하게 되면 더 이상 키의 값을 입력할수 없게 해준다.
이것을 활용하여 여러가지 입력형태의 제한을 만들어서 사용하면 유용할 것이다

<input type="text" name="aaa" style="ime-mode:disabled;" onkeypress="checkForNumber();">
Posted by 1010