코드이그나이터4 뷰 다루기 - 9 - 테이블

koeunyeon·2021년 3월 21일
0

테이블

HTML에서 표를 만들 수 있는 테이블을 알아보겠습니다.
최근에는 레이아웃을 맞출 때 테이블을 잘 안 쓰는 추세기는 하지만, 실제로 표가 필요한 경우는 의외로 많으므로 테이블 태그에 대해 알고는 있어야 합니다.
우리가 만들 페이지는 아래와 같습니다.

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


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

public function table(): string
{
    $table_data = [ // (1)
        ["name" => "코드이그나이터", "age" => 10, "gender" => "male"],
        ["name" => "라라벨", "age" => 25, "gender" => "female"],
        ["name" => "스프링", "age" => 76, "gender" => "unknown"],
    ];

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

(1) 뷰에 전달할 데이터를 설정합니다. 일반적인 웹 어플리케이션에서 데이터는 "데이터베이스"에서 전달받습니다. 코드이그나이터4에서도 동일한데, 데이터를 조회하는 "모델" 클래스의 기본값인 array로 리턴 타입을 설정할 경우 $table_data와 동일한 연관배열의 순차배열 형식으로 데이터 조회 결과가 변수에 담깁니다.


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

<table> <!-- (1) -->
    <tr>  <!-- (2) -->
        <th>이름</th>  <!-- (3) -->
        <th>나이</th>
        <th>성별</th>
    </tr>
    <?php foreach ($table_data as $row) : ?>  <!-- (4) -->
    <tr> <!-- (5) -->
        <td><?= $row['name'] ?></td>  <!-- (6) -->
        <td><?= $row['age'] ?></td>
        <td><?= $row['gender'] ?></td>
    </tr>
    <?php endforeach; ?>
</table>

코드를 확인해 보겠습니다.
(1) HTML에서 표는 <table> 태그로 시작하고 </table> 태그로 끝납니다.

(2) <tr><table> 태그의 하위 태그로 행(Row)를 나타냅니다. Table Row의 약자입니다.

(3) <th><table> 태그의 하위 태그로 테이블 헤더를 나타냅니다. 즉 각 열(column)이 어떤 의미인지 기술하는 데 사용됩니다. Table Header의 약자입니다.

(4) 실제 데이터를 보여주는 부분은 테이블 헤더가 끝난 부분부터 시작입니다. 매 행마다 데이터를 반복합니다. 반복문에 처음 진입했을 때 $row 변수에는 $table_data의 첫번째 데이터가 담깁니다.

["name" => "코드이그나이터", "age" => 10, "gender" => "male"]

(5) 매 행마다 줄이 바뀌어야 하므로 반복문 안에 <tr> 태그를 사용합니다.

(6) 개별 데이터는 $row로 표기할 수 있습니다. <td> 태그는 table data의 약자로 표의 개별 항목을 뜻합니다.


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

profile
스타트업에 관심이 많은 10 + n년차 웹 개발자. 자바 스프링 (혹은 부트), 파이썬 플라스크, PHP를 주로 다룹니다.

0개의 댓글