PHP

PHP Pagination MySQL Contoh Database Contoh Script dengan Sebelumnya Berikutnya seperti Google

Posted on by administrator
30
May
0
(0)

oleh Vincy. Terakhir diubah pada 26 April 2020.

Apakah Anda ingin mengimplementasikan pagination PHP menggunakan inti PHP dengan skrip yang ringan? Langsung masuk, tutorial ini adalah tentang itu.

Fungsionalitas pagination adalah untuk menumpuk daftar item di banyak halaman. Ini membantu untuk mengambil dan menampilkan volume rekaman yang besar dengan cara yang efektif.

Jika Anda ingin mengimplementasikan pagination PHP sederhana, maka itu sangat mudah dan tidak berbelit-belit.

PHP pagination Contoh MySQL Output

Hanya ada satu hal yang harus Anda ingat saat Anda mengerjakan pagination. Jangan menarik rangkaian hasil lengkap dan memfilternya untuk ditampilkan kepada pengguna.

PILIH hanya catatan menggunakan LIMIT dari database. Ini dapat dilakukan melalui AJAX atau pada halaman kirim tergantung pada kasus penggunaan Anda. Kami akan melihat lebih banyak tentang itu pada contoh di bawah ini.

Ada beberapa skenario untuk membuat pagination dengan AJAX. Misalnya, kuis online dengan papan pertanyaan bernomor.

Apa isinya?

  1. Tentang contoh ini
  2. Plugin untuk mengaktifkan fitur pagination
  3. Struktur file
  4. Skrip database
  5. Desain halaman arahan dengan kontrol pagination
  6. Kode php untuk mendapatkan hasil paginasi
  7. Output pagination PHP AJAX

Tentang contoh ini

Dalam kode contoh ini, ia memiliki dua jenis kontrol untuk dinavigasi dengan hasil paginasi.

Salah satunya adalah link pagination untuk mengarahkan kita ke halaman yang sesuai. Yang lainnya adalah masukan untuk memasukkan nomor halaman. Dengan mengirimkan nomor halaman ini kita dapat melompat ke halaman target dari halaman saat ini.

Saya telah menerapkan pagination PHP dengan penyegaran halaman sederhana. Kami telah melihat contoh untuk mencapai ini dengan AJAX menggunakan jQuery.

Saya telah mengaktifkan penomoran halaman untuk daftar hasil database yang menampilkan nama Hewan. Jumlah tautan pagination bervariasi berdasarkan jumlah catatan database hewan.

Kueri SELECT dengan spesifikasi batas awal dan akhir mengambil hasil halaman. Jumlah hasil per halaman dapat dikonfigurasi sebagai konstanta kelas Config.

Ada banyak plugin yang tersedia untuk membuat pagination dengan mudah. Pagination.js dan jqPaginator adalah contoh plugin pihak ketiga yang tersedia di pasar.

The Datatables adalah salah satu pustaka populer yang digunakan untuk mengelola data tabel. Ini memiliki pencarian built-in, pagination, sort, dan lebih banyak fitur. Di artikel lama, kita telah melihat bagaimana mengintegrasikan Data-data daftar ke daftar catatan dengan penomoran halaman.

Setelah mengatakan semua ini, lebih baik menggunakan kode khusus. Karena plugin eksternal, perpustakaan akan memperlambat aplikasi.

Struktur file

Kode contoh yang berfungsi berisi file-file berikut dalam urutan hierarki di bawah ini.

Struktur File Paginasi AJAZ

Itu index.php file adalah halaman arahan. Ini berisi HTML untuk menampilkan link pagination dan hasil halaman saat ini.

Dua CSS digunakan dalam contoh ini. Itu phppot-style.css memiliki gaya tata letak umum. Itu pagination.css memiliki gaya eksklusif yang dibuat untuk contoh ini.

Model / Pagination.php termasuk fungsi untuk mengambil data MySQL. Ini menerima parameter untuk mengatur batas untuk kueri SELECT.

Struktur file menyertakan skrip SQL untuk menyiapkan database untuk menjalankan contoh ini.

Skrip database

