포스트 보기
포스트 썸네일 [Posting] 12. 포스트 목록 뷰 생성 및 pagination 기능 구현
NO  : 12 작성자 : cheolee
주제  : 공부 > 블로그개발 조회수 : 45 등록일 : 2021-08-07

저장된 포스트 현황을 확인할 수 있도록 포스트 목록 페이지를 생성합니다. 
 

목록 페이지는 기본적으로 모든 항목을 한번에 표시할 수 있지만, 
편의상 한번에 일정 개수의 항목만 보이도록 하고 여러 페이지를 링크로 나눠서 표시하는 방식(pagination)을 사용하는게 일반적입니다. 
 

여기서는 포스트 목록 페이지에 
CodeIgniter 3의 pagination 라이브러리와 Bootstrap 5의 pagination 콤포넌트를 적용한 페이징 요소까지 구현하도록 하겠습니다.


 

포스트 목록 및 pagination 기능 구현



STEP 1) 포스트 목록 메뉴를 추가합니다.

  • ~/application/views/template/head_nav.php

  • sidebarMenu 리스트에 항목 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...(생략)
<div id="sidebarMenu" class="sidebar-sticky col-sm-12 col-lg-2 d-lg-block bg-light collapse" >
    <div class="col-2 d-flex flex-column p-3 bg-light" style="width: 280px; height:100%;">
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="/home/index" class="nav-link">
                    포스트 작성
                </a>
            </li>
            <li class="nav-item">
                <a href="/home/list" class="nav-link">
                    포스트 목록
                </a>
            </li>
        </ul>
    </div>
</div>
 cs


STEP 2) 포스트 목록을 보여줄 뷰 파일을 생성하여 코드를 작성합니다.

  • ~/application/views/post_list.php 파일 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    require_once($_SERVER['DOCUMENT_ROOT'].'/application/views/template/header.php');
    require_once($_SERVER['DOCUMENT_ROOT'].'/application/views/template/head_nav.php');
?>
<!-- main content -->
<div class="col-sm-12 col-lg-10" >
    <?= $this->session->flashdata('message') ?>
    <div class="col-sm-12 col-lg-12">
        <div class="pt-2 fs-5 fw-bold">
            <span class="">포스트 목록</span>
        </div>
        <hr>
        <?php foreach ($posts as $post) : ?>
        <div class="mb-2 shadow-sm">
            <div class="row no-gutters mt-2 mx-0 px-2">
                <div class="col-md-12">
                    <a href="<?= '/home/detail/' . $post->idx ?>" class="text-dark text-decoration-none p-0 m-0">                                           
                        <div class="row d-flex align-items-center mx-0 p-0 text-truncate">
                            <div class="col-1">
                                <span class="d-inline-block" title="포스트 인덱스">                       
                                    <?= $post->idx ?>
                                </span>
                            </div>
                            <div class="col-8">
                                <span class="d-inline-block" title="포스트 제목">                        
                                    <?= $post->title ?>
                                </span>
                            </div>
                            <div class="col-3">
                                <i class="fas fa-user mr-1 text-info" style="font-size:.75rem;">등록일</i>
                                <?= ' : '.date('Y-m-d',strtotime($post->reg_date))  ?>
                            </div>
                        </div>
                    </a>                            
                </div>
            </div>
        </div>
        <?php endforeach ?>
    </div>
    <!-- pagination -->
    <div class="d-flex justify-content-center mt-3">
        <nav aria-label="Page navigation">
            <?= $page_links ?>
        </nav>
    </div>
</div>
<!-- --end of main content -->
<?  
    require_once($_SERVER['DOCUMENT_ROOT'].'/application/views/template/footer.php');
?>
 cs


