WCMS는 (주)워드앤코드에서 제공하는 콘텐츠 관리 솔루션이다

================================================================================

 

이제 CMS게시판에 대한 필드까지 생성했기 때문에 게시판 생성 작업은 기초적인 부분은 끝났다고 봐야 한다.

이제 게시판 XSLT변경 즉 스타일 변경에 대해 알아보자

 

 

 

상기 화면과 같이 게시판 필드가 생성되고 나면

 

관리자 리스트, 관리자 뷰, 관리자 글쓰기 폼에 대한 XSLT내용중 해당 부분을 수정할 수 있는 화면이 나온다

또한 사용자에 대한 부분도 리스트, 뷰, 폼에 대한 기본 XSLT가 만들어지고 수정이 가능하도록 되어 있다.

 

이 부분은 게시판을 생성하고 스타일을 변경하고자 할때 설정옵션에서 6가지 XSLT에 대한 수정을 선택하면  마지막에 수정화면이 나온다.

 

간단하게 XSLT구성이 어떻게 되어 있는지 확인해보자

 

 

 

상기 이미지와 같이 XSLT가 기본적으로 구성되고 그 다음 관리자가 수정이 가능하도록 구성되어 있다.

 

지금까지의 포스트의 순서대로 게시판을 생성하고 나면

게시판 이름 디렉토리 밑에 file, images, XML, XSL이라는 디렉토리가 생성된다.

file에는 첨부파일이나 이미지 파일이 등록되는 폴더이고 그 하위에 Thum이라는 폴더가 생겨 썸네일을 생성하여 저장한다.

 

images폴더에는 게시판 환경설정을 하면서 업로드하는 파일 예를 들면 게시판 제목이미지, 신규글 이미지 같은것이 등록된다.

 

그리고 게시판을 엮는 가장 중한 XML폴더와 XSL폴더를 살펴보자

XML폴더에는

게시판 필드정보인 board_게시판이름_field.xml파일과 게시판 옵션 정보가 담겨있는 board_게시판이름_option.xml파일이 있어 게시판을 처음 호출할때나 XSLT를 구성할때 필요한 정보를 가져온다.

또한 DB에서 가져와야 할 테이타 항목에 대한 정보를 저장하고 있다.

 

XSL폴더에는 게시판을 구성하고 있는 리스트, 뷰, 글쓰기폼, 글읽기폼에 대한 스타일인 XSLT파일이 존재한다.

 

게시판이름_list.xsl

게시판이름_view.xsl

게시판이름_write.xsl

게시판이름_modify.xsl

게시판이름_reply.xsl

이렇게 5개의 사용자 파일과 5개의 관리자 XSLT파일이 존재한다.

 

이것으로 게시판의 모든 형태는 갖추어진다.

각각의 폼에 XML 파일을 생성시켜 TransformNode로 XSLT와 연결하면 게시판이 완성된다

 

 

관리자 화면에서 보면 메뉴연결 페이지가 존재하나다.

거기서 게시판 URL을 연결하면 게시판 작업은 마무리가 된다.

 

사용자에서는 게시판이 존재해야 하는 첫 페이지에

<%
 server.execute "/__boardmain/default.asp"
%>

이부분을 입력해주면

모든 작업은 끝난다.

그러면 그 페이지 하나에서 리스트, 뷰, 폼으로 변환이 되게 되어 있다

그럼 연결된 게시판의 모습을 보자

 

 

이런식으로 접목이 된다.

 

이부분은 관리자 화면의 일부분을 가져온 부분이다.

사용자 화면으로 간다면

 

 

 

상기와 같이 나타난다...

글읽기 페이지나 글쓰기 페이지 또한 첫페이지에 상기 소스를 입력하면 리스트부분만 변하는 형태로 되어 있다.

 

비밀글인경우 각 타이틀을 클릭하면 비밀번호 입력을 요구하고 비밀번호가 맞아야만 글읽기가 가능하게 되어 있다

물론 본문에서 수정을 눌러도 수정버튼이 변하면서 비밀번호 요구칸이 나오게 되어 있다.

 이상으로 CMS게시판에 대한 기능 정의와 소개를 마칠까 한다.

 

다음에는 각각의 중요한 소스부분을 살펴보면서 마무리를 할려고 한다.

 

그동안 두서없는 글 읽어주셔서 감사드립니다.

이제부터는 이 CMS게시판을 만들려고 한 목적과 진행과정에서 나온 어려움...그리고 XSLT소스에 대한 부분, XML소스에 대한 부분을 정리하고자 합니다.

 

 

 

top