--
-- Database: `pagination`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_animal`
--

CREATE TABLE `tbl_animal` (
  `id` int(11) UNSIGNED NOT NULL,
  `common_name` varchar(255) NOT NULL DEFAULT '',
  `scientific_name` varchar(255) NOT NULL DEFAULT ''
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `tbl_animal`
--

INSERT INTO `tbl_animal` (`id`, `common_name`, `scientific_name`) VALUES
(1, 'Bison', 'Bos gaurusrn'),
(2, 'Black buck', 'Antelope cervicapra'),
(3, 'Chinkara', 'Gazella bennettii'),
(4, 'Nilgai', 'Boselaphus tragocamelus'),
(5, 'Wolf', 'Canis lupus'),
(6, 'Lion', 'Panthera leo'),
(7, 'Elephant', 'Elephas maximus'),
(8, 'Wild Ass', 'Equus africanus asinus'),
(9, 'Panther', 'Panthera pardus'),
(10, 'Kashmir stag', 'Cervus canadensis hanglu'),
(11, 'Peacock', 'Pavo cristatus'),
(12, 'Siberian crane', 'Grus leucogeranus'),
(13, 'Fox', 'Vulpes vulpes'),
(14, 'Rhinoceros', 'Rhinoceros unicornis'),
(15, 'Tiger', 'Panthera Tigris'),
(16, 'Crocodile', 'Crocodylus palustris'),
(17, 'Gavial or Gharial', 'Gavialis gangeticus'),
(18, 'Horse', 'Equus caballus'),
(19, 'Zebra', 'Equus quagga'),
(20, 'Buffalow', 'Babalus bubalis'),
(21, 'Wild boar', 'Sus scrofa'),
(22, 'Arabian camel', 'Camelus dromedaries'),
(23, 'Giraffe', 'GiraffaÊcamelopardalis'),
(24, 'House wall Lizard', 'Hemidactylus flaviviridis'),
(25, 'Hippopotamus', 'Hippopotamus amphibius'),
(26, 'Rhesus monkey', 'Macaca mulatta'),
(27, 'Dog', 'Canis lupus familiaris'),
(28, 'Cat', 'Felis domesticus'),
(29, 'Cheetah', 'Acinonyx jubatus'),
(30, 'Black rat', 'Rattus rattus'),
(31, 'House mouse', 'Mus musculus'),
(32, 'Rabbit', 'Oryctolagus cuniculus'),
(33, 'Great horned owl', 'Bubo virginianus'),
(34, 'House sparrow', 'Passer domesticus'),
(35, 'House crow', 'Corvus splendens'),
(36, 'Common myna', 'Acridotheres tristis'),
(37, 'Indian parrot', 'Psittacula eupatria'),
(38, 'Bulbul', 'Molpastes cafer'),
(39, 'Koel', 'Eudynamis scolopaccus'),
(40, 'Pigeon', 'Columba livia'),
(41, 'Indian Cobra', 'Naja naja'),
(42, 'King cobra', 'Ophiophagus hannah'),
(43, 'Sea snake', 'Hydrophiinae'),
(44, 'Indian python', 'Python molurus'),
(45, 'Rat snake', 'Rat snake');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_animal`
--
ALTER TABLE `tbl_animal`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_animal`
--
ALTER TABLE `tbl_animal`
  MODIFY `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=46;

Mendesain halaman arahan dengan kontrol pagination

Halaman arahan menunjukkan hasil database dengan opsi penomoran halaman. HTML berikut memiliki skrip PHP yang disematkan untuk menampilkan hasil paginasi.

Ini berisi baris tabel yang dibuat dalam satu lingkaran saat mengulang larik data. Di bawah tabel ini, ini menunjukkan tautan pagination dengan navigasi sebelumnya berikutnya. Navigasi ini memungkinkan berpindah-pindah dari halaman saat ini.

Contoh ini juga berisi formulir HMTL untuk memasukkan nomor halaman target. Jika Anda memasukkan angka dalam jumlah halaman, maka itu akan mendapatkan hasil halaman yang sesuai.

<!doctype html>
<html lang="en">
<head>
<title>PHP Pagination MySQL Database Example Script with Previous Next like Google</title>
<link rel="stylesheet" type="text/css" href="https://phppot.com/php/how-to-add-pagination-in-php-with-mysql/assets/css/pagination.css">
<link rel="stylesheet" type="text/css"
    href="assets/css/phppot-style.css">
