facebook like hashtag system with Php, Mysql & jQuery

Now a days hashtag is the fundamental part of a social networking site. Hashtag was first started by twitter but latter followed by every social network like tumblr, facebook, instagram etc. hashtag let you know how much people are talking about that particular topic in the world. Hashtag look like this #hashtag if you dont know what is hashtag you probably havent used a social network.

Live View & Download

Structure of database

Before starting we have to create a table with name message in our database with 3 field id ,message & hashtag

CREATE TABLE IF NOT EXISTS `message` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `message` text NOT NULL,
  `hashtag` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Database will look something like that

Function to Filter Hashtag

In this function we are matching the hashtag from the text filed and separating them with the help of regular experation. we are using preg_match_all() to match the #hashtags

<?php
//function to filter the hashtag
 function hashtag($msg){
  //filter the hastag
  preg_match_all('/(^|[^a-z0-9_])#([a-z0-9_]+)/i', $msg, $matched_hashtag);
  $hashtag = '';
  //if hashtag found
  if(!empty($matched_hashtag[0])){
   //fetch hastag from the array
   foreach ($matched_hashtag[0] as $matched) {
    //append every hastag to a string
    //remove the # by preg_replace function
    $hashtag .= preg_replace('/[^a-z0-9]+/', '', $matched).',';
    //append and , after every hashtag
   }
  }
  //remove , from the last hashtag
  return rtrim($hashtag, ',');
 }
?>

Function to convert http:// and #hashtag into links

<?php
//function to convert the url & hashtag into link
 function convert_to_links($msg){
  $final_message = preg_replace(array('/(?i)\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:\'".,<>?«»“”‘’]))/', '/(^|[^a-z0-9_])@([a-z0-9_]+)/i', '/(^|[^a-z0-9_])#([a-z0-9_]+)/i'), array('<a href="$1" target="_blank">$1</a>', '$1<a href="">@$2</a>', '$1<a href="index.php?hashtag=$2">#$2</a>'), $msg);
  return $final_message;
 }
?>

Html

html is supe reasy in this we are just having a form with the id postForm a textarea a submit button & a span with id of loader to show loading when submit button is pressed

<h2>Facebook Styled Hashtag</h2>
 <form action="" method="post" id="postForm">
  <textarea id="message" placeholder="Whats on your Mind?"></textarea>
  <input type="submit" value="post">
  <span id="feedback" style="display:none;"><img src="loader.gif" style="height:25px;float:right;"></span>
 </form>

jQuery (javascript)

With jQuery we are just sending the post to the update.php file and prepending the post into the post_contaiiner div

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#postForm').submit(function(){
  var feedback = $('#feedback');
  var message = $('#message');
  //check that the message is empty or not
  if(message.val() != ''){
   feedback.show();
   $.post('update.php', {msg:message.val()}, function(response){
    $('#post_container').prepend(response);
    feedback.hide();
    message.val('');
   });
  }else{
   alert('Please enter a message');
  }
  return false;
 });
});
</script>

connect.php

Before we insert the message into the database we need to connect to the database to cooonect to the database we use mysql_connect() function

<?php
 //connect to the database
 define('host', 'localhost');
 define('username', 'root');
 define('password', '');
 define('db', 'hunklessons');
 $connect = mysql_connect(host,username,password) or die(mysql_error('Could not Connect To database'));
 $database = mysql_select_db(db) or die(mysql_error('Database not found'));
?>

Update.php

in this file we are first getting the hashtag by using Your hashtag function and then inserting the data into the database and then displaying the message and that message is picked by jQuery and display in index.php page

<?php
 require 'connect.php';
 require 'function.php';
 if(isset($_POST['msg']) && !empty($_POST['msg'])){
  $msg = mysql_real_escape_string(strip_tags(trim($_POST['msg'])));
  //get the hastag 
  $hashtags = hashtag($msg);
  //insert into db
  $query = mysql_query("INSERT INTO `message` (`message`,`hashtag`) VALUES ('$msg', '$hashtags')");
  $final_msg = convert_to_links($msg);
  echo '<div id="posts">
  <ul>
  <li><img src="image.jpg"></li>
  <li>'.$final_msg.'</li>
  <ul>
  </div>';
 }
?>

index.php

in this page we are displaying the message if the hashtag is requested then we display only the post related to hashtag and else if it is not requested we display all the post

 
<?php
  //if hashtag is requested
  if(isset($_GET['hashtag']) && !empty($_GET['hashtag'])){
   $hashtag = mysql_real_escape_string(strip_tags(trim($_GET['hashtag'])));
   $query = mysql_query("SELECT * FROM message WHERE hashtag LIKE '%$hashtag%' ORDER BY id DESC");
   $title = "Search Result For <span style='color:red;'>".$hashtag."</span> <a href='index.php'>clear</a>";
  }else{ // if not
   $query = mysql_query("SELECT * FROM message ORDER BY id DESC LIMIT 15");
   $title = "All Updates";
  }
 ?>
 <div id="post_container">
  <?php
  echo $title;
  //display the messages
  if(mysql_num_rows($query) > 0){
   while ($row = mysql_fetch_assoc($query)) {
    $final_msg = convert_to_links($row['message']);
    echo '<div id="posts">
     <ul>
     <li><a target="_blank" href="http://hunklessons.blogspot.in/"><img src="image.jpg"></a></li>
     <li>'.$final_msg.'</li>
     <ul>
     </div>';
   }
  }
  ?>
  <!--post will go here-->
 </div>

Like Us on Facebook / Add Hunk As Friend