코드이그나이터4 뷰 다루기 - 14

레이아웃 사용하기

많은 사이트들이 레이아웃을 사용합니다. 공통의 헤더, 공통의 푸터 등 어느 페이지에서나 사용되는 공통 화면들이 있고, 본문만 바뀌는 경우가 많습니다.
이렇게 공통된 부분은 한 곳에 모아두고, 본문만 바뀌는 것을 레이아웃이라고 부릅니다.

코드이그나이터4에서도 레이아웃을 지원합니다. 어떻게 하는지 알아보겠습니다.
우리가 만들 페이지는 아래와 같습니다.

코드는 https://github.com/koeunyeon/ci4/tree/view-layout 에 있습니다.

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

public function layout()
{
    $hello = "안녕하세요"; // (1)
    return view("/view/layout_content.php", [ // (2)
        'hello' => $hello
    ]);
}

(1) 레이아웃과 레이아웃 본문 모두에 데이터가 전달되는지 확인하기 위해 임의의 변수 $hello를 선언하고 뷰로 전달합니다.

(2) 리턴하는 뷰 이름은 "레이아웃 경로"가 아니라 "실제로 사용될 컨텐츠 경로"입니다.

컨텐츠를 담당하는 뷰를 추가하겠습니다.
app/Views/view/layout_content.php

<?= $this->extend('/view/layout') ?>  <!-- (1) -->
<?= $this->section('content') ?>  <!-- (2) -->
    <h2>여기는 레이아웃 본문입니다.</h2>
    <p style="font-weight: bold;">컨트롤러에서 보낸 데이터 : <?= $hello ?></p>  <!-- (3) -->
<?= $this->endSection() ?>  <!-- (4) -->

(1) 뷰가 사용할 레이아웃을 $this->extend(레이아웃 경로) 코드로 지정합니다. 코드이그나이터4에서는 "현재 뷰를 확장(extend)"한다고 표현합니다. 파라미터는 레이아웃 경로입니다.

(2) 바뀌는 본문 부분인 섹션(section)의 시작을 $this->section(섹션이름)으로 지정합니다. 파라미터로는 섹션의 이름을 취합니다. 섹션의 경우 여러 개로 나누어서 지정할 수도 있기 때문에 개별적으로 이름을 붙입니다. 예제에서는 'content'로 지정했습니다.

(3) 컨트롤러에서 보낸 데이터를 표기하기 위해 <?= $hello ?>를 확인합니다. 같은 데이터를 레이아웃에서도 사용할 수 있는지도 확인할 것이어서, 쉽게 구분하기 위해 글자를 스타일로 두껍게(font-weight: bold;) 표기해 보았습니다.

(4) 섹션이 끝난다는 표기를 위해서 $this->endSection() 구문을 사용합니다.

윤곽을 잡아주는 레이아웃 뷰를 추가하겠습니다.
app/Views/view/layout.php

<!doctype html>
<html>
<head>
    <title>레이아웃 확인</title>
</head>
<body>
<h1>여기는 레이아웃 영역입니다.</h1>
<p style="font-style: italic">컨트롤러에서 보낸 데이터 : <?= $hello ?></p> <!-- (1) -->
<hr />
<?= $this->renderSection('content') ?>  <!-- (2) -->
</body>
</html>

(1) 컨트롤러에서 보내준 데이터 $hello를 읽을 수 있는지 확인해 봅니다.

(2) 레이아웃에서 컨텐츠를 넣을 위치를 $this->renderSection(섹션이름) 구문으로 지정합니다. layout_content.php에서 $this->section('content')로 섹션 이름을 content로 설정했기 때문에 $this->renderSection('content')로 동일하게 이름을 content로 맞춥니다.

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

이번 예제는 실제로 출력이 어떻게 되는 지 확인하기 위해 직접 소스보기로 내용을 확인하겠습니다. 참고로 대부분의 브라우저에서는 Ctrl + U 키를 누르면 현재 페이지의 소스보기를 할 수 있습니다.

<!doctype html>
<html>
<head>
    <title>레이아웃 확인</title>
</head>
<body>
<h1>여기는 레이아웃 영역입니다.</h1>
<p style="font-style: italic">컨트롤러에서 보낸 데이터 : 안녕하세요</p>
<hr />
    <h2>여기는 레이아웃 본문입니다.</h2>
    <p style="font-weight: bold;">컨트롤러에서 보낸 데이터 : 안녕하세요</p>
</body>
</html>

<h2> 태그와 <p> 태그가 있는 본문 "섹션"이 레이아웃을 사용하여 확장함을 알 수 있습니다.

드디어 긴 뷰 영역이 끝났습니다. 다음 챕터부터는 백엔드 개발자들이 좋아할 만한, 데이터베이스를 다루어 보겠습니다.

Author And Source

이 문제에 관하여(코드이그나이터4 뷰 다루기 - 14 - 레이아웃), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@koeunyeon/코드이그나이터4-뷰-다루기-14-레이아웃

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

코드이그나이터4 뷰 다루기 - 14 - 레이아웃

레이아웃 사용하기

Author And Source

좋은 웹페이지 즐겨찾기