<script src="vendor/jquery/jquery-3.3.1.js"></script>
</head>
<body>
	<div class="phppot-container">
		<div class="phppot-form">
			<h1>Animal Names</h1>
			<table>
				<tr>
					<th>Id</th>
					<th>Common Name</th>
					<th>Scientific Name</th>
				</tr>
  <?php
if (! empty($pageResult)) {
    foreach ($pageResult as $page) {
        ?>
          <tr>
					<td><?php echo $page['id'];?></td>
					<td><?php echo $page['common_name'];?></td>
					<td><?php echo $page['scientific_name'];?></td>
				</tr>  
 <?php }} ?> 
  </table>

			<div class="pagination"> 			
 <?php
 if (($page > 1) && ($pn > 1)) {
    ?>
    <a class="previous-page" id="prev-page"
					href="<?php echo $queryString;?>page=<?php echo (($pn-1));?>"
					title="Previous Page"><span>❮ Previous</span></a>
            <?php }?>
<?php
if (($pn - 1) > 1) {
    ?>
    <a href="index.php?page=1"><div class="page-a-link"> 1 </div></a>
    <div class="page-before-after">...</div>
<?php 
}

for ($i = ($pn - 1); $i <= ($pn + 1); $i ++) {
    if ($i < 1)
        continue;
    if ($i > $totalPages)
        break;
    if ($i == $pn) {
        $class = "active";
    } else {
        $class = "page-a-link";
    }
    ?>
    <a href="index.php?page=<?php echo $i; ?>">  <div class="<?php echo $class; ?>"><?php echo $i; ?></div> </a>
    <?php 
}

if (($totalPages - ($pn + 1)) >= 1) {
    ?>
    <div class="page-before-after">...</div>
<?php 
}
if (($totalPages - ($pn + 1)) > 0) {
    if ($pn == $totalPages) {
        $class = "active";
    } else {
        $class = "page-a-link";
    }
    ?>
    <a href="index.php?page=<?php echo $totalPages; ?>"><div class="<?php echo $class; ?>"><?php echo $totalPages; ?></div></a> 
    <?php 
}
?>
    <?php
    if (($page > 1) && ($pn < $totalPages)) {
        ?>
				<a class="next" id="next-page"
					href="<?php echo $queryString;?>page=<?php echo (($pn+1));?>"
					title="Next Page"><span>Next ❯</span></a> 
        <?php
    }
    ?>
    </div>
			<div class="goto-page">
				<form action="" method="GET" onsubmit="return pageValidation()">
					<input type="submit" class="goto-button" value="Go to">
                    <input type="text" class="enter-page-no" name="page" min="1"
						id="page-no">
<input type="hidden" id="total-page" value="<?php echo $totalPages;?>">
				</form>
			</div>
		</div>
	</div>
</body>
</html>

PageValidation () adalah metode JavaScript untuk mengonfirmasi nomor halaman yang dimasukkan. Jika input nomor halaman berisi data yang tidak valid, maka skrip ini akan mengembalikan false. Kemudian menghentikan pengiriman formulir dan dengan demikian mencegah tindakan lompat halaman.

<script>
function pageValidation()
{
	var valid=true;
	var pageNo = $('#page-no').val();
	var totalPage = $('#total-page').val();
	if(pageNo == ""|| pageNo < 1 || !pageNo.match(/d+/) || pageNo > parseInt(totalPage)){
		$("#page-no").css("border-color","#ee0000").show();
		valid=false;
	}
	return valid;
}
</script>

Gaya berikut berasal dari pagination.css. Ini mendefinisikan CSS untuk tampilan tabel dan elemen penomoran halaman.

.pagination {
	display: inline-flex;
}

.pagination a {
	color: #505050;
	text-decoration: none;
}

.page-a-link {
	font-family: arial, verdana;
    font-size: 12px;
    border: 1px #afafaf solid;
    background-color: #fbfbfb;
    padding: 6px 12px 6px 12px;
    margin: 6px;
    text-decoration: none;
    border-radius: 3px;
}