잠시 여기서 연재하고 있는 CMS를 만들어보자의 솔루션인 WCMS에 대한 소개를 하고자 합니다.

현재  (주)워드앤코드를 통하여 다양한 사이트에 적용이 되고 있습니다

 

 

 

 

WCMS 의 특장점 및 효과


1.
관리 사이트와 이용자 사이트의 분리
 -
관리자와 이용자의 독립적 분리를 통한 콘텐츠 및 디자인 템플릿 관리의 효율성 증대

 - XSLT 형태의 출판으로 XML데이터 출력을 통한 이용자 화면 관리 용이

 

2. 시스템 성능 및 안정성, 확장성
 -
웹표준 구축 및 웹접근성 인증마크 획득 가능한 표준 CMS
 - SNS
매핑 기능 강화
 - 게시판 생성 후 통합검색 편입여부 관리자 지정 가능
 -
게시판 기본 XML 데이터 제공 및 로우데이터 출력을 통한 외부 연계 가능

3.
다양한 콘텐츠 관리
 -
이용자 메뉴와 관리자 메뉴의 동일한 형태로 구성 가능

 - 자체 템플릿을 이용한 구성과 이용자의 요구에 의한 템플릿 구성 가능

 - CMS 및 게시판의 설정을 수시로 변경가능하며, 옵션 별 기능 구성 가능
 -
멀티 업로드 및 능동적 필드 구성 가

 

4. 권한 관리

 - 이용자 및 관리자의 등급관리를 통한 효율적 관리

 - 메뉴별, 게시판별, 게시물 별 관리권한을 자유롭게 지정 가능

 

 

WCMS 의 운영환경

1.
서버
 -
운영체제 : Window 2000 svr 이상
 - DBMS : MS-SQL 2005 이상
 - 웹서 : IIS-6.0
 - 웹브라우져 : MSIE 6.0 이상


2. 클라이언트
 -
웹브라우져 : MSIE 6.0 이상/ 그 외 최신 브라우져 지원

3.
지원 API : XSLT, XML

 


top


우편번호 검색을 위한 자바스크립트 소스다

epost.go.kr의 우편번호 검색에 사용된 자바스크립트 소스를 이용하여 수정을 했다.

 

ASP소스와 자바스크립트 소스만 있으면 기본적으로 우편번호 검색은 끝난다

유용하게 사용하길....

 

/************************************************************************************
' 단위업무명 : 우편번호 검색을 위한 자바스크립트
' 작  성  자 : 가치노을(pobiplus@gmail.com) http://www.newnnow.co.kr
' 작  성  일  : 2011-12-01
' 수  정  자  :
' 수  정  일 :
' 내   용 : epost.go.kr에서 우편번호 검색화면 소스를 차용한것임
' 주의  사항 :
'************************************************************************************/

function eventonblur(img_name){
 var keyvalue = document.getElementById("keyword").value;
 var gubun = document.getElementById('gubun').value;
 if(gubun == "road"){
  img_url="/__cmsimg/zipcode/srch_bg.gif";
 }
 else if(gubun == "dong"){
  img_url="/__cmsimg/zipcode/srch_bg2.gif";
 }
 else if(gubun == "oldpost"){
  img_url="/__cmsimg/zipcode/srch_bg3.gif";
 }
    if((img_name.value == "") && (keyvalue == "")){
        img_name.style.background="url("+img_url+") no-repeat 2px 2px";
        img_name.style.backgroundColor="#fff";
    }
}

function fnInit(val){
 // 라디오 버튼 value 값 조건 비교
 if(val == "road"){
  document.getElementById('notitab3_list').style.display = "";
  document.getElementById('notitab4_list').style.display = "";
  document.getElementById('notitab5_list').style.display = "none";
  document.getElementById('notitab6_list').style.display = "none";
  document.getElementById('gubun').value="road";
  if(document.getElementById("keyword").value.length==0){      
   document.getElementById("keyword").style.background="url(/__cmsimg/zipcode/srch_bg.gif) #fff no-repeat 2px 1px";
  }
 
 }
 else if(val == "dong"){
  document.getElementById('notitab3_list').style.display = "none";
  document.getElementById('notitab4_list').style.display = "none";
  document.getElementById('notitab5_list').style.display = "";
  document.getElementById('notitab6_list').style.display = "none";
  document.getElementById('gubun').value="dong";
  if(document.getElementById("keyword").value.length==0){      
   document.getElementById("keyword").style.background="url(/__cmsimg/zipcode/srch_bg2.gif) #fff no-repeat 2px 1px";
  }
 }
 else if(val == "oldpost"){
  document.getElementById('notitab3_list').style.display = "none";
  document.getElementById('notitab4_list').style.display = "none";
  document.getElementById('notitab5_list').style.display = "none";
  document.getElementById('notitab6_list').style.display = "";
  document.getElementById('gubun').value="oldpost";
  if(document.getElementById("keyword").value.length==0){      
   document.getElementById("keyword").style.background="url(/__cmsimg/zipcode/srch_bg3.gif) #fff no-repeat 2px 1px";
  }
 }
}

