Teknik sederhana menampilkan data seperti pada Facebook

Pernah menyimak gambar diatas ??
Atau teman-teman sering meng-klik untuk melihat status teman kamu lebih banyak lagi ??

Dalam dunia coding, namanya Pagination. Namun biasanya tampilan pagination berupa design angka mendatar kesamping seperti pada gambar dibawah ini.

Yang saya ingin coba share pembuatan pagination seperti di Facebook. Baik,,simak ya..:)

Awalnya kita coba setting terlebih dahulu database. Kita buat database baru lalu tablenya

-- phpMyAdmin SQL Dump
-- version 3.2.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Oct 24, 2010 at 05:06 PM
-- Server version: 5.1.41
-- PHP Version: 5.3.1

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `fb_pagin`
--

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

--
-- Table structure for table `fb`
--

CREATE TABLE IF NOT EXISTS `fb` (
  `id_pesan` int(11) NOT NULL AUTO_INCREMENT,
  `pesan` text NOT NULL,
  PRIMARY KEY (`id_pesan`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=41 ;

--
-- Dumping data for table `fb`
--

INSERT INTO `fb` (`id_pesan`, `pesan`) VALUES
(1, 'universitas komputer indonesia'),
(2, 'universitas komputer indonesia'),
(3, 'universitas komputer indonesia'),
(4, 'universitas komputer indonesia'),
(5, 'universitas komputer indonesia'),
(6, 'universitas komputer indonesia'),
(7, 'universitas komputer indonesia'),
(8, 'universitas komputer indonesia'),
(9, 'universitas komputer indonesia'),
(10, 'universitas komputer indonesia'),
(11, 'universitas komputer indonesia'),
(12, 'universitas komputer indonesia'),
(13, 'universitas komputer indonesia'),
(14, 'universitas komputer indonesia'),
(15, 'universitas komputer indonesia'),
(16, 'universitas komputer indonesia'),
(17, 'universitas komputer indonesia'),
(18, 'universitas komputer indonesia'),
(19, 'universitas komputer indonesia'),
(20, 'universitas komputer indonesia'),
(21, 'adiputra'),
(22, 'adiputra'),
(23, 'adiputra'),
(24, 'adiputra'),
(25, 'adiputra'),
(26, 'adiputra'),
(27, 'adiputra'),
(28, 'adiputra'),
(29, 'adiputra'),
(30, 'adiputra'),
(31, 'adiputra'),
(32, 'adiputra'),
(33, 'adiputra'),
(34, 'adiputra'),
(35, 'adiputra'),
(36, 'adiputra'),
(37, 'adiputra'),
(38, 'adiputra'),
(39, 'adiputra'),
(40, 'adiputra');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Itu adalah database yg saya buat. Untuk mempersingkat waktu,,nanti teman bisa download semua codingan beserta databasenya juga..

Setelah membuat databasenya, sekarang kita mulai coding dengan PHP, Jquery dengan ajaxnya…;)

Saya buat settingan ke database terlebih dahulu..

koneksi_db.php

<?php


$host = "localhost";
$username = "root";
$password = "";


$koneksi = mysql_connect($host,$username,$password);

mysql_select_db("fb_pagin");

if (!$koneksi) {
    echo "error".mysql_error();
}

?>

Lalu saya buat tampilan datanya :

facebook.php

<?php
include('koneksi_db.php');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paging Seperti Facebook</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.3.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>

<script type="text/javascript">
$(function() {

	$('.load_data').live("click",function() {

		var id_pesan = $(this).attr("id");
		var jml_setting = $("#setting").attr("class");
		
		if(id_pesan != 9999){
		
			$.ajax({
				type: "POST",
				url: "facebook_ajax.php",
				data: "id_pesan="+ id_pesan +"&jml_setting="+jml_setting,
				beforeSend:  function() {
					$('a.load_data').append('<img src="facebook_style_loader.gif" />');
				},
				success: function(html){
					$(".style_fb").remove();
					$("ol#updates").append(html);
				}
			});
	  
		}

		return false;
	});
	
	var myDialog = $('<div></div>')
    .html("<input type='text' id='jml_setting' />")
    .dialog({
        autoOpen: false,
        title: 'Masukan jumlah setting pagination',
        buttons: {"OK": function() {
					  var jml_setting = $("#jml_setting").val();
					  $("#setting").removeClass();
					  $("#setting").addClass(jml_setting);
					  
					  $(this).dialog("close"); 
					  
                      return false;
                 }, "Cancel": function() {
                      $(this).dialog("close");
                      return false;
                 }
        }
	});
	
	$('#setting').live("click",function(){
		return myDialog.dialog('open');  //replace the div id with the id of the button/form
	});
});

</script>
<style>
	body {
		font-family:Arial, 'Helvetica', sans-serif;
		color:#000;
		font-size:15px;
	}


	a {
		color:#2276BB;
		text-decoration:none;
	}

	* {
		margin:0px;
		padding:0px
	}

	ol.row {
		list-style:none
	}

	ol.row li {
		position:relative;
		border-bottom:1px solid #EEEEEE;
		padding:8px;
	}
	
	ol.row li:hover {
		background-color:#F7F7F7;
	}
	
	ol.row li:first-child {
	
	}

	#container {
		margin-left:60px;
		width:580px
	}

	img {
		border : none ;
	}

	#style_fb  {
		border:1px solid #D8DFEA;
		padding:10px 15px;
		background-color:#EDEFF4;
	}


	#style_fb a {
		color:#3B5998;
		cursor:pointer;
		text-decoration:none;
		font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
		font-size:11px;
		text-align:left;
	}

	#setting {
		float: right;
	}


</style>
</head>
<body>
<div id='container'>
  <ol class="row" id="updates">
    <?php
	$query_select ="select * from fb ORDER BY id_pesan ASC LIMIT 5";
	$hasil_select = mysql_query($query_select);
	while($row = mysql_fetch_array($hasil_select) ):
		$id_pesan=$row['id_pesan'];
		$pesan=$row['pesan'];
	?>
		<li> <?php echo $pesan; ?> </li>
	<?php 
	endwhile; 
	?>
  </ol>

  <div class="style_fb" id="style_fb">
	<a id="<?php echo $id_pesan; ?>" href="#" class="load_data" >Kiriman Terdahulu <img src="arrow1.png" /> </a>
	<a href="#" id="setting" class='5'>Sunting Opsi</a>
  </div>
</div>
</body>
</html>

Kalau teman-teman bisa liat, dicodingan saya menggunakan jquery dan jquery UI untuk tampilan dialog. Silahkan download terlebih dahulu jquery tersebut dan sesuaikan dengan settingan folder kamu.

Lalu sekarang kita coba sinkronkan dengan Ajaxnya :

facebook_ajax.php

<?php
include('koneksi_db.php');

if(isset($_POST['id_pesan']))
{
	$id_pesan = $_POST['id_pesan'];
	$jml_setting = $_POST['jml_setting'];
	
	$query    = "select * from fb where id_pesan > '$id_pesan' order by id_pesan asc limit $jml_setting";
	$result   = mysql_query($query,$koneksi);

	while($row=mysql_fetch_array($result)):
		$id_pesan=$row['id_pesan'];
		$pesan=$row['pesan'];
	?>
		<li> <?php echo $pesan; ?> </li>
	<?php
	endwhile;
	
	if(mysql_num_rows($result)==$jml_setting){
	?>
		<div class="style_fb" id="style_fb">
			<a id="<?php echo $id_pesan; ?>" href="#" class="load_data" >Kiriman Terdahulu <img src="arrow1.png" /></a>
			<a href="#" id="setting" class="<?php echo $jml_setting; ?>">Sunting Opsi</a>
		</div>
	<?php
	}else {
    	echo '  <div  id="style_fb">
					<a  id="9999" href="#" class="load_data" >Sudah abis Mas...</a>
				</div>
			 ';
	}
}
?>

[ Demo ] [ Download ] — *diantos heula nyak,,koneksi goreng pisan :(*

Smoga bisa inspirasi project teman-teman..;)

Iklan

23 thoughts on “Teknik sederhana menampilkan data seperti pada Facebook

  1. Bisa minta tolong sharing dialog dengan jquery? yang didalam dialognya itu ada checkbox?
    Terimakasih sebelumnya..blognya sangat bermanfaat, semoga tambah sukses ke depannya..:D

  2. @ ajun :
    di baris kode nomer 43 mas yg facebook.php..
    tinggal diubah seperti ini aja,

    .html("<input type='checkbox' id='jml_setting' value='1'/>")
    

    jangan lupa valuenya klu ndak salah kan berdasarkan klik-an user,,jadi pake selector checked jquery

    http://api.jquery.com/checked-selector/

    lalu valuenya diambil pada baris kode ke-48

    moga bisa membantu mas,,

    oiya,,makasih doanya…:)
    sukses jg bwt mas,,:D

  3. bagus mas..
    boleh sharing fb_pagin.rar lagi g??
    soalnya yg di ziddu g bs di download..
    makasih banyak mas..

  4. O ya gimana caranya kalau kita masukan Link video ataupun Link web maka otomatis thumbsnya juga nampak, misalnya wallpost pada facebook. terimakasih…

  5. mas,saya menemukan web bisnis…dimana ada calon member mendaftar dan statusnya menjadi member aktif tapi masih dalam area terbatas,dan jika dia upgrade maka member tersebut bisa membuka semua menu yagn ada disana ….yang mau saya sampaikan ,usahakan mas bikin script php yang membahas tentang ini,masalahnya saya udah surf kemana2 tak ketemu2..makasih sebelumnya ya…ditunggu

  6. @heru :
    pertama klasifikasi user dulu,
    ada pengunjung, member, dan member_spesial *ini sebutan sy*.

    untuk menjadi member_spesial harus bagaimana ???
    sy contohkan ya, untuk menjadi member_spesial, baik pengunjung atau member yang telah aktif harus membayar sebesar $$$ dan melakukan konfirmasi ke sistem.
    bila sudah konfirmasi, admin mengecek apakah konfirmasi valid ??
    bila ya,,ubah status member menjadi member_spesial atau pengunjung yg telah membayar langsung menjadi member_spesial.

    mas pakai session saja untuk membedakan antara member biasa dengan member_spesial dalam mengakses menu..
    coding nya seperti nya mudah mas…
    moga ngebantu ya 🙂

  7. T.O.P be ge te…
    mas, boleh minta script dan contohnya ngeprint dokumen di contiunuous form dengan php.
    ditunggu yah berita baiknyah.. :D:D:D
    .

  8. mas itu kan nampilin data ASC (DARI TRLAMA SAMPE TRBARU), gmn klo pengen pake yg DESC. Saya sudah coba anti asc ke desc tp gagal, hasilnya kacau balau. mohon bntuannya master da bgr. ditunggu ya. 🙂

  9. Seharian dari kmaren nyari tau gmn cranya ngurutin data dri asc ke desc limit akhirnya ketemu jg. pdhl komentar2 org di http://youhack.me/2010/05/14/an-alternative-to-pagination-facebook-and-twitter-style g ada yg bisa. DAN trnyata cuman masalah panah doang masalahnya. ok, saya share deh caranya BRG KALI BRMNFAAT.
    klo mau ngurutin data dari ASC ke DESC:
    TINGGAL REPLACE:
    FACEBOOK.PHP BARIS 140
    $query_select =”select * from fb ORDER BY id_pesan ASC LIMIT 5″;
    GANTI mnjadi
    $query_select =”select * from fb ORDER BY id_pesan DESC LIMIT 5″;
    DIBAWAH INI YG PENTING:
    AJAX_FACEBOOK.PHP
    $query = “select * from fb where id_pesan > ‘$id_pesan’ order by id_pesan asc limit $jml_setting”;
    GANTI mnjadi
    $query = “select * from fb where id_pesan MNJADI <.semoga brmanfaat. 🙂

  10. min ini saya pakai di xamp kok gk bsa yah min malah muncul tulisan

    Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in D:\xampp\htdocs\0akhir\koneksi_db.php on line 8

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s