Teknik Paginasi Halaman dengan PHP

Teknik Paginasi Halaman dengan PHP

Tutorial Information

ProgramPHP
Version5.3
DifficultyStandar
Estimated Time15 Menit

Ketika membuat sebuah halaman web, seringkali kita menemui permasalahan yang berhubungan dengan cara menampilkan data dalam jumlah yang banyak. Biasanya data-data tersebut merupakan data…

Ketika membuat sebuah halaman web, seringkali kita menemui permasalahan yang berhubungan dengan cara menampilkan data dalam jumlah yang banyak. Biasanya data-data tersebut merupakan data dinamis (berubah-ubah) yang tersimpan dalam database. Semakin banyak data yang ditampilkan, maka tampilan halaman web akan semakin menjorok ke bawah dan tentu saja menjadi tidak nyaman dipandang.

Alangkah baiknya apabila data-data tersebut ditampilkan dalam beberapa halaman dengan menggunakan paginasi. Paginasi merupakan teknik penampilan data dengan membaginya ke dalam beberapa halaman. Ide dasarnya yaitu dengan menentukan seberapa banyak jumlah item maksimal dalam satu halaman, kemudian berdasarkan jumlah keseluruhan item tersebut nantinya akan diperoleh seberapa banyak halaman tersebut dibuat. Berikut ini akan dipaparkan langkah-langkah untuk membuat paginasi halaman menggunakan script PHP dan database MySQL.

  1. Buatlah sebuah database MySQL (nama database terserah), kemudian create tabel ‘alamat’yang memuat data-data alamat. Sebagai contoh, penulis menggunakan data dummy MySQL sebagai berikut:
    CREATE TABLE IF NOT EXISTS `alamat` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `name` varchar(60) NOT NULL,
      `address` varchar(80) NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=170 ;
    
    INSERT INTO `alamat` (`id`, `name`, `address`) VALUES
    (1, 'Frankie Johnnie & Luigo Too', '939 W El Camino Real, Mountain View, CA'),
    (2, 'Amici''s East Coast Pizzeria', '790 Castro St, Mountain View, CA'),
    (3, 'Kapp''s Pizza Bar & Grill', '191 Castro St, Mountain View, CA'),
    (4, 'Round Table Pizza: Mountain View', '570 N Shoreline Blvd, Mountain View, CA'),
    (5, 'Tony & Alba''s Pizza & Pasta', '619 Escuela Ave, Mountain View, CA'),
    (6, 'Oregano''s Wood-Fired Pizza', '4546 El Camino Real, Los Altos, CA'),
    (7, 'Round Table Pizza: Sunnyvale-Mary-Central Expy', '415 N Mary Ave, Sunnyvale, CA'),
    (8, 'Giordano''s', '730 N Rush St, Chicago, IL'),
    (9, 'Filippi''s Pizza Grotto', '1747 India St, San Diego, CA'),
    (10, 'Lou Malnati''s Pizzeria', '439 N Wells St, Chicago, IL'),
    (11, 'Sammy''s Woodfired Pizza', '770 4th Ave, San Diego, CA'),
    (12, 'Casa Bianca Pizza Pie', '1650 Colorado Blvd, Los Angeles, CA'),
    (13, 'Parkway Grill', '510 S Arroyo Pkwy, Pasadena, CA'),
    (14, 'Pizzeria Paradiso', '2029 P St NW, Washington, DC'),
    (15, 'Star Pizza', '2111 Norfolk St, Houston, TX'),
    (16, 'Tutta Bella Neapolitan Pizzera', '4918 Rainier Ave S, Seattle, WA'),
    (17, 'Touche Pasta Pizza Pool', '1425 NW Glisan St, Portland, OR'),
    (18, 'Piecora''s New York Pizza', '1401 E Madison St, Seattle, WA'),
    (19, 'Pagliacci Pizza', '550 Queen Anne Ave N, Seattle, WA'),
    (20, 'Zeeks Pizza - Phinney Ridge', '6000 Phinney Ave N, Seattle, WA'),
    (21, 'Old Town Pizza', '226 NW Davis St, Portland, OR'),
    (22, 'Zeeks Pizza - Belltown', '419 Denny Way, Seattle, WA'),
    (23, 'Escape From New York Pizza', '622 NW 23rd Ave, Portland, OR'),
    (24, 'Big Fred''s Pizza Garden', '1101 S 119th St, Omaha, NE'),
    (25, 'Old Chicago', '1111 Harney St, Omaha, NE');
  2. Buatlah file konfigurasi untuk koneksi PHP ke database MySQL, misal config.php. Sesuaikan dengan konfigurasi database Anda (username, password, dan nama database).
    <?php
    
         // Koneksi ke Database
         $link = mysql_connect('localhost', 'usernameAnda', 'passwordAnda') or die('Could not connect: ' . mysql_error());
         mysql_select_db('namaDBAnda') or die('Could not select database');
    
    ?>
  3. Buatlah file index.php yang berisi kode berikut. Kode berikut berfungsi untuk menampilkan data-data yang tersimpan dalam tabel ‘alamat’.
    <!DOCTYPE html>
    <head>
    	<title>Paginasi Halaman</title>
    </head>
    <body>
    		<?php
    			// KONEKSI KE DATABASE
    			include "config.php";
    
    			echo "<h3>Daftar Buku Alamat Tanpa Paginasi</h3>";
    
    			// MENGAMBIL DATA				
    			$query = "SELECT * FROM alamat ORDER BY id";
    
    			$result = mysql_query($query) or die('Error');
    
    			$nomor=1;
    
    			while($data = mysql_fetch_array($result))
    				{
    
    					echo $nomor++."<br>";			
    					echo "Nama : ".$data['name']."<br>";
    					echo "Alamat : ".$data['address']."<br><hr>";
    
    				}
    
    		?>
    
    </body>
    </html>
  4. Hasil eksekusi index.phpdi browser adalah sebagai berikut:
    Tanpa Paginasi

    Tampilan Tanpa Paginasi

  5. Jika diperhatikan, kode index.php di atas belum dilengkapi dengan paginasi. Akibatnya, apabila data-data yang diisikan semakin banyak maka tampilan data tersebut akan semakin melebar ke bawah. Script berikut merupakan hasil modifikasi dari scriptindex.phpdi atas, yaitu dengan menambahkan beberapa baris kode untuk mengatur paginasi.
    <!DOCTYPE html>
    <head>
    	<title>Paginasi Halaman</title>
    </head>
    <body>
    		<?php
    			// KONEKSI KE DATABASE
    			include "config.php";
    
    			// JUMLAH DATA YANG DITAMPILKAN PER HALAMAN
    			$dataPerPage = 5;
    
    			// Apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut,
    			// Sedangkan apabila belum, nomor halamannya 1.
    			if(isset($_GET['page']))
    			{
    				$noPage = $_GET['page'];
    			}
    			else $noPage = 1;
    
    			// Perhitungan offset
    			$offset = ($noPage - 1) * $dataPerPage;
    
    			echo "<h3>Daftar Buku Alamat dengan Paginasi</h3>";	
    			echo "<h4>Halaman ".$noPage."</h4>";
    
    			// MENGAMBIL DATA			
    			$query = "SELECT * FROM alamat ORDER BY id DESC LIMIT $offset, $dataPerPage";
    
    			$result = mysql_query($query) or die('Error');
    
    			// Penomoran Item
    			$nomor=1;
    			$nomor1 = 5 * $noPage;
    
    			while($data = mysql_fetch_array($result))
    				{
    
    					if ($noPage <= 1)
    						{
    							echo $nomor++."<br>";
    						}
    					else
    						{			
    							echo $nomor1++."<br>";
    						}
    
    					echo "Nama : ".$data['name']."<br>";
    					echo "Alamat : ".$data['address']."<br><hr>";
    
    				}
    
    			// Mencari jumlah semua data tabel 'alamat', kemudian simpan dalam variabel $jumData
    				$query3   = "SELECT COUNT(*) AS jumData FROM alamat";
    				$hasil3  = mysql_query($query3);
    				$data3    = mysql_fetch_array($hasil3);
    
    				$jumData = $data3['jumData'];
    				echo "<br><center>";
    					if ($jumData > 5)
    						{
    
    							// Menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
    							$jumPage = ceil($jumData/$dataPerPage);
    
    							// Menampilkan link 'Sebelum'		
    							if ($noPage > 1) 
    
    							$query = "SELECT * FROM alamat";
    							$result = mysql_query($query) or die('Error');
    
    							$data = mysql_fetch_array($result);
    
    							echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'><< Sebelum</a>";
    
    							// Menampilkan nomor halaman dan linknya
    							for($page = 1; $page <= $jumPage; $page++)
    							{
    
    								if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage))
    								{
    
    									if (($showPage == 1) && ($page != 2))  echo "<a href='#'>...</a>";
    									if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "<a href='#'>...</a>";
    									if ($page == $noPage) echo " <a href='#'>".$page."</a>";
    									else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
    									$showPage = $page;
    								}
    							}
    
    							// Menampilkan link 'Sesudah'
    							if ($noPage < $jumPage) 
    							echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Sesudah >></a>";
    						}
    
    					else
    						{
    						}
    
    				echo "</center>";				
    		?>				
    </body>
    </html>
  6. Hasil modifikasi script index.phptersebut akan menghasilkan tampilan sebagai berikut:
    Dengan Paginasi

    Tampilan Dengan Paginasi

    Pada tampilan yang ditunjukkan langkah nomor 6 di atas tampak bahwa paginasi berupa hyperlink halaman di bagian bawah. Pada contoh ini, data ditampilkan setiap 5 item, sisanya akan ditampilkan di halaman berikutnya secara berurutan. Untuk mengubah banyaknya item per halaman dapat dilakukan dengan cara mengubah nilai variabel $dataPerPage. Penjelasan lebih detail mengenai baris kode dapat dibaca pada bagian komentar script di atas.

Penutup

Bentuk tampilan paginasi tersebut tentu saja dapat dimodifikasi sedemikian rupa dengan bantuan CSS sehingga tampak lebih menarik. Paginasi dapat digunakan untuk menampilkan paginasi data dalam bentuk tabel atau posting blog, dimana jumlah data/posting tersebut dapat dibatasi seberapa banyak item yang ingin ditampilkan dalam satu halaman (page).

Tag: , , , , ,

9 Comments

Leave Comment
  1. Mustofa says:

    berguna banget mas artikelnya, thx dah share :)

  2. ramoreez says:

    Bagaimana jika teknik paginasi di atas di padukan dengan pencarian?

  3. Hery Setiawan says:

    apa ada info mengenai metode paging tanpa melakukan dua kali query?

  4. sadewa says:

    Master knp di halaman ke 2 nya no urutnya jadi no 10 ???
    mohon gan pencerahannya

  5. bakron says:

    menambah pegetahuannnn…

  6. Tutorualnya engat membantu saya, semoga berkah.

  7. Uta says:

    variabel showPage nya belum di deklarasi gan

Write Comment

Your email will not be published. The marked label is required.