function fnGubun(obj){
 // 라디오 버튼 value 값 조건 비교
 document.getElementById("keyword").value = "";
 if(obj.value == "road"){
  document.getElementById('notitab3_list').style.display = "";
  document.getElementById('notitab4_list').style.display = "";
  document.getElementById('notitab5_list').style.display = "none";
  document.getElementById('notitab6_list').style.display = "none";
  if(document.getElementById("keyword").value.length==0){      
   document.getElementById("keyword").style.background="url(/__cmsimg/zipcode/srch_bg.gif) #fff no-repeat 2px 1px";
  }
 
 }
 else if(obj.value == "dong"){
  document.getElementById('notitab3_list').style.display = "none";
  document.getElementById('notitab4_list').style.display = "none";
  document.getElementById('notitab5_list').style.display = "";
  document.getElementById('notitab6_list').style.display = "none";
  if(document.getElementById("keyword").value.length==0){      
   document.getElementById("keyword").style.background="url(/__cmsimg/zipcode/srch_bg2.gif) #fff no-repeat 2px 1px";
  }
 }
 else if(obj.value == "oldpost"){
  document.getElementById('notitab3_list').style.display = "none";
  document.getElementById('notitab4_list').style.display = "none";
  document.getElementById('notitab5_list').style.display = "none";
  document.getElementById('notitab6_list').style.display = "";
  if(document.getElementById("keyword").value.length==0){      
   document.getElementById("keyword").style.background="url(/__cmsimg/zipcode/srch_bg3.gif) #fff no-repeat 2px 1px";
  }
 }
}

