Skip to content

Instantly share code, notes, and snippets.

@kaqfa

kaqfa/page_class.php

Last active November 8, 2018 23:53
Show Gist options
  • Save kaqfa/6baf73a43e1227fa611ffe4bf7c05ec6 to your computer and use it in GitHub Desktop.
Save kaqfa/6baf73a43e1227fa611ffe4bf7c05ec6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
page_class.php
<?php
class Paginasi{
function __construct($pdo_connect, $sql, $num_per_page, $url_pattern){
$this->db = $pdo_connect;
$this->sql = $sql;
$this->npp = $num_per_page;
$this->url = 'http://'.$_SERVER['HTTP_HOST'].$url_pattern;
$this->cpage = (isset($_GET['p']) ? $_GET['p'] : 0);
$obj_query = $this->db->query($sql);
$this->max_num = $obj_query->fetchColumn();
}
function cur_page_results(){
$cpage = $this->cpage;
$cur_sql = $this->sql." limit ".($cpage * $this->npp).", ".$this->npp;
return $this->db->query($cur_sql);
}
function print_paginate($cpage){
$prev = '<li class="page-item '.($cpage == 0 ? '' : 'disabled').'">
<a class="page-link" href="'.$this->url.'" tabindex="-1"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a>
</li>';
$num_prev = ($cpage == 0 ? '' : '<li class="page-item"><a class="page-link" href="'.$this->url.'?p='.($cpage-1).'">'.($cpage).'</a></li>');
$cur = '<li class="page-item active">
<a class="page-link" href="'.$this->url.'?p='.($cpage).'">'.($cpage+1).' <span class="sr-only">(current)</span></a>
</li>';
$num_next = (($cpage+1)*$this->npp >= $this->max_num ? '' : '<li class="page-item"><a class="page-link" href="'.$this->url.'?p='.($cpage+2).'">'.($cpage+2).'</a></li>');
$next = '<li class="page-item '.(($cpage+1)*$this->npp <= $this->max_num ? '' : 'disabled').'">
<a class="page-link" href="'.$this->url.'?p='.($cpage+2).'"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</li>';
$html = '<nav class="wd-pagination">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="'.$this->url.'">First</a></li>'.
$prev.$num_prev.
$cur.
$num_next.$next.
'<li class="page-item"><a class="page-link" href="'.$this->url.'?p='.(int)($this->max_num / $this->npp).'">Last</a></li>
</ul>
</nav>';
return $html;
}
}
Raw
sample_blurb.php
<?php
include "page_class.php";
$conn = new PDO('mysql:host=localhost;dbname=siakad', 'root', '');
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$query = 'select * from mata_kuliah';
$page = new Paginasi($conn, $query, 10, '/blurb/php/paginasi.php');
$p = (isset($_GET['p']) ? $_GET['p'] : 0);
?>
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Blurb is Price Comparison, Product Review and Affiliate, Social Business, Multi vendor Store, HTML Template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<!-- =========================
Loding All Stylesheet
============================== -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/owl.carousel.min.css">
<link rel="stylesheet" href="../css/owl.carousel.min.css">
<link rel="stylesheet" href="../css/owl.theme.default.min.css">
<link rel="stylesheet" href="../css/animate.min.css">
<link rel="stylesheet" href="../css/megamenu.css">
<!-- =========================
Loding Main Theme Style
============================== -->
<link rel="stylesheet" href="../css/style.css">
<!-- =========================
Header Loding JS Script
============================== -->
<script src="../js/modernizr.js"></script>
</head>
<body class="">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="preloader"></div>
<section id="wd-header" class="d-flex align-items-center mob-sticky">
<div class="container">
<div class="row">
<!-- =========================
Mobile Menu
============================== -->
<div class="order-2 order-sm-1 col-2 col-sm-2 col-md-4 d-block d-lg-none">
<div class="accordion-wrapper hide-sm-up">
<a href="#" class="mobile-open"><i class="fa fa-bars" ></i></a>
<!--Mobile Menu start-->
<ul id="mobilemenu" class="accordion">
<!-- <li class="mob-logo"><a href="index.html"><img src="../img/logo.png" alt=""></a></li>-->
<li><a class="closeme" href="#"><i class="fa fa-times" ></i></a></li>
<li class="mob-logo"><a href="index.html"><img src="../img/logo.png" alt=""></a></li>
<li>
<div class="link">Home<i class="fa fa-chevron-down"></i></div>
<ul class="submenu font-sky">
<li><a href="index.html">Home one</a></li>
<li><a href="index-01-02.html">Home one Fullwidth</a></li>
<li><a href="index-second-home.html">Home two</a></li>
<li><a href="index-third-home.html">Home three</a></li>
<li><a href="magazine.html">Home Page Magazine </a></li>
</ul>
</li>
<li>
<div class="link">Comparison Product <i class="fa fa-chevron-down"></i></div>
<ul class="submenu font-sky">
<li><a href="compare-products.html">Comparison Product</a></li>
<li><a href="compare-products-single.html">Compare Products Single</a></li>
<li><a href="compare-products-choose-market.html">Compare Products Choose Market</a></li>
</ul>
</li>
<li>
<div class="link ">shop<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="shop-left-sidebar.html">Shop Page</a></li>
<li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
<li><a href="shop-left-sidebar-full-grid.html">Shop Left Sidebar Full Grid</a></li>
<li><a href="shop-right-sidebar-full-grid.html">Shop Right Sidebar Full Grid</a></li>
<li><a href="product-details.html">Product Details</a></li>
<li><a href="product-details-scroll.html">Product Details v2</a></li>
<li><a href="wishlist.html">Wishlist View</a></li>
</ul>
</li>
<li>
<div class="link">megamenu<i class="fa fa-chevron-down"></i></div>
<ul class="submenu ">
<li><a href="shop-left-sidebar.html">Visual Phones</a></li>
<li><a href="shop-left-sidebar.html">Chinese phones</a></li>
<li><a href="shop-left-sidebar.html">Google Phones</a></li>
<li><a href="shop-left-sidebar.html">Video cameras</a></li>
<li><a href="shop-left-sidebar.html">Top Cameras</a></li>
<li><a href="shop-left-sidebar.html">Cheap Cameras</a></li>
<li><a href="shop-left-sidebar.html">Best Cameras</a></li>
<li><a href="shop-left-sidebar.html">Luxury Cameras</a></li>
<li><a href="shop-left-sidebar.html">Simple Cameras</a></li>
<li><a href="shop-left-sidebar.html">Phone Electronice</a></li>
<li><a href="shop-left-sidebar.html">Phone Appereances</a></li>
<li><a href="shop-left-sidebar.html">Visual Phones</a></li>
<li><a href="shop-left-sidebar.html">Chinese phones</a></li>
<li><a href="shop-left-sidebar.html">Google Phones</a></li>
<li><a href="shop-left-sidebar.html">Cheap Phones</a></li>
<li><a href="shop-left-sidebar.html">Luxury phones</a></li>
<li><a href="shop-left-sidebar.html">Simple phones</a></li>
<li><a href="shop-left-sidebar.html">Camera Electronice</a></li>
<li><a href="shop-left-sidebar.html">Camera Appereances</a></li>
<li><a href="shop-left-sidebar.html">DSLR</a></li>
<li><a href="shop-left-sidebar.html">Video cameras</a></li>
<li><a href="shop-left-sidebar.html">Top Cameras</a></li>
<li><a href="shop-left-sidebar.html">Cheap Cameras</a></li>
<li><a href="shop-left-sidebar.html">Best Cameras</a></li>
<li><a href="shop-left-sidebar.html">Luxury Cameras</a></li>
<li><a href="shop-left-sidebar.html">Simple Cameras</a></li>
</ul>
</li>
<li>
<div class="link">Reviews<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="product-details-review-history.html">Product History</a></li>
<li><a href="product-details-single-review.html">Single Review</a></li>
<li><a href="review-left-sidebar.html">Review Left Sidebar</a></li>
<li><a href="review-right-sidebar.html">Review Right Sidebar</a></li>
</ul>
</li>
<li>
<div class="link">Blog<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="blog-full-grid.html">Blog Full Grid</a></li>
<li><a href="blog-two-grid.html">Blog Two Grid</a></li>
<li><a href="blog-three-grid.html">Blog Three Grid</a></li>
<li><a href="blog-four-grid.html">Blog Four Grid</a></li>
<li><a href="blog-four-grid-left-sidebar.html">Blog Four Grid Left Sidebar</a></li>
<li><a href="blog-four-grid-right-sidebar.html">Blog Four Grid Right Sidebar</a></li>
<li><a href="single-blog-with.html">Single Blog</a></li>
<li><a href="single-blog-with-add.html">Single Blog With Add</a></li>
</ul>
</li>
<li class="out-link"><a class="" href="contact-us.html">Contact</a></li>
<li class="out-link"><a class="" href="coupon.html">Coupon</a></li>
</ul>
<!--Mobile Menu end-->
</div>
</div><!--Mobile menu end-->
<div class="order-1 order-sm-2 col-12 col-sm-4 col-md-4 col-lg-2 col-xl-2">
<div class="blrub-logo">
<a href="index.html">
<img src="../img/logo.png" alt="Logo">
</a>
</div>
</div>
<!-- =========================
Search Box Show on large device
============================== -->
<div class="col-12 order-lg-2 col-md-5 col-lg-6 col-xl-5 d-none d-lg-block">
<div class="input-group wd-btn-group header-search-option">
<input type="text" class="form-control blurb-search" placeholder="Search ..." aria-label="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary wd-btn-search" type="button">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</div>
<!-- =========================
Login and My Acount
============================== -->
<div class="order-3 order-sm-3 col-10 col-sm-6 col-lg-4 col-md-4 col-xl-5">
<!-- =========================
User Account Section
============================== -->
<div class="acc-header-wraper">
<div class="account-section">
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg2">
<i class="fa fa-sign-in" aria-hidden="true"></i><span>Login/Register</span>
</button>
<div class="modal fade bd-example-modal-lg2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="row text-left">
<div class="col-md-12 p0">
<div class="modal-tab-section wd-modal-tabs">
<ul class="nav nav-tabs wd-modal-tab-menu text-center" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-expanded="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sign-up-tab" data-toggle="tab" href="#sign-up" role="tab" aria-controls="sign-up">Sign up</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<div class="row">
<div class="col-md-6 p0 brand-description-area">
<img src="../img/login-img-1.jpg" class="img-fluid" alt="">
<div class="brand-description">
<div class="brand-logo">
<img src="../img/logo.png" alt="Logo">
</div>
<div class="modal-description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod teoccaecvoluptatem.</p>
</div>
<ul class="list-unstyled">
<li class="media">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
<li class="media my-4">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
<li class="media">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-12 col-lg-6 p0">
<div class="login-section text-center">
<div class="social-media">
<a href="#" class="facebook-bg"><i class="fa fa-facebook" aria-hidden="true"></i> Login</a>
<a href="#" class="twitter-bg"><i class="fa fa-twitter" aria-hidden="true"></i> Login</a>
<a href="#" class="google-bg"><i class="fa fa-google-plus" aria-hidden="true"></i> Login</a>
</div>
<div class="login-form text-left">
<form>
<div class="form-group">
<label for="exampleInputEmail-login">User name</label>
<input type="text" class="form-control" id="exampleInputEmail-login" placeholder="John mist |">
</div>
<div class="form-group">
<label for="exampleInputPassword-login-pass-2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword-login-pass-2" placeholder="*** *** ***">
</div>
<button type="submit" class="btn btn-primary wd-login-btn">LOGIN</button>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Save this password
</label>
</div>
<div class="wd-policy">
<p>
By Continuing. I conferm that i have read and userstand the <a href="#">terms of uses</a> and <a href="#">Privacy Policy</a>.
Don’t have an account? <a href="#" class="black-color"><strong><u>Sign up</u></strong></a>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">
<div class="row">
<div class="col-md-6 p0 brand-login-section">
<img src="../img/login-img-2.jpg" class="img-fluid" alt="">
<div class="brand-description">
<div class="brand-logo">
<img src="../img/logo.png" alt="Logo">
</div>
<div class="modal-description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod teoccaecvoluptatem.</p>
</div>
<ul class="list-unstyled">
<li class="media">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
<li class="media my-4">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
<li class="media">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-6 p0">
<div class="sign-up-section text-center">
<div class="login-form text-left">
<form>
<div class="form-group">
<label for="exampleInputname1">First name</label>
<input type="text" class="form-control" id="exampleInputname1" placeholder="First Name">
</div>
<div class="form-group">
<label for="exampleInputname2">Last name</label>
<input type="text" class="form-control" id="exampleInputname2" placeholder="Last Name">
</div>
<div class="form-group">
<label for="exampleInputEmail-sign-up">Email</label>
<input type="text" class="form-control" id="exampleInputEmail-sign-up" placeholder="Enter you email ...">
</div>
<div class="form-group">
<label for="exampleInputPassword-login-pass">Password</label>
<input type="password" class="form-control" id="exampleInputPassword-login-pass" placeholder="*** *** ***">
</div>
<button type="submit" class="btn btn-primary wd-login-btn">Sign Up</button>
<div class="wd-policy">
<p>
By Continuing. I conferm that i have read and userstand the <a href="#">terms of uses</a> and <a href="#">Privacy Policy</a>.
Don’t have an account? <a href="#" class="black-color"><strong><u>Sign up</u></strong></a>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="serch-wrapper">
<div class="search">
<input class="search-input" placeholder="Search" type="text">
<a href="javascript:void(0)"><i class="fa fa-search"></i></a>
</div>
</div>
<!-- =========================
Cart Out
============================== -->
<div class="header-cart">
<a href="coupon.html" class="coupon-save"><i class="fa fa-star-o" aria-hidden="true"></i>
<span class="count">5</span>
</a>
<a class="header-wishlist" href="wishlist.html">
<i class="fa fa-heart-o" aria-hidden="true"></i>
<span class="count">8</span>
</a>
<div class="dropdown wd-compare-btn">
<button class="btn btn-secondary dropdown-toggle compare-btn" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-balance-scale"></i>
</button>
<span class="count">9</span>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
<div class="wd-item-list">
<div class="media">
<img class="d-flex mr-3" src="../img/cart-img-1.jpg" alt="cart-img">
<div class="media-body">
<h6 class="mt-0 list-group-title">Voyage Yoga Bag</h6>
<div class="rating">
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
<div class="cart-price">$59</div>
</div>
</div>
<div class="media">
<img class="d-flex mr-3" src="../img/cart-img-2.jpg" alt="cart-img">
<div class="media-body">
<h6 class="mt-0 list-group-title">Voyage Yoga Bag</h6>
<div class="rating">
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
<div class="cart-price">$59</div>
</div>
</div>
<div class="media">
<img class="d-flex mr-3" src="../img/cart-img-1.jpg" alt="cart-img">
<div class="media-body">
<h6 class="mt-0 list-group-title">Voyage Yoga Bag</h6>
<div class="rating">
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
<div class="cart-price">$59</div>
</div>
</div>
<div class="media">
<img class="d-flex mr-3" src="../img/cart-img-2.jpg" alt="cart-img">
<div class="media-body">
<h6 class="mt-0 list-group-title">Voyage Yoga Bag</h6>
<div class="rating">
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
<div class="cart-price">$59</div>
</div>
</div>
<div class="media">
<img class="d-flex mr-3" src="../img/cart-img-1.jpg" alt="cart-img">
<div class="media-body">
<h6 class="mt-0 list-group-title">Voyage Yoga Bag</h6>
<div class="rating">
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star active-color" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
<div class="cart-price">$59</div>
</div>
</div>
</div>
<div class="media text-center">
<a href="compare-products.html" class="btn btn-primary go-compare-page">Compare
<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--Row End-->
</div><!--Container End-->
</section><!--Section End-->
<!-- =========================
Main Menu Section
============================== -->
<section id="main-menu" class="sticker-nav">
<div class="container">
<div class="row">
<div class="col-2 col-md-6 col-lg-12 ">
<div class="menu-container wd-megamenu">
<div class="menu">
<ul class="wd-megamenu-ul">
<li><a href="index.html" class="main-menu-list"><i class="fa fa-home" aria-hidden="true"></i> Home <i class="fa fa-angle-down angle-down" aria-hidden="true"></i></a>
<ul class="single-dropdown">
<li><a href="index.html">Home Page 1</a></li>
<li><a href="index-01-02.html">Home page 1 Fullwidth</a></li>
<li><a href="index-second-home.html">Home Page 2</a></li>
<li><a href="index-third-home.html">Home Page 3</a></li>
<li><a href="magazine.html">Home Page Magazine</a></li>
</ul>
</li>
<li><a href="compare-products.html" class="main-menu-list">Comparison Product <i class="fa fa-angle-down angle-down" aria-hidden="true"></i></a>
<ul class="single-dropdown">
<li><a href="compare-products.html">Comparison Product</a></li>
<li><a href="compare-products-single.html">Compare Products Single</a></li>
<li><a href="compare-products-choose-market.html">Compare Products Choose Market</a></li>
<li><a href="contact-us.html">Contact us</a></li>
</ul>
</li>
<li><a href="shop-left-sidebar.html" class="main-menu-list">Shop <i class="fa fa-angle-down angle-down" aria-hidden="true"></i></a>
<ul class="single-dropdown">
<li><a href="shop-left-sidebar.html">Shop Page</a></li>
<li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
<li><a href="shop-left-sidebar-full-grid.html">Shop Left Sidebar Full Grid</a></li>
<li><a href="shop-right-sidebar-full-grid.html">Shop Right Sidebar Full Grid</a></li>
<li><a href="product-details.html">Product Details</a></li>
<li><a href="product-details-scroll.html">Product Details v2</a></li>
<li><a href="wishlist.html">Wishlist View</a></li>
</ul>
</li>
<li class="pos-inherit"><a href="shop-left-sidebar.html" class="main-menu-list ">Shortcode <i class="fa fa-angle-down angle-down" aria-hidden="true"></i></a>
<ul class="single-dropdown megamenu">
<li><a href="#" class="menu-subtitle">Shortcode One</a>
<ul class="sub-menu-list">
<li><a href="blurb-blog.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i> blurb-blog</a></li>
<li><a href="blurb-call-to-action.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-call-to-action</a></li>
<li><a href="blurb-carousel.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-carousel</a></li>
<li><a href="blurb-compare-products.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-compare-products</a></li>
<li><a href="blurb-footer.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-footer</a></li>
<li><a href="blurb-counterup.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb Count up</a></li>
<li><a href="404.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>404 page</a></li>
</ul>
</li>
<li><a href="#" class="menu-subtitle">Shortcode Two</a>
<ul class="sub-menu-list">
<li><a href="blurb-product.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-product</a></li>
<li><a href="blurb-reveiw.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-reveiw</a></li>
<li><a href="blurb-service.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-service</a></li>
<li><a href="blurb-widgetstyle-1.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-widgetstyle-1</a></li>
<li><a href="blurb-social.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb social icon</a></li>
<li><a href="blurb-subscribe.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb Subscribe</a></li>
<li><a href="coming-soon.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Coming Soon</a></li>
</ul>
</li>
<li><a href="#" class="menu-subtitle">Shortcode three</a>
<ul class="sub-menu-list">
<li><a href="blurb-widgetstyle-2.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-widgetstyle-2</a></li>
<li><a href="blurb-widgetstyle-3.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-widgetstyle-3</a></li>
<li><a href="blurb-widgetstyle-4.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-widgetstyle-4</a></li>
<li><a href="blurb-widgetstyle-5.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-widgetstyle-5</a></li>
<li><a href="blurb-widgetstyle-6.html"><i class="fa fa-angle-double-right" aria-hidden="true"></i>blurb-widgetstyle-6</a></li>
</ul>
</li>
<li>
<a href="product-details-scroll.html" class="add-img"><img src="../img/nav-img-1.jpg" class="figure-img img-fluid" alt="Product Img"></a>
<a href="product-details-scroll.html" class="add-img"><img src="../img/nav-img-2.jpg" class="figure-img img-fluid" alt="Product Img"></a>
</li>
</ul>
</li>
<li><a href="review-left-sidebar.html" class="main-menu-list">REVIEWS</a>
<ul class="single-dropdown">
<li><a href="product-details-review-history.html">Product History</a></li>
<li><a href="product-details-single-review.html">Single Review</a></li>
<li><a href="review-left-sidebar.html">Review Left Sidebar</a></li>
<li><a href="review-right-sidebar.html">Review Right Sidebar</a></li>
</ul>
</li>
<li><a href="blog-four-grid-left-sidebar.html" class="main-menu-list">Blog <i class="fa fa-angle-down angle-down" aria-hidden="true"></i></a>
<ul class="single-dropdown">
<li><a href="blog-full-grid.html">Blog Full Grid</a></li>
<li><a href="blog-two-grid.html">Blog Two Grid</a></li>
<li><a href="blog-three-grid.html">Blog Three Grid</a></li>
<li><a href="blog-four-grid.html">Blog Four Grid</a></li>
<li><a href="blog-four-grid-left-sidebar.html">Blog Four Grid Left Sidebar</a></li>
<li><a href="blog-four-grid-right-sidebar.html">Blog Four Grid Right Sidebar</a></li>
<li><a href="single-blog-with.html">Single Blog</a></li>
<li><a href="single-blog-with-add.html">Single Blog With Add</a></li>
</ul>
</li>
<li><a href="coupon.html" class="main-menu-list">Coupon</a></li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-5 text-right ext-right p0 d-none ">
<div class="account-and-search">
<div class="account-section">
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">
<i class="fa fa-sign-in" aria-hidden="true"></i>
</button>
<div class="modal wd-ph-modal fade bd-example-modal-lg" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="row text-left">
<div class="col-md-12 p0">
<div class="modal-tab-section wd-modal-tabs">
<ul class="nav nav-tabs wd-modal-tab-menu text-center" id="myTab-account" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="login-tab-2" data-toggle="tab" href="#login-2" role="tab" aria-controls="login-2" aria-expanded="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sign-up-tab-2" data-toggle="tab" href="#sign-up-2" role="tab" aria-controls="sign-up-2">Sign up</a>
</li>
</ul>
<div class="tab-content" id="myTabContent-account">
<div class="tab-pane fade show active" id="login-2" role="tabpanel" aria-labelledby="login-tab-2">
<div class="row">
<div class="col-md-6 p0 brand-description-area">
<img src="../img/login-img-1.jpg" class="img-fluid" alt="">
<div class="brand-description">
<div class="brand-logo">
<img src="../img/logo.png" alt="Logo">
</div>
<div class="modal-description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod teoccaecvoluptatem.</p>
</div>
<ul class="list-unstyled">
<li class="media">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
<li class="media my-4">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
<li class="media">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-12 col-lg-6 p0">
<div class="login-section text-center">
<div class="social-media ph-social-media">
<a href="#" class="facebook-bg"><i class="fa fa-facebook" aria-hidden="true"></i> Login</a>
<a href="#" class="twitter-bg"><i class="fa fa-twitter" aria-hidden="true"></i> Login</a>
<a href="#" class="google-bg"><i class="fa fa-google-plus" aria-hidden="true"></i> Login</a>
</div>
<div class="login-form text-left">
<form>
<div class="form-group">
<label for="exampleInputEmail1">User name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="John mist |">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="*** *** ***">
</div>
<button type="submit" class="btn btn-primary wd-login-btn">LOGIN</button>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Save this password
</label>
</div>
<div class="wd-policy">
<p>
By Continuing. I conferm that i have read and userstand the <a href="#">terms of uses</a> and <a href="#">Privacy Policy</a>.
Don’t have an account? <a href="#" class="black-color"><strong><u>Sign up</u></strong></a>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="sign-up-2" role="tabpanel" aria-labelledby="sign-up-tab-2">
<div class="row">
<div class="col-md-12 p0 brand-login-section">
<img src="../img/login-img-2.jpg" class="img-fluid" alt="">
<div class="brand-description">
<div class="brand-logo">
<img src="../img/logo.png" alt="Logo">
</div>
<div class="modal-description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod teoccaecvoluptatem.</p>
</div>
<ul class="list-unstyled">
<li class="media">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
<li class="media my-4">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
<li class="media">
<i class="fa fa-check" aria-hidden="true"></i>
<div class="media-body">
Lorem ipsum dolor sit amet, consecadipisicing
elit, sed do eiusmod teoccaecvoluptatem.
</div>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-12 col-lg-6 p0">
<div class="sign-up-section text-center">
<div class="login-form text-left">
<form>
<div class="form-group">
<label for="exampleInputname-login-in">First name</label>
<input type="text" class="form-control" id="exampleInputname-login-in" placeholder="First Name">
</div>
<div class="form-group">
<label for="exampleInputname-login-in-2">Last name</label>
<input type="text" class="form-control" id="exampleInputname-login-in-2" placeholder="Last Name">
</div>
<div class="form-group">
<label for="exampleInputEmail-login-in">Email</label>
<input type="text" class="form-control" id="exampleInputEmail-login-in" placeholder="Enter you email ...">
</div>
<div class="form-group">
<label for="exampleInputPassword-login-in">Password</label>
<input type="password" class="form-control" id="exampleInputPassword-login-in" placeholder="*** *** ***">
</div>
<button type="submit" class="btn btn-primary wd-login-btn">Sign Up</button>
<div class="wd-policy">
<p>
By Continuing. I conferm that i have read and userstand the <a href="#">terms of uses</a> and <a href="#">Privacy Policy</a>.
Don’t have an account? <a href="#" class="black-color"><strong><u>Sign up</u></strong></a>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- =========================
Breadcrumb Section
============================== -->
<section class="blog-slider-tow-grid wd-slider-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<h1 class="wishlist-slider-title">Shortcode for Blog</h1>
</div>
</div>
</div>
</div>
</section>
<section class="blog-section">
<div class="container">
<div class="row four-grid">
<?php foreach ($page->cur_page_results() as $row) { ?>
<div class="col-sm-6 col-lg-4 col-xl-3">
<div class="blog-box">
<div class="blog-date text-center">
<h2 class="date">25</h2>
<h4 class="monthe">March</h4>
</div>
<div class="blog-img">
<img src="../img/blog-img/blog-img-23.jpg" class="figure-img img-fluid" alt="blog-img">
</div>
<div class="blog-meta">
<div class="d-flex justify-content-start">
<a href="single-blog-with.html">
<div class="blog-like">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
115
</div>
</a>
<a href="single-blog-with.html">
<div class="comment">
<i class="fa fa-commenting" aria-hidden="true"></i>
59
</div>
</a>
<a href="single-blog-with.html">
<div class="blog-share">
<i class="fa fa-share-alt-square" aria-hidden="true"></i>
20
</div>
</a>
</div>
</div>
<div class="blog-content-box">
<a href="single-blog-with.html"><h4 class="blog-title"><?php echo $row['nama']; ?></h4></a>
<p class="blog-content">With precision crafted metal frame design, refined perchoice for your business.</p>
<div class="raed-more">
<a class="btn btn-link" href="single-blog-with.html">
READ MORE <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="row">
<div class="col-md-12">
<div class="float-right">
<?php echo $page->print_paginate($p); ?>
</div>
</div>
</div>
</div>
</section>
<!-- =========================
Main Loding JS Script
============================== -->
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery-ui.js"></script>
<script src="../js/popper.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.counterup.min.js"></script>
<script src="../js/jquery.nav.js"></script>
<!-- <script src="js/jquery.nicescroll.js"></script> -->
<script src="../js/jquery.rateyo.js"></script>
<script src="../js/jquery.scrollUp.min.js"></script>
<script src="../js/jquery.sticky.js"></script>
<script src="../js/mobile.js"></script>
<script src="../js/lightslider.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="../js/circle-progress.min.js"></script>
<script src="../js/waypoints.min.js"></script>
<script src="../js/simplePlayer.js"></script>
<script src="../js/main.js"></script>
</body>
</html>
Raw
usage.php
<?php
include "page_class.php";
$conn = new PDO('mysql:host=localhost;dbname=siakad', 'root', '');
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$query = 'select * from mata_kuliah';
$page = new Paginasi($conn, $query, 10, '/blurb/php/paginasi.php');
$p = (isset($_GET['p']) ? $_GET['p'] : 0);
?>
<!-- other HTML codes -->
<?php
foreach ($page->cur_page_results() as $row) {
echo $row['nama_kolom'];
}
?>
<!-- other HTML codes -->
<?php echo $page->print_paginate($p); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment