jQuery Tweets Posting Like Twitter | Lessoncup Programming Blog

Tuesday, 24 December 2013

jQuery Tweets Posting Like Twitter

Hi, today we are going to work on twitter concept, we all are seen twitter and facebook programming modules and if you compare twitter programming concepts with facebook, we found some good and logical concepts in twitter. when i plan to work on twitter concepts, i took my first task to start with the concept of displaying tweets. before start my programming i opened twitter and start observing how the database architecture was designed  and how the script mechanism is working.


after that i started write script and reached to displaying tweets at right side after clicking on tweet button, but here i hanged for a day.. because if you seen in twitter the old posts is displaying and if you got any new tweet it could be one or many, the notification box will appear and ask you to click to display the new tweets, if you not click the tweet the tweet number increment as par the new tweets. if you click the new tweets append with old tweets.

now i start thinking how to know the new added rows in database i attempt many ways but i didn't find a way after deep thinking at outside, shower at home and finally i got an idea y can't we count present old rows and take the count of all rows from database and using (-) decrement operator i minus the values form old count to new count .. see the bellow code in tweets.php page you get clear idea..

in bellow code when we click on tweet button i write the query to insert the record into database while at same time we need to display the notification box with a message like 1 new tweet, for that i write the query to fetch the records those which is newly added in database, i took the old records count and got form ajax request with $count variable and minus the old rows form new rows .. you got one new value that is your tweet count

tweets.php
<?php
extract($_REQUEST);
include('db.php');

if($tweet){
 
$h_name=htmlentities($tweet);
$tweet_msg = mysql_real_escape_string($h_name);

mysql_query("insert into tweets(tweets) values('$tweet_msg')");

}

$count_tweets=mysql_query("select * from tweets order by twid desc");

$old = mysql_num_rows($count_tweets);

$new = $old-$count;

if($new>1 || $new==0){
 
 echo "You have ".$new." new Tweets";
 
}else{
 
 echo "You have ".$new." new Tweet";
 
}

?>
after successfully get the new tweets count and display in notification box, it's time to show the same counted tweets while clicking on the notification button. now we know the count of new tweets but it is in string format what i did i just take the text and get the numbers from string and stored in $getweets variable, later i just send this variable via ajax request to newtweets.php file, here the requirement is to show only new records so i write the query by using ORDER By DESC and LIMIT $getweets variable

newtweets.php
<?php

extract($_REQUEST);

include 'db.php';

$get_tweets=mysql_query("select * from tweets order by twid desc limit $getweets");

while($full=mysql_fetch_array($get_tweets)){

?>

<li><?php echo $full['tweets']?></li>

<?php }?>


Used Files

  • tweets.js  // java script functions 
  • tweets.css // all styles 
  • db.php // Mysql database connection 
  • tweets.php // to insert and show the new tweets count
  • newtweets.php // to fetch the new tweets
  • tweetscount.php // to display the tweets count at tweet box area
<script type="text/javascript" src="script/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="script/tweets.js"></script>

<link rel="stylesheet" href="styles/tweets.css" type="text/css" />


index.php

<div id="lessoncup">
<div id="wrap">
<div id="message" class="message"></div>

<div id="loader"></div>
</div>
<div id="tweet_box">

<div id="tweet_count">
</div>

<div id="tweet_input">
<textarea name="" cols="" rows="" class="tweets" id="tweets" placeholder="What is your tweet ?"></textarea>
</div>

<input name="" type="button" id="tweet_btn" value="Tweet">

</div>


<div id="tweets_display">
<div id="title">Tweets</div>
<div id="count_click"></div>

<ul id="tweet_list">

<?php

include 'db.php';

$get_tweets=mysql_query("select * from tweets order by twid desc");

while($full=mysql_fetch_array($get_tweets)){

?>

<li><?php echo $full['tweets']?></li>

<?php }?>

</ul>

</div>
</div>

CSS

#lessoncup{width:800px; height:auto; overflow:hidden; padding:10px; margin:0 auto;position:relative; z-index:2; margin-top:50px;background-color:rgba(255,255,255,0.6);}

#bg{background-image:url(../6.jpg);background-size:100% auto; background-attachment:fixed;}

#tweet_box{ width:250px; height:auto; background-color:rgba(255,255,255,0.8);float:left; border-radius:5px; margin-right:10px; padding:5px; }

#tweet_count{ font-size:20px; font-size:bold; color:#333;}

#tweet_input{ margin-top:5px; margin-bottom:5px; height:auto;}

