Sample pagination

pagination.php

    <!-- Page Features -->
    <div id="my-product" class="row grid text-center">
        <div class="Collage effect-parent col-lg-12 inner-full-width"> <!-- START: FULL WIDTH -->

            <?php
            include "includes/conn.php";
            $batas = 8;
            $pg = isset( $_GET['pg'] ) ? $_GET['pg'] : "";
             
            if ( empty( $pg ) ) {
                $posisi = 0;
                $pg = 1;
            } else {
                $posisi = ( $pg - 1 ) * $batas;
            }
             
            $data_product = $conn->query( "SELECT kd_produk, produk, gambar1 FROM produk LIMIT $posisi, $batas" );
            while ( $data = $data_product->fetch_assoc() ) {
            ?>

             <div class="grid-item Image_Wrapper">
                <figure class="effect-goliath">
                    <?php echo '<img src="images/'. $data['gambar1'] .'" width="400" height="240" alt="'.$data['produk'].'">'; ?>
                    <figcaption>
                        <h3 class="product-name"><?php echo $data['produk']; ?></h3>
                        <p class="detail">
                       <a href="?p=detail&c=<?php echo $data['kd_produk']; ?>" class="btn btn-info"><i class="fa fa-shopping-cart"></i> Buy</a>
                    </figcaption>           
                </figure>
            </div>
            <?php } ?>

        </div>
    </div>

     <div class="row text-center">
        <div class="col-lg-12 inner-full-width">
            <div class="pagination-home">
                <?php
                // hitung jumlah data
                $jml_data = mysqli_num_rows( mysqli_query( $conn, "SELECT kd_produk, produk, gambar1 FROM produk" ) );
                // Jumlah halaman
                $JmlHalaman = ceil( $jml_data/$batas ); //ceil digunakan untuk pembulatan keatas

                // To first nav
                 $first = '';
                if ( $pg > 1 ) {
                    $first .= '<a href="?pg=1"><span aria-hidden="true">«</span></a>';
                } else {
                    $first .= '<li class="disabled"><a href="#">«</a></li>';
                }
                 
                // prev nav
                $prev = '';
                if ( $pg > 1 ) {
                    $link = $pg-1;
                    $prev .= '<a href="?pg='.$link.'"><span aria-hidden="true">‹</span></a>';
                } else {
                    $prev .= '<li class="disabled"><a href="#">‹</a></li>';
                }
                 
                // Number of nav
                $nmr = '';
                for ( $i = 1; $i<= $JmlHalaman; $i++ ){
                    if ( $i == $pg ) {
                        $nmr .= '<a class="active">'.$i.'</a>';
                    } else {
                        $nmr .='<a href="?pg='.$i.'">'.$i.'</a>';
                    }
                }
                 
                // Next nav
                $next = '';
                if ( $pg < $JmlHalaman ) {
                    $link = $pg + 1;
                    $next .= '<a href="?pg='.$link.'"><span aria-hidden="true">›</span></a>';
                } else {
                    $next .= '<li class="disabled"><a href="#">›</a></li>';
                }

                // Last nav
                $Last = '';
                if ( $pg < $JmlHalaman ) {
                    $Last .= '<a href="?pg='.$JmlHalaman.'"><span aria-hidden="true">»</span></a>';
                }  else {
                    $Last .= '<li class="disabled"><a href="#">»</a></li>';
                }
                ?>

                <!-- DISPLAY NAVIGATION -->
                <nav>
                    <ul class="pagination pagination-sm">
                        <?php echo '<li>'. $first .'</li>'; ?>
                        <?php echo '<li>'. $prev .'</li>'; ?>
                        <?php echo '<li>'. $nmr .'</li>'; ?>
                        <?php echo '<li>'. $next .'</li>'; ?>
                        <?php echo '<li>'. $Last .'</li>'; ?>
                    </ul>
                </nav>

            </div>
        </div>
    </div>