코드이그나이터4 뷰 다루기 - 10 - 링크

링크

HTML에서 다른 웹 자원 주소로 연결하는 링크를 다루는 방법을 알아보겠습니다.
우리가 만들 페이지는 아래와 같습니다.

이번 챕터의 예제는 https://github.com/koeunyeon/ci4/tree/view-link 에서 보실 수 있습니다.

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

public function link(): string
{
    $link_data = [ // (1)
        ['url' => 'https://koeunyeon.github.io', 'message' => '고은연 github', 'is_new_tab' => true],
        ['url' => 'https://github.com', 'message' => '깃헙', 'is_new_tab' => false],
        ['url' => 'https://velog.io/@koeunyeon', 'message' => '고은연 블로그', 'is_new_tab' => true],        
        ['url' => 'http://ci4doc.cikorea.net/', 'message' => '코드이그나이터4 한글 메뉴얼', 'is_new_tab' => true]
    ];

    return View("/view/link", ['link_data' => $link_data]);
}

(1) 뷰에 전달할 데이터를 설정합니다.
url 항목은 링크의 주소입니다.
message는 링크의 메세지로 message에 해당하는 값을 클릭하면 링크로 이동합니다.
is_new_tab은 새 탭으로 띄울지 여부를 결정합니다.

뷰를 추가하겠습니다.
app/Views/view/link.php

<ul> <!-- (1) -->
    <?php foreach ($link_data as $row) : ?>
        <li>
            <!-- (2) -->
            <a href="<?= $row['url'] ?>" <?= $row['is_new_tab'] ? "target='_blank'" : "target='_self'" ?> ><?= $row['message'] ?></a>
        </li>
    <?php endforeach; ?>
</ul>

코드를 확인해 보겠습니다.
(1) 여러 개의 링크를 일목요연하게 표기하기 위해 목록 태그 <ul>과 <li>를 사용하겠습니다.

(2) HTML에서 링크는 <a 태그로 표기합니다. Anchor의 약자로 웹 하이퍼링크의 출발지와 도착지를 뜻합니다. <a>메세지</a> 형태로 사용합니다.

href 속성은 링크의 주소를 나타냅니다.

target 속성은 새 창(새 탭)으로 실행될 지 여부를 나타냅니다. target='_blank'일 경우 새 탭이 실행되고, target=_self일 경우 현재 창에서 실행됩니다. 기본값은 현재 창인 _self입니다.

컨트롤러 엔드포인트에서 넘겨준 데이터 중 첫번째는 아래와 같았습니다.

['url' => 'https://koeunyeon.github.io', 'message' => '고은연 github', 'is_new_tab' => true]

is_new_tab이 true 이므로 <?= $row['is_new_tab'] ? "target='_blank'" : "target='_self'" ?> 구문에 의해 target='_blank' 가 렌더링됩니다.

위 뷰가 실행되면 HTML은 이렇게 보여집니다.

<a href="https://koeunyeon.github.io" target='_blank' >고은연 블로그</a>

브라우저에서 http://localhost:8080/view/link에 접속해 결과를 확인합니다.