반응형

이번엔 인클루드를 해보자. 기존 파일을 조금 수정해보겠다.

 

/app/Views/board_list.php

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title></title>
  </head>
  <body>
  <div class="col-md-8" style="margin:auto;padding:20px;">
  <div class="wrap">
  <!-- Header -->

    <table class="table">
        <thead>
            <tr>
            <th scope="col">번호</th>
            <th scope="col">글쓴이</th>
            <th scope="col">제목</th>
            <th scope="col">등록일</th>
            </tr>
        </thead>
        <tbody id="board_list">
                <tr>
                    <th scope="row">1</th>
                    <td>홍길동</td>
                    <td>게시판의 글</td>
                    <td>2022.10.26</td>
                </tr>
        </tbody>
        </table>

  <!-- Footer -->
  </div>
  </div>

</body>
</html>

 

많이 봤었던 부트스트랩의 기본적인 테이블이다. 주석을 달아 놓은 것처럼 이 파일에는 헤더와 푸터가 함께 들어 있다. 이제 이 푸터와 헤더를 분리해서 include해보려고 한다. 이런걸 ci4에서는 레이아웃(layout)이라고 한다.

 

다시 파일을 수정해보자. 인클루드 될 부분을 잘라낸다.

 

/app/Views/board_list.php

    <table class="table">
        <thead>
            <tr>
            <th scope="col">번호</th>
            <th scope="col">글쓴이</th>
            <th scope="col">제목</th>
            <th scope="col">등록일</th>
            </tr>
        </thead>
        <tbody id="board_list">
                <tr>
                    <th scope="row">1</th>
                    <td>홍길동</td>
                    <td>게시판의 글</td>
                    <td>2022.10.26</td>
                </tr>
        </tbody>
        </table>

요렇게 수정했다. 기존에는 여기 위에 include로 파일을 지정해서 인클루드를 했었다. ci4에서는 그렇게 안한다. 파일을 생성해보자.

 

/app/Views/layout.php

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title></title>
  </head>
  <body>
  <div class="col-md-8" style="margin:auto;padding:20px;">
  <div class="wrap">
  <!-- Header -->

    <?php echo $content; ?>
 
  <!-- Footer -->
  </div>
  </div>

</body>
</html>

잘라냈던 소스를 넣고 이렇게 레이아웃용 파일을 하나 만들어준다. 그리고 몇번의 작업이 더 남았다. 이번엔 이 파일을 화면에서 불러서 사용할 수 있도록 함수를 만들어 준다.

 

/app/Helpers/render_helper.php

<?php
 
if ( ! function_exists('render'))
{
    function render(string $name, array $data = [], array $options = [])
    {
        return view(
            'layout',
            [
                'content' => view($name, $data, $options),
            ],
            $options
        );
    }
}

이렇게 함수를 만들어 준다. 그럼 이제 컨트롤러에서 페이지를 불러올때마다 이 함수를 이용해서 페이지를 불러야한다. 수정해보자.

 

/app/Controllers/Board.php

<?php

namespace App\Controllers;

class Board extends BaseController
{
    public function list()
    {
        return render('board_list');  
        //return view('board_list');
    }
}

 

view함수 대신 render 함수를 사용했다. 여기까지 하고 페이지를 열어보면 render 함수가 지정돼지 않았다고 나온다. render함수를 사용할 수 있도록 등록해보자.

 

/app/Config/Events.php

<?php

namespace Config;

use CodeIgniter\Events\Events;
use CodeIgniter\Exceptions\FrameworkException;

Events::on('post_controller_constructor', function() {
    helper('render');
});


/*
 * --------------------------------------------------------------------
 * Application Events
 * --------------------------------------------------------------------
 * Events allow you to tap into the execution of the program without
 * modifying or extending core files. This file provides a central
 * location to define your events, though they can always be added
 * at run-time, also, if needed.
 *
 * You create code that can execute by subscribing to events with
 * the 'on()' method. This accepts any form of callable, including
 * Closures, that will be executed when the event is triggered.
 *
 * Example:
 *      Events::on('create', [$myInstance, 'myMethod']);
 */

Events::on('pre_system', static function () {
    if (ENVIRONMENT !== 'testing') {
        if (ini_get('zlib.output_compression')) {
            throw FrameworkException::forEnabledZlibOutputCompression();
        }

        while (ob_get_level() > 0) {
            ob_end_flush();
        }

        ob_start(static fn ($buffer) => $buffer);
    }

    /*
     * --------------------------------------------------------------------
     * Debug Toolbar Listeners.
     * --------------------------------------------------------------------
     * If you delete, they will no longer be collected.
     */
    if (CI_DEBUG && ! is_cli()) {
        Events::on('DBQuery', 'CodeIgniter\Debug\Toolbar\Collectors\Database::collect');
        Services::toolbar()->respond();
    }
});

Events::on('post_controller_constructor', function() {
    helper('render');
});

 

이 부분을 추가해줬다. 자 이제 다시 php spark serve로 웹서버를 다시 실행해주고 웹페이지를 로딩해보자.

 

http://localhost:8080/board

 

 

작업을 하기 전에 보였던 그 화면이 그대로 보이면 성공이다. 안되면 될때까지~

 

다음엔 디비에서 데이터를 불러서 화면에 뿌려보는걸 해보도록 하자

반응형

+ Recent posts