STEP 3) 포스트 목록을 화면에 보여줄 수 있도록 컨트롤러에 함수를 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?
...(생략)
// 포스트의 목록을 보여줍니다.
    public function list()
    {   
        // pagination class를 로드합니다.
        $this->load->library('pagination');
        $posts_count = count($this->home->get_all_post());
        // 기본(필수) 설정입니다.
        $config['base_url'] = 'http://www.myblog.kr/home/list/';
        $config['total_rows'] = $posts_count;
        $config['per_page'] = 5;
        $config['num_links'] = 1; // 페이지 숫자 링크 개수를 설정합니다. ex) << First < 1 2 선택한 숫자 3 4 > Last >>
        
        // 요소 스타일 또는 표시내용 커스텀을 위한 설정입니다.
        $config['full_tag_open'] = '<ul class="pagination">';  // pagination 요소 전체를 감싸는 tag를 설정합니다.
        $config['full_tag_close'] = '</ul>';
        $config['first_link']   = 'First'; // 'First' 요소의 표시 내용을 설정합니다.(default 'First')
        $config['first_tag_open']   = '<li class="page-item">'; // 'First'(처음) 링크 요소를 감싸는 tag를 설정합니다.
        $config['first_tag_close'] = '</li>';
        $config['prev_link']    = '&lt'; // 'Prev' 요소의 표시 내용을 설정합니다.(default '&lt'['<'])
        $config['prev_tag_open']    = '<li class="page-item">'; // '<'(이전) 링크 요소를 감싸는 tag를 설정합니다.
        $config['prev_tag_close'] = '</li>';
        $config['cur_tag_open'] = '<li class="page-item active" aria-current="page"><a class="page-link">'; // 현재 페이지 링크 요소를 감싸는 tag를 설정합니다.
        $config['cur_tag_close'] = '</a></li>';
        $config['num_tag_open'] = '<li class="page-item">'; // 페이지 숫자 링크 요소를 감싸는 tag를 설정합니다.
        $config['num_tag_close'] = '</li>';
        $config['next_link']    = '&gt'; // 'Next' 요소의 표시 내용을 설정합니다.(default '&gt'['>'])
        $config['next_tag_open']    = '<li class="page-item">'; // '>'(다음) 링크 요소를 감싸는 tag를 설정합니다.
        $config['next_tag_close'] = '</li>';
        $config['last_link']    = 'Last'; // 'Last' 요소의 표시 내용을 설정합니다.(default 'Last')
        $config['last_tag_open']    = '<li class="page-item">'; // 'Last'(마지막) 링크 요소를 감싸는 tag를 설정합니다.
        $config['last_tag_close'] = '</li>';
        $config['attributes'] = array('class' => 'page-link');  // <a> 테그에 속성을 추가합니다. (key:value)
        // 페이지네이션 요소를 초기화합니다.
        $this->pagination->initialize($config);
        // url에서 페이지 번호에 해당하는 segment 값을 가져옵니다.
        // segment란 주소창의 hostname이후 '/'로 구분된 path 순서입니다.
        // ex) 'http://www.myblog.kr/home/list/3' 의 경우 세번째 segment 값은 '3'이 됩니다.
        $page = $this->uri->segment(3) ? $this->uri->segment(3) : 0;
        // 현재 페이지에 맞게 포스트 데이터를 가져옵니다.
        $page_posts = $this->home->get_page_post($config['per_page'],$page);
        // 뷰페이지에 넘겨줄 데이터 배열을 생성합니다.
        $data = array(
            'page'              => $page,
            'page_posts'        => $page_posts,
            'page_links'        => $this->pagination->create_links() // 페이징 링크 요소들을 생성합니다.
        );
        $this->load->view('post_list', $data);
    }
 cs


STEP 4) 포스트 목록을 가져올 수 있도록 모델에 함수를 추가합니다.

  • ~/myblog/application/models/Home_model.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?
...(생략)
// 모든 포스트의 데이터를 가져옵니다.
public function get_all_post()
{
    $this->db->order_by('idx', 'DESC');  // idx 기준 오름차순 정렬
    return $this->db->get('posts')->result();
}
// 각 페이지 개수에 맞게 포스트 데이터들을 가져옵니다.
public function get_page_post($limit,$start) 
{
   $this->db->limit($limit,$start);
   return $this->db->get('posts')->result();
}
 cs


STEP 5) 블로그에 접속하여 포스트 목록 페이지를 확인합니다.

  • 포스트 목록 메뉴 클릭


 

  • 포스트 항목과 페이징 요소 확인


 

포스트 항목을 클릭하면 포스트 보기 화면으로 이동합니다.

댓글 1 개 댓글 보기

관련 포스트 목록