function fnCheckForm(srcEl)
{
 var gubun, keyword,stitle;
 keyword = fnCheckstring(srcEl.keyword.value);
 stitle = srcEl.keyword.title;
 gubun = srcEl.gubun.value;
 //alert(gubun);
 if(keyword.length == 0){
  if (gubun == "road"){
   alert("도로명+건물번호를 입력하세요!\n\n검색방법 : 도로명(~로,~길)+건물번호\n- 서울시 중구 소공로 70 \n  예) '소공로(도로명) 70(건물번호)'");
  }
  else if (gubun == "dong"){
     alert("동/읍/면/리/명+지번을 입력하십시오!\n\n검색방법 : 동/읍/면/리명+지번\n- 서울시 중구 충무로1가 21-1 \n  예) '중무로1가(동명) 21-1(지번)'");
  }
  else{
     alert("동/읍/면/리/명을 입력하십시오!\n\n검색방법 : 동/읍/면/리명\n-  서울시 중구 충무로1가 \n  예) '충무로1가(동명) 또는 충무로'");
  }
  srcEl.keyword.style.backgroundImage="";
  srcEl.keyword.focus();
  return false;
 }else if(keyword.length < 2){
    alert("검색어를 2글자이상으로입력하세요!");
    srcEl.keyword.style.backgroundImage="";
    srcEl.keyword.focus();
    return false;
 }

  if (gubun == "road"){
      var str = srcEl.keyword.value.split(" ").join("");
      var strlen = str.length;
      var strdiv = "";
      for(var i = strlen-1; i > -1; i--){
          if(IsRoad(str.charAt(i))){
              strdiv = i+1;
              break;
          }
      }
      srcEl.searchKey.value = str.substring(0,strdiv);
      srcEl.MainNo.value = str.substring(strdiv,strlen);
     
      if(srcEl.searchKey.value == "시장북로"){
        alert("\"시장북로\"는 지번주소(법정동) 입니다.");
        return false;
      }
     
      if ((gubun == "road")&&((srcEl.searchKey.value == "")||(srcEl.MainNo.value == ""))) {
          alert("도로명+건물번호를 입력하세요!\n\n검색방법 : 도로명(~로,~길)+건물번호\n- 서울시 중구 소공로 70 \n  예) '소공로(도로명) 70(건물번호)'");
          return false;
      }
     
      var Temp    = srcEl.MainNo.value.split("-");
      srcEl.MainNo.value   = Temp[0];
      srcEl.SubNo.value = "";
      for (var i = 1; i < Temp.length; i++) {
          srcEl.SubNo.value = Temp[i];
          break;
      }
     
      srcEl.SubNo.value = srcEl.SubNo.value.replace(" ", "");
     
      if (srcEl.SubNo.value.length == 0) {
          srcEl.SubNo.value = "";
      }

      if ( (gubun == "road")&&(!IsNumeric(srcEl.MainNo.value) || !IsNumeric(srcEl.SubNo.value)) ) {
          alert("건물번호는 반드시 숫자만 입력하세요!");
          return false;
      }
      else{
       srcEl.MainNo.value = escape(srcEl.MainNo.value);
      }                  

  }
  //2007.11.02 동명 검색 추가 (천우관)
  else if (gubun == "dong"){
      var str = srcEl.keyword.value.split(" ").join("");
      var strlen = str.length;
      var strdiv = "";
      for(var i = strlen-1; i > -1; i--){
          if(IsDong(str.charAt(i))){
              strdiv = i+1;
              break;
          }
      }
      srcEl.searchKey.value = str.substring(0,strdiv);
      srcEl.MainNo.value = str.substring(strdiv,strlen); 

      if ((gubun == "dong")&&((srcEl.searchKey.value == "")||(srcEl.MainNo.value == ""))) {
          alert("동/읍/면/리/명+지번을 입력하십시오!\n\n검색방법 : 동/읍/면/리명+지번\n-  서울시 중구 충무로1가 21-1 \n  예) '충무로1가(동명) 21-1(지번)'");
          return false;
      }
     
      srcEl.MainNo.value = srcEl.MainNo.value.replace("산", "");
      var Temp     = srcEl.MainNo.value.split("-");
 
      srcEl.MainNo.value  = Temp[0];
      srcEl.SubNo.value = "";
 
      for (var i = 1; i < Temp.length; i++) {
          srcEl.SubNo.value = Temp[i];
          break;
      }
     
      srcEl.SubNo.value = srcEl.SubNo.value.replace(" ", "");
     
      if (srcEl.SubNo.value.length == 0) {
          srcEl.SubNo.value = "";
      }
     
      if ( (gubun == "dong")&&(!IsNumeric(srcEl.MainNo.value) || !IsNumeric(srcEl.SubNo.value)) ) {
          alert("번지는 반드시 숫자만 입력하세요!");
          return false;
      }                  
      else{
       srcEl.MainNo.value = escape(srcEl.MainNo.value);
      }                  

  }
  else if (gubun == "oldpost"){
  
      if(srcEl.keyword.value==""){
          alert("검색어를 입력하세요!");
          srcEl.keyword.focus();
          return false;
      }else if(srcEl.keyword.value.length<2){
          alert("검색어를 2글자이상으로입력하세요!");
          srcEl.keyword.focus();
          return false;
      }
      srcEl.searchKey.value = srcEl.keyword.value;
  }

  return true;
 
}

function IsNumeric(sText){
    var ValidChars = "0123456789";
    var IsNumber=true;
    var Char;

    for (i = 0; i < sText.length && IsNumber == true; i++) {
        Char = sText.charAt(i);
        if (ValidChars.indexOf(Char) == -1){
            IsNumber = false;
        }
    }
    return IsNumber;
}

function IsRoad(sText){
    var ValidChars = "개길도로리";
    var IsRoad=true;
   
    if (ValidChars.indexOf(sText) == -1){
        IsRoad = false;
    }
    return IsRoad;
}

function IsDong(sText){
    var ValidChars = "읍면동리로가";
    var IsDong=true;

    if (ValidChars.indexOf(sText) == -1){
        IsDong = false;
    }
    return IsDong;
}

function fnCheckstring(str)
{
 var index, len
 while(true) {
  index = str.indexOf(" ")
  if (index == -1) break
  len = str.length
  str = str.substring(0, index) + str.substring((index+1),len)
 }
 str = escape(str)
 while(true) {
  index = str.indexOf("%0D%0A")
  if (index == -1) break
  len = str.length
  str = str.substring(0, index) + str.substring((index+6),len)
 }
 str = unescape(str)

 return str
}

// 우편번호 검색결과 반영
function use_post(zipcode, road_address){
 post = zipcode.split("-");

 opener.parent.document.getElementById("post1").value = post[0];
 opener.parent.document.getElementById("post2").value = post[1];
 opener.parent.document.getElementById("addr").value = road_address;
 opener.parent.document.getElementById("addr2").focus();
 self.close();
}

 

혹시 소스가 파일로 필요하신분들은 메일(본문 내용을 살피면 있다)이나 댓글로 남겨주면 보내드리겠습니다

 

top