IT 기술 따라잡기

Feeds 는 content 의 stream 으로 사람들이 웹사이트를 통해 정보의 조각들을 공유하기 위해 만든 것입니다. PHP5의 simpleXML 함수는 이 feed를 웹페이지에서 사용하기 편하도록 interpret 하는 방법을 아주 간단하게 구현할 수 있도록 도와 줍니다.

저는 최근 저희의 라디오 방송국 playlist 에서 제공하는 노래에 대한 live feed를 display 하는 widget 과 관련해서 작업을 했었습니다. radio 방송국에서 운영하는 시스템에서는 XML을 제공하는데요 이 자료들은 데이터베이스에서 나옵니다. 프로그램은 그 데이터를 feed로 만들어서 제공합니다.

서로 다른 서버끼리 데이터를 공유하기 위해 XML 을 사용하는 것은 일반적인 방법입니다. playlist 를 generate 하는 시스템은 proprietary 입니다. XML은 어떤 데이터가 공유될 수 있도록 하는 easy format 을 제공합니다.

XML 은 뭘까요?

XML 은 eXtensible Markup Language 의 줄임말로 site들 사이에서 공유하기 위해 데이터를 structure 하는 방법입니다. RSS (Real Simple Syndication) 와 Podcasts 같은 기술들도 XML 의 특별한 형태입니다. XML이 좋은 점은 여러분이 필요로 하는것을 여러분이 원하는 대로 표현할 수 있다는 겁니다.

XML은 쉽게 생성할 수 있습니다. 왜냐하면 HTML 이랑 아주 비슷하거든요. HTML 과 다른 점은 여러분만의 tag 를 따로 만들 수 있다는 겁니다. 예를 들어 여러분의 라디오 방송국에서 틀어줄 노래들의 list 에 대한 feed 를 put 한다고 가정합시다. 그러기 위해서 할 일은 당지 artist 이름, 노래 제목, 노래가 방송된 시긴 등을 encode 합니다. 이와 관련된 tag들을 만들 겁니다. <title> <artist> 그리고 이것들은 <song> tag 가 감쌀 겁니다. 또 우리는 각 노래가 방송된 시간을 표시할 건데요. 날짜와 시간이 여기에 들어갈 겁니다.

여러분은 이것을 아래 처럼 encode 할 수 있을 겁니다.