.active {
	font-family: arial, verdana;
    font-size: 12px;
    padding: 8px 14px 6px 14px;
    margin: 3px;
    background-color: #404040;
    text-decoration: none;
    border-radius: 3px;
    margin: 6px;
    color: #FFF;
}

a.previous-page {
	margin: 10px 10px 10px 0px;
}

a.prev-next:hover {
	color: #03a9f4;
}

a.next {
	margin: 10px 0px 10px 10px;
}

input.enter-page-no {
	width: 42px !important;
	height: 28px !important;
	font-size: 12px;
	padding: 6px 12px 6px 12px !important;
	margin: 6px;
	border-radius: 3px !important;
	text-align: center !important;
}

input.goto-button {
	max-width: 80px;
	font-size: 12px;
	padding: 6px 12px 6px 12px !important;
	border: 1px solid #9a9a9a;
	border-radius: 3px !important;
	text-align: center !important;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dfdd99), color-stop(100%, #bcbd2b));
    background: -webkit-linear-gradient(top, #dfdc99, #b8bd2b);
    border: 1px solid #97a031;
    box-shadow: inset 0px 1px 0px rgb(255, 255, 211), 0px 1px 4px rgba(199, 199, 199, 0.9);
}

.goto-page {
	float: right;
}

.page-before-after {
	font-weight: bold;
	padding-top: 12px;
	text-decoration: none;
}

Kode php untuk mendapatkan hasil paginasi

Script PHP ini untuk membaca hasil database dan mendapatkan catatan jumlah halaman. Jumlah halaman bervariasi berdasarkan jumlah catatan dan konfigurasi LIMIT_PER_PAGE.

Jika ada lebih banyak halaman, contoh ini hanya akan menampilkan halaman terbatas seperti Google pagination. Fitur ini akan membantu membuat blok pagination agar sesuai dengan viewport.

Pada navigasi halaman berturut-turut, Anda akan mendapatkan lebih banyak link penomoran halaman untuk menjelajah lebih jauh.

<?php
namespace Phppot;

require_once __DIR__ . '/Model/Pagination.php';

$paginationModel = new Pagination();
$pageResult = $paginationModel->getPage();
$queryString = "?";
if (isset($_GET["page"])) {
    $pn = $_GET["page"];
} else {
    $pn = 1;
}
$limit = Config::LIMIT_PER_PAGE;

$totalRecords = $paginationModel->getAllRecords();
$totalPages = ceil($totalRecords / $limit);

?>

Kelas PHP, perpustakaan, konfigurasi yang digunakan dalam contoh ini

Ini adalah pustaka Sumber Data umum yang digunakan di sebagian besar contoh. Di sini, saya telah menunjukkan fungsi-fungsi yang hanya digunakan dalam contoh ini.

Anda bisa mendapatkan kode lengkap dengan mendownload sumber yang ditambahkan ke artikel ini.

Datasource.php

<?php
/**
 * Copyright (C) 2019 Phppot
 *
 * Distributed under MIT license with an exception that,
 * you don’t have to include the full MIT License in your code.
 * In essense, you can use it on commercial software, modify and distribute free.
 * Though not mandatory, you are requested to attribute this URL in your code or website.
 */
namespace Phppot;

/**
 * Generic datasource class for handling DB operations.
 * Uses MySqli and PreparedStatements.
 *
 * @version 2.5 - recordCount function added
 */
class DataSource
{

    // PHP 7.1.0 visibility modifiers are allowed for class constants.
    // when using above 7.1.0, declare the below constants as private
    const HOST = 'localhost';

    const USERNAME = 'root';

    const PASSWORD = 'test';

    const DATABASENAME = 'pagination';

    private $conn;

    /**
     * PHP implicitly takes care of cleanup for default connection types.
     * So no need to worry about closing the connection.
     *
     * Singletons not required in PHP as there is no
     * concept of shared memory.
     * Every object lives only for a request.
     *
     * Keeping things simple and that works!
     */
    function __construct()
    {
        $this->conn = $this->getConnection();
    }

    /**
     * If connection object is needed use this method and get access to it.
     * Otherwise, use the below methods for insert / update / etc.
     *
     * @return mysqli
     */
    public function getConnection()
    {
        $conn = new mysqli(self::HOST, self::USERNAME, self::PASSWORD, self::DATABASENAME);

        if (mysqli_connect_errno()) {
            trigger_error("Problem with connecting to database.");
        }

        $conn->set_charset("utf8");
        return $conn;
    }

    /**
     * To get database results
     *
     * @param string $query
     * @param string $paramType
     * @param array $paramArray
     * @return array
     */
    public function select($query, $paramType = "", $paramArray = array())
    {
        $stmt = $this->conn->prepare($query);

        if (! empty($paramType) && ! empty($paramArray)) {
            $this->bindQueryParams($stmt, $paramType, $paramArray);
        }

        $stmt->execute();
        $result = $stmt->get_result();

        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                $resultset[] = $row;
            }
        }

        if (! empty($resultset)) {
            return $resultset;
        }
    }

    /**
     * To insert
     *
     * @param string $query
     * @param string $paramType
     * @param array $paramArray
     * @return int
     */
    public function insert($query, $paramType, $paramArray)
    {
        //...
    }

    /**
     * To execute query
     *
     * @param string $query
     * @param string $paramType
     * @param array $paramArray
     */
    public function execute($query, $paramType = "", $paramArray = array())
    {
        //...
    }

    /**
     * 1.
     * Prepares parameter binding
     * 2. Bind prameters to the sql statement
     *
     * @param string $stmt
     * @param string $paramType
     * @param array $paramArray
     */
    public function bindQueryParams($stmt, $paramType, $paramArray = array())
    {
        $paramValueReference[] = & $paramType;
        for ($i = 0; $i < count($paramArray); $i ++) {
            $paramValueReference[] = & $paramArray[$i];
        }
        call_user_func_array(array(
            $stmt,
            'bind_param'
        ), $paramValueReference);
    }

    /**
     * To get database results
     *
     * @param string $query
     * @param string $paramType
     * @param array $paramArray
     * @return array
     */
    public function getRecordCount($query, $paramType = "", $paramArray = array())
    {
        $stmt = $this->conn->prepare($query);

        if (! empty($paramType) && ! empty($paramArray)) {
            $this->bindQueryParams($stmt, $paramType, $paramArray);
        }
        $stmt->execute();
        $stmt->store_result();
        $recordCount = $stmt->num_rows;

        return $recordCount;
    }
}

