멈추지 않는 노력.: 4월 2010

2010. 4. 27.

[Prototype, Script.aculo.us] twitter Top tweets 따라하기

twitter.com에서 Top tweets에서의 push notification이 흥미로워서

javascript에서 흉내만 내봤다.

오랜만에 prototype과 scriptaculous를 써서 그런지 버벅거리긴 했다.

---------------------------<Source Code>----------------------------------
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/effects.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" charset="utf-8">
#input {
width: 200px;
margin-bottom: 5px;
}
#button {
width: 60px;
height: 30px;
margin-bottom: 10px;
border: 1px solid #CCCCCC;
}
#wrapper {
height: 200px;
overflow: hidden;
}
#comments {
width: 200px;
height: 250px;
overflow: hidden;
}
.talk {
height: 49px;
color: #FFFFFF;
background-color: #23A420;
border-bottom: 1px solid #000000;
}
</style>
</head>
<body>
<div>
<input type="text" id="input" />
<div id="button">click</div>
</div>
<div id="wrapper">
<div id="comments">
<div id="5" class="talk">
<div>5</div>
</div>
<div id="4" class="talk">
<div>4</div>
</div>
<div id="3" class="talk">
<div>3</div>
</div>
<div id="2" class="talk">
<div>2</div>
</div>
<div id="1" class="talk">
<div>1</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">

</script>
</body>
</html>

2010. 4. 22.

[Code Igniter] layout 적용하기

http://codeigniter.com/wiki/layout_library/ 에서 Layout Library를 구하고 사용법을 확인할 수 있다.

1. /application/libraries/Layout.php 에 다음 소스를 저장한다.

<?php  
if (!defined('BASEPATH')) exit('No direct script access allowed');
 
class Layout
{
 
    var $obj;
    var $layout;
 
    function Layout($layout = "layout_main")
    {
        $this->obj =& get_instance();
        $this->layout = $layout;
    }
 
    function setLayout($layout)
    {
      $this->layout = $layout;
    }
 
    function view($view, $data=null, $return=false)
    {
        $loadedData = array();
        $loadedData['content_for_layout'] = $this->obj->load->view($view,$data,true);
 
        if($return)
        {
            $output = $this->obj->load->view($this->layout, $loadedData, true);
            return $output;
        }
        else
        {
            $this->obj->load->view($this->layout, $loadedData, false);
        }
    }
}
?

2. /application/controllers/intro.php (임의로 만든 파일) 의 생성자에 다음 코드를 넣는다.

<?php

class Intro extends Controller {

    function __construct()
    {
        parent::Controller();

        $this->load->library('layout', 'layouts/default'); 
        $this->layout->setLayout('layouts/default');
    }
    function index()
    {
        $this->layout->view('layouts/default');
    }
}

3. /application/views/layouts/default.php 에 다음 코드를 넣는다.

<!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" xml:lang="ko" lang="ko" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CI 레이아웃</title>
    <style type="text/css">
        .header {
            width: 760px;
            height: 50px;
            border: 1px solid #CCCCCC;
        }
        .navigation {
            float: left;
        }
        .navigation li {
            float: left;
            margin-right: 10px;
            list-style: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="header">
        <ul class="navigation">
            <li id="home">Home</li>
            <li id="send">Send</li>
        </ul>
    </div>
</body>
</html>