여기서 XML 데이터를 만들 때 지켜야 될 몇가지 규칙이 있습니다. 만약 XHTML 에 대해 잘 아신다면 쉽게 이해가 가실겁니다. 한번 볼까요?

   *  XML is case sensitive so <Title>` is not the same as <title>.
   *  All XML elements must have closing tags.
   *  XML requires a root element (the <songs> tag above serves as our root element)
   *  Attributes must be quoted
   *  Special characters (like & (&amp;) and < (&lt;) and > (&gt;) signs) must be encoded.

XML 은 HTML 보다 좀 더 strict 합니다. 하지만 정말 만들고 다루기가 쉽습니다.

Introducing simpleXML

simpleXML 을 사용해서 XML을 아주 쉽게 읽어서 그 내용에 접근할 수 있습니다.

위에 있는 XML 을 songs.xml 로 저장했다고 칩시다. 같은 폴더에 php 파일을 만들 겁니다.

이 전체 XML 을 아래 코드를 사용해서 읽을 겁니다.

이렇게 하면 다 읽은 겁니다. 저 xml 파일이 웹상의 어딘가에 있어도 그 URL 만 가지고 이렇게 읽을 수 있습니다. xml 파일이 여러분 서버에 있을 필요도 없는 거죠.

이제 우리는 이 파일의 내용을 담은 object (객체)를 가지게 됐습니다.

이 song 객체는 $mysongs 라는 변수에 담겨져 있습니다. 만약에 첫번째 artist 의 이름을 출력하고 싶다면 이렇게 하시면 됩니다.

이 객체의 일부분으로 XML tag 들이 매핑돼 있다는 걸 기억하세요. 그래서 그 name 을 통해 어느 element 이든 우리가 얻어 낼 수 있는 겁니다. 그리고 PHP 에서는 배열이 0번부터 시작한다는 것도 기억하시구요. 그래서 배열의 0번째 title을 위와 같이 출력한 겁니다.

자 이제 3번째 노래 제목을 출력해 볼까요?

Working with Attributes


date 들을 얻으려면 그 attribute들에 어떻게 접근해야 되는지 알아야 됩니다. 이 notation은 tag 랑은 약간 다릅니다. 하지만 사용하는 건 똑 같이 쉽습니다.
바로 아래 처럼 사용하시면 됩니다.

Making a list of songs

So now that we’ve got the basics of accessing elements, let’s write the code to make a complete list of our songs parsed by interpreting our XML file.

이제 우리는 element들에 어떻게 접근하는지 그 기본을 알게 됐습니다.

이제 이 XML 파일을 interpret 함으로서 전체 노래를 parse 하도록 하겠습니다.

<?php
    $mysongs = simplexml_load_file('songs.xml');
    echo "<ul id="songlist">n";
    foreach ($mysongs as $songinfo):
        $title=$songinfo->title;
        $artist=$songinfo->artist;
        $date=$songinfo['dateplayed'];
        echo "<li><div class="title">",$title,"</div><div class="artist">by ",$artist,"</div><time>",$date,"</time></li>n";
    endforeach;
    echo "</ul>";
?>

각각의 노래들에 대해 접근하기 위해 우리는 foreach statement 를 사용했습니다. 그리고 그 정보를 간단한 HTML list 로 parsing 했습니다. 여러분은 이것을 일반적인 HTML 문서로 사용하시거나 아니면 노래 리스트를 출력하는 widget 으로 사용하실 수 있습니다.

<?php
    $mypix = simplexml_load_file('http://api.flickr.com/services/feeds/photoset.gne?set=72157627229375826&nsid=73845487@N00&lang=en-us');
    foreach ($mypix->entry as $pixinfo):
        $title=$pixinfo->title;
        $link=$pixinfo->link['href'];
        $image=str_replace("_b.jpg","_s.jpg",$pixinfo->link[1]['href']);
        echo "<a href="",$link,""><img src="",$image,"" alt="",$title,"" /></a>n";
    endforeach;
?>

이제 크리스마스 입니다.

즐거운 크리스마스 되세요.

회사에서 크리스마스 카드를 이메일로 돌렸네요.

오늘은 그 내용을 공부해 볼께요.

Christmas is round the corner
so let's greet our colleagues and celebrate

by sharing the joy with them.

Wishing every one a
Merry Christmas
and
Happy New Year

from the tem aaa

크리스마스가 바로 코앞입니다.

동료들과 같이 인사 나누고

기쁨을 같이 나눕시다.

모두

Merry Christmas

and

Happy New Year

aaa 팀으로부터

accordion menu 가 닫혔을 때 jQuery Mobile 은 그 안의 내용이 안 보이도록 ui-collapsible-content class 가 있는 <div> element 에 ui-collapsible-content-collapsed CSS class 를 추가 합니다. 이 추가된 CSS class 는 display CSS property 를 none으로 세팅합니다. 이것은 메뉴의 내용을 숨기도록 하죠.

또한 menu title 에도 ui-collapsible-heading-collapsed class를 할당합니다. 메뉴가 닫혔다는 것을 가리키기 위해서죠.

메뉴가 열렸는지 닫혔는지를 테스트 하려면 <h1> element가 title 을 defining 하고 있는지를 보던지 content 를 defining 하는 <div> element에 ui-collapsible-heading-collapsed (for title) or ui-collapsible-content-collapsed (for content) classes 가 있는지 없는지 살펴보면 됩니다. 이 클래스들 중 하나라도 있으면 메뉴는 닫혀있는 것이고 아니면 열려 있는 겁니다.

아래 예제는 버튼을 사용하는 window 의 accordion menu 들의 상태를 display 하는 겁니다.

View the status of the accordion menu

각 menu title 에 ui-collapsible-heading-collapsed class 가 있는지 여부를 가립니다. 만약 있으면 이 메뉴는 닫힌 상태고 그렇지 않으면 열린 상태입니다.