Config.php

Ini adalah file konfigurasi yang ditambahkan untuk contoh ini. Saya mempertahankan batas catatan per halaman sebagai konstanta aplikasi. Saya menggunakan ini untuk menyetel batas kueri SELECT.

Anda dapat menambahkan lebih banyak konstanta dan menyempurnakan skrip pagination PHP agar berfungsi berdasarkan konstanta tersebut. Misalnya, buat SHOW_ALL_LINKS konstanta baru. Nyalakan / matikan untuk mengaktifkan / menonaktifkan fitur mirip Google untuk menampilkan tautan terbatas. 

<?php
namespace Phppot;

class Config
{

    const LIMIT_PER_PAGE = '5';
}

Tangkapan layar ini menunjukkan keluaran dari kode contoh pagination PHP. Ini menunjukkan lima catatan per halaman.

Di sebelah kiri, ini menunjukkan paginasi biasa dengan tautan halaman sebelumnya berikutnya dan terpisah. Di sisi kanan, ini adalah formulir HMTL untuk memungkinkan pengguna memasukkan nomor halaman.

Lihat, cara membuat paginasi gulir tak terbatas tautan Facebook untuk mengetahui tentang pengguliran paginasi berbasis.

Kesimpulan

Kami telah membahas pustaka pihak ketiga yang berisi fitur pagination built-in. Akan sangat membantu jika memiliki pilihan jika mencari plugin semacam itu.

Dalam contoh pagination PHP kustom ini, kami telah menyediakan opsi untuk melompat ke halaman target secara langsung melalui formulir. Terkadang, itu sendiri sudah cukup dengan navigasi berikutnya sebelumnya.

Semoga artikel dan contoh ini membantu Anda membangun pagination PHP sederhana yang bagus untuk aplikasi web Anda.

Unduh

↑ Kembali ke Atas


Source link

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

administrator