.tweets{resize:none; border-radius:5px; border:solid #CCC 1px; padding:5px; color:#666; outline:none; height:20px; width:236px; font-family:Verdana, Geneva, sans-serif;}

.tweetsbox{height:80px; -webkit-box-shadow: 0 0 5px #F60; box-shadow: 0 0 5px #F60; border-radius:5px; border:solid #F60 1px;}

#tweet_btn{padding:5px; background-color:#000; border-radius:5px; color:#FFF; border:0; font-size:14px; cursor:pointer; outline:none;}

#tweets_display{ width:530px; height:auto; background-color:rgba(255,255,255,0.6);float:left;border-radius:5px;}

#title{ font-size:20px; font-size:bold; color:#333; padding:5px;}

#count_click{ display:none;width:520px; font-family:Tahoma, Geneva, sans-serif; font-size:14px; background-color:rgba(0,0,0,0.1); text-align:center;padding:5px; cursor:pointer;}

#tweet_list{margin:0; padding:0; list-style:none;}

#tweet_list li{padding:5px; border:solid rgba(255,255,255,0.8) 0; margin:0 0 0 0; border-bottom:solid #CCC 1px; border-radius:0; height:50px;
background-color:rgba(255,255,255,0.4); font-size:14px;}

#tweet_list li:hover{ background-color:#FFF; cursor:pointer;}

.message{width:400px; height:20px; padding:5px; color:#999; background-color:#000; border-radius:5px; margin:0 auto;-webkit-box-shadow: 0 1px 5px #666;box-shadow: 0 1px 5px #666; text-align:center; font-size:14px; display:none;}

#wrap{width:400px; height:30px; margin:0 auto; margin-bottom:10px;}

#count{display:none;}

#loader{margin:0 auto; width:100px;}

JAVASCRIPT

in first step i used setInterval function to updated the tweet count every second,  next i write the focus function to tweet box to enlarge the textbox while focus the cursor, next i write the function to change the textbox size to default size while click on outside,

next i write the function to insert the tweet data into database and as well as i need to get the present tweets length by using $('li').length; and send to tweets.php file via ajax request, next i write the function to display new tweets while clicking on #count_click button 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>
  
  $(document).ready(function(){
 
 
 setInterval(function(){
  
  $('#tweet_count').load('tweetscount.php');
  
 },1);

 $('.tweets').focus(function(){
  
  $(this).addClass('tweetsbox');
  
 });
 
 
 $('#layer,#tweets_display').click(function(){
  
  if($('.tweets').val()==""){
   
   $('.tweets').removeClass('tweetsbox');
   
  }

 });
 
 
 $('#tweet_btn').click(function(event){
  
  
  var element=$(this);
  var ID=element.attr('id');
  
  var msg=$('#tweets').val();
  
  var cou=$('li').length;
  
  if(msg==""){
   
   $('#tweets').attr("placeholder", "Hyy.. don't miss to tweet ");
   
  }else{
  
    var postData='tweet='+msg+'&count='+cou;

   $("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">Sending Tweet</span>');

   $.ajax({
    
    type: "POST",
    url: "tweets.php",
    data: postData,
    cache: false,
    success: function(msg){

     $('#tweets').val('');
     $('#loader').hide();
     $('.tweets').removeClass('tweetsbox');
     $('#count_click').fadeIn('slow').html(msg);
     
     $('#message').fadeIn('slow').text("your tweet was posted!").delay(1000).fadeOut('slow');
     
    }
     
    
    });
     
   }

 });
 
 
 
 $('#count_click').click(function(){
  
  var text = $(this).text();
  
  var getNum = text.match(/(\d+)/g);
  
  var postData='getweets='+getNum;

   $("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">Loading Tweets</span>');

   $.ajax({
    
    type: "POST",
    url: "newtweets.php",
    data: postData,
    cache: false,
    success: function(msg){

     $('#loader').hide();
     $('#count_click').fadeOut('slow');
     
     $("ul#tweet_list").prepend(msg);    
     

    }
     
    
    });
  
  
 });
 
 
});// JavaScript Document
  
</script>

DATABASE

--
-- Table structure for table `tweets`
--

CREATE TABLE IF NOT EXISTS `tweets` (
  `twid` int(11) NOT NULL AUTO_INCREMENT,
  `tweets` text NOT NULL,
  PRIMARY KEY (`twid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

--
-- Dumping data for table `tweets`
--

Live Demo   Download Script

5 comments :

  1. Hello.i can't find lessoncup database.How many columns in tweets table.

    ReplyDelete
    Replies
    1. --
      -- Table structure for table `tweets`
      --

      CREATE TABLE IF NOT EXISTS `tweets` (
      `twid` int(11) NOT NULL AUTO_INCREMENT,
      `tweets` text NOT NULL,
      PRIMARY KEY (`twid`)
      ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

      --
      -- Dumping data for table `tweets`
      --
      - See more at: http://www.lessoncup.com/2013/12/jquery-tweets-posting-like-twitter.html#sthash.2gdeJBZw.IB3PDG26.dpuf

      Delete
  2. long time for loading when i click tweet

    ReplyDelete
  3. Nice tuto on tweet!

    But why am I posting and in my other browser, I can't get the notification
    alert that is, "You have 1 new Tweet". that's not good

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons