Twitter Tarzı Jquery – CSS More Çubuğu

Twitter’a dadanmışken tam olsun artık. Sayfa altında yer alan more çubuğu nasıl çalışıyor, ne gibi yararları var sorularına cevap arayalım.

Twitter moreTakip listendeki insanların feedleri  çok sık güncellenebileceği için (benim listemde dakikada ortalama 30 twit geliyor)  profil sayfanızın  ilk yüklendiği sırada en son gönderilen 20 twit listeleniyor. Bu şekilde aynı anda binlerce satır verinin yüklenmesi önleniyor ve hem sunucu hem de kullanıcı için rahat bir servis sağlanıyor.

More çubuğu daha fazla verinin istenildiği zaman sayfaya yüklenmesini sağlıyor.

Uygulamayı gerçekleştirebilmek için öncelikle bir veritabanına yani veri topluluğuna ihtiyacımız var.

Elinizde hazır bir veritabanı yoksa aşağıdaki Mysql kodu ile örnek bir veritabanı tablosu açabilirsiniz.


CREATE TABLE messages(
id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);
//messages tablosu açıldı, içine örnek veri girmek için aşağıdaki kodu da çalıştırabilirsiniz.

INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemes21we sadkas jkf klf kfn');
INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'sdsadk2as jkf klsdssdsdf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'dene2mese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemaaes2e sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemesdsse sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'deneme5632ssdsde sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denegffgmese sadkas jkf klf kfn');
INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemese sad546546kas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'densdaseme456546se sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denedasdmese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denaasemese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'dendasd45emese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'deneasdamese sadkas jkf klf kfn');

Yukarıdaki Mysql kodları demo için kullanabileceğiniz ham maddeleri sağlar. Eğer ki local bilgisayarınızda çalışma imkanı bulamadıysanız buradan local PHP ve Mysql server kurulumu hakkında bilgi alabilirsiniz. Ama ben Serpito.com’un çalışan hazır veritabanını kullanacağım.

WordPress veritabanı yapısında wp_posts tablosunda tutulan postları listeleyerek siz küçük bir Ajax Load Bar demosu hazırladım.

Uygulama dosyalarını tek tek buraya yazalım:
(Özellikle yorum satırlarına dikkat ederseniz daha rahat anlaşılır.)

index.php kodları:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
>meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
*{ margin:0px; padding:0px }
ol.timeline
{
list-style:none
}
ol.timeline li
{
position:relative;
border-bottom:1px #dedede dashed;
padding:8px;
}
#panel{
color:#333;
background-color:#C8E6E2;
width:100%;
}
.morebox
{
font-weight:bold;
color:#B0AD28;
text-align:center;
border:solid 1px #CCC;
padding:8px;
font-size:14px;
margin-top:8px;
margin-bottom:8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.morebox a{ color:#333333; text-decoration:none}
.morebox a:hover{ color:#333333; text-decoration:none}
#container{margin-left:60px; width:580px }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="images/wait.gif" />');

$.ajax({
type: "POST",
url: "more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ol#updates").append(html);
$("#more"+ID).remove(); // more cubugu kaldiriliyor
}
});
}
else
{
$(".morebox").html('Baska veri kalmadi');// Listelenecek veri kalmadi
}

return false;
});
});
</script>

</head>

<body>
<div id="panel">
<center><h2>Serpito.com</h2>
Bu demo <a href="http://www.serpito.com/twitter-tarzi-more-bar/">Twitter Tarzı Jquery – CSS More Çubuğu</a> yazısı için hazırlanmıştır.
</center>
</div>
<div id='container'>
<ol id="updates">
<?php
include('mysql.php'); // kisisel olarak kullandigim bu dosyadaki $dba veritabani sinifini daha sonra detaylica aciklayacagim.
$sql=$dba->query("select ID,post_title,post_name from wp_posts where post_status='publish' ORDER BY ID DESC LIMIT 20"); // ilk acilista 10 satir getiriliyor
while($row=$dba->fetch_assoc($sql))
{

$title=$row['post_title'];
$link=$row['post_name'];
$msg_id=$row['ID'];
?>
<li>
<?php echo $title." <a href='http://www.serpito.com/".$link."'>http://www.serpito.com/".$link."</a>"; ?>
</li>
<?php } ?>
</ol>

<div id="more<?php echo $msg_id; ?>">
<a href="#" id="<?php echo $msg_id; ?>">more</a>
</div>

</div>

<?php
$dba->close();
?>
</body>
</html>


more.php kodları:


<?php
include("mysql.php");
if(isSet($_POST&#91;'lastmsg'&#93;))
{
$lastmsg=$_POST&#91;'lastmsg'&#93;;
$lastmsg=mysql_real_escape_string($lastmsg);
$result=mysql_query("select ID,post_title,post_name from wp_posts where ID<'$lastmsg' and post_status='publish' order by ID desc limit 20");
while($row=mysql_fetch_array($result))
{
$title=$row&#91;'post_title'&#93;;
$link=$row&#91;'post_name'&#93;;
$msg_id=$row&#91;'ID'&#93;;
?>
<li>
<?php echo $title." <a href='http://www.serpito.com/".$link."'>http://www.serpito.com/".$link."</a>"; ?>
</li>
<?php
}
?>

<div id="more<?php echo $msg_id; ?>">
<a href="#" id="<?php echo $msg_id; ?>">more</a>
</div>
<?php
}
?>

<?php
$dba->close();
?>


Kodlama olayımız bu kadar.

 

4 thoughts on “Twitter Tarzı Jquery – CSS More Çubuğu

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir