<?php
//routes/admin/post.php
$f3->route('POST /admin/post', function($f3){
    if($f3->get('SESSION.email')){
        require('controllers/posts/insert.php');
        insert($f3);
    }else{
        require_once('controllers/login.php');
        login($f3);
    }
});

$f3->route('GET /admin/post/edit/@id', function($f3){
    if($f3->get('SESSION.email')){
        require('controllers/posts/selectOne.php');
        selectOne($f3, $f3->get('PARAMS.id'));
    }else{
        require_once('controllers/login.php');
        login($f3);
    }
});

$f3->route('POST /admin/post/edit/@id', function($f3){
    if($f3->get('SESSION.email')){
        require('controllers/posts/update.php');
        update($f3, $f3->get('PARAMS.id'));
    }else{
        require_once('controllers/login.php');
        login($f3);
    }
});

$f3->route('GET /admin/post/delete/@id', function($f3){
    if($f3->get('SESSION.email')){
        require('controllers/posts/delete.php');
        delete($f3, $f3->get('PARAMS.id'));
    }else{
        require_once('controllers/login.php');
        login($f3);
    }
});

$f3->route('POST /admin/post/paginate', function($f3){
    if($f3->get('SESSION.email')){
        require_once('setting.php');
        require('controllers/posts/paginate.php');
        $posts = paginate($f3, $setting['adminPostLimit'], $f3->get('POST.page'));
    
        echo json_encode(iterator_to_array($posts));
    }else{
        require_once('controllers/login.php');
        login($f3);
    }
});

<?php
//controllers/posts/paginate.php
function paginate($f3, $limit, $page){
    $skip = (int)$page * $limit;
    $collection = $f3->get('DB')->posts;
    $posts = $collection->find([], ['limit'=>$limit, 'sort'=>['date'=>-1], 'skip'=>$skip]);
    
    return $posts;
}

<!--views/admin/partials/listing.php-->
<link href='<?php echo $BASE ?>/public/styles/admin/partials/listing.css' rel='stylesheet' />
<script src="<?php echo $BASE ?>/public/scripts/admin/paginate.js"></script>

<div class='Listing region'>
    <div class='info'><?php echo $message ?></div>

    <div class="wrapper">
        <?php foreach($posts as $post){ ?>
        <div class='item'>
            <div class="thumb-wrapper">
                <a href="<?php echo $BASE.'/'.$route.'/'.$post['id'] ?>">
                    <img class="thumb" src="<?php echo $post['thumb'] ?>" />
                    <?php if($post['video']){ ?>
                    <img class='play-icon' src="<?php echo $BASE ?>/public/images/play.png" />
                    <?php } ?>
                </a>
            </div>

            <div class='title-wrapper'>
                <div class='title'>
                    <a href="<?php echo $BASE.'/'.$route.'/'.$post['id'] ?>"><?php echo $post['title'] ?></a>
                </div>
                <div class='author'><?php echo $post['author'] ?></div>
            </div>

            <div class="edit-delete">
                <a href="<?php echo $BASE.'/admin/'.$route.'/edit/'.$post['id'] ?>">
                    <img class='edit' src="<?php echo $BASE ?>/public/images/edit.png" />
                </a>
                <a href="<?php echo $BASE.'/admin/'.$route.'/delete/'.$post['id'] ?>">
                    <img class='delete' src="<?php echo $BASE ?>/public/images/delete.png" />
                </a>
            </div>
        </div>
        <?php } ?>
    </div>

    <div class='pagination'>
        <img onClick="paginate('<?php echo $route ?>', '<?php echo $BASE ?>')" 
        src="<?php echo $BASE ?>/public/images/load-more.png" />
    </div>
</div>

//public/scripts/admin/paginate.js
var page = 0

function paginate(route, base){
    $('.pagination img').attr('src', `${base}/public/images/loading.gif`)
    page += 1

    $.post(`${base}/admin/${route}/paginate`, {page: page}, function(data, status){
        appendItem(JSON.parse(data), route, base)
    })
}

function appendItem(items, route, base){
    var html = ''

    for(let v in items){
        html += `<div class='item'>`
        html += `<div class="thumb-wrapper">`
        html += `<a href="${base}/${route}/${items[v].id}">`
        html += `<img class="thumb" src="${items[v].thumb}" />`
        if(items[v].video){
            html += `<img class='play-icon' src="${base}/public/images/play.png" />`
        }
        html += `</a>`
        html += `</div>`
        html += `<div class='title-wrapper'>`
        html += `<div class='title'>`
        html += `<a href="${base}/${route}/${items[v].id}">${items[v].title}</a>`
        html += `</div>`
        html += `<div class='author'>${items[v].author}</div>`
        html += `</div>`
        html += `<div class="edit-delete">`
        html += `<a href="${base}/admin/${route}/edit/${items[v].id}">`
        html += `<img class='edit' src="${base}/public/images/edit.png" />`
        html += `</a>`
        html += `<a href="${base}/admin/${route}/delete/${items[v].id}">`
        html += `<img class='delete' src="${base}/public/images/delete.png" />`
        html += `</a>`
        html += `</div>`
        html += `</div>`
    }
    
    $('.pagination img').attr('src', `${base}/public/images/load-more.png`)
    $('.Listing .wrapper').append(html)
}

GitHub: https://github.com/Sokhavuth/multimedia_

Heroku: https://khmerweb-multimedia1.herokuapp.com/