코드이그나이터4 뷰 다루기 - 2 - 목록 (ul, ol, li)

고은연·2021년 3월 14일
0

이번 챕터의 코드는 https://github.com/koeunyeon/ci4/tree/view-ulolli 에 있습니다.

목록

반복문을 통해서 뷰에 목록을 보여주는 방법을 알아보겠습니다.

View 컨트롤러에 아래의 메소드를 추가합니다.
app/Controllers/View.php

public function li()
{
    $alphabet = range(65, 90); // (1)
    $alphabet = array_map( // (2)
        function ($num) { // (3)
            return chr($num);
        }
        , $alphabet);

    return View("/view/li", ['alphabet'=>$alphabet]); // (4)
}

(1) PHP의 range 함수를 통해 65-90까지의 숫자 배열을 만들어 냅니다. 참고로 (1)-(3)까지의 함수는 간단하게 range('A',Z')로 표현할 수도 있습니다만, 범위를 나타내는 range 함수가 문자를 반환한다는 것이 비상식적인 코드같아서 일부러 사용하지 않았습니다.

(2) 숫자 배열을 알파벳 아스키 문자로 바꿉니다. array_map 함수는 배열의 각 요소를 순회하면서 값을 변경할 수 있는 PHP 내장 함수입니다. array_map(콜백,데이터) 형태로 사용할 수 있습니다.

(3) 숫자를 알파벳 아스키 문자로 바꾸는 익명 함수입니다. PHP 5.3버전부터 지원합니다. 코드에서 볼 수 있듯이 함수 이름이 없이 function (파라미터){본문} 형태를 가집니다.

(4) $alphabet 변수를 뷰 /view/li에 전달합니다.


뷰를 추가하겠습니다.

app/Views/view/li.php
<p>순서 없는 목록</p>
<ul> <!-- (1) -->
    <?php foreach ($alphabet as $char) : ?> <!-- (2) -->
        <li><?= $char ?></li> <!-- (3) (4) -->
    <?php endforeach ?> <!-- (5) -->
</ul>
<hr /> <!-- (6) -->
<p>순서 있는 목록</p>
<ol> <!-- (7) -->
    <?php foreach ($alphabet as $char) : ?>
        <li><?= $char  ?></li>
    <?php endforeach ?> 
</ol>

(1) 순서 없는 목록은 HTML 태그에서 <ul>로 감쌉니다.

(2) 알파벳 목록을 순회하면서 하나씩 추출해 $char 변수에 담습니다.
이 코드에서 주목해야 할 부분은 foreach의 대체 표현식입니다. PHP의 원래 foreach문은 아래와 같습니다.

foreach ($alphabet as $char) {
    echo $char;
}

대체 PHP문은 아래와 같이 사용합니다.

foreach ($alphabet as $char) :
    echo $char;
endforeach

중괄호({,})가 없습니다. 시작하는 중괄호({)는 : 표기로 대체됩니다. 끝나는 중괄호 (})는 endforeach로 대체됩니다.

(3) 목록(<ul>, <ol>)의 항목은 <li> 태그로 감싸서 표기합니다.

(4) <?= 표현식 ?><?php echo 표현식; ?>과 동일합니다. 값을 간단하게 표기하기 위해 사용합니다.

(5) endforeachforeach의 닫는 괄호 } 대신 사용되었습니다.

(6) HTML의 <hr /> 태그는 수평 가로선을 긋습니다. 예시에서는 순서 없는 목록과 순서 있는 목록을 구분하기 위해 사용했습니다.

(7) <ol> 태그는 순서 있는 목록을 나타냅니다. (1)<ul> 태그와 용법은 동일합니다.


브라우저에서 http://localhost:8080/view/li에 접속해 목록 두 개가 나오는 지 확인합니다.

profile
중년 아저씨. 10 + n년차 백엔드 개발자. 스타트업과 창업, 솔로프리너와 1인 기업에 관심 많아요.

0개의 댓글