Sunday, January 21, 2018

Create Clickable Comment Link in PHP

This tutorial explain how to create clickable link using HTML Comment Box. You May have been observed different links, while posting comments in various blogs and via. these links (Clickable links) you can easily redirect to another page. If the links displayed as a text, then no one will observe you comments and will not get attention from different blogger.

So, Here we are going to provide you a example how to display clickable hyperlink using HTML comment Box.


Check out our blog archive on the topic if you’re looking to learn about Convert URL To Clickable Link Using PHP.
Lets see the complete source code :

index.php
Below code display the comment box and consists of validation code for comment box.
  • When the comment box is empty and user try to submit the comment then it will display the error message.
  • When any URL provided as input in comment box and user try to submit the comment then it will display clickable link .
<html >
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<script src="jquery.min.js"></script>
</head>
<script>
$(document).ready(function() {
 
  $( "#submitform" ).on( "click", function() {
 
 var message = $('textarea').val(); 
 
 if( message.length == "0" ){
    $(".errorMsg").show();
    
 }
 else{ 
  
  //ajax request 
  dataString="link="+message ;

  $.ajax({
  type: "POST",
  url: "controller.php" ,
  data: dataString,
  cache: false,
  beforeSend: function(){   
   $( "#loading" ).show();
  },
  success: function(html){  
          $( "#display-results" ).prepend( "<div id='message' >"+ html + "</div>"  );
    $( "#loading" ).hide();
    $('textarea').val(""); 
  }
  });  
  
 }   
  }); 
});



</script>

<body>
<center> <b> Create Clickable Comment Link. </b> </center>

<div id="mainbox" >
<textarea  rows="4" cols="65"></textarea>
<div class="errorMsg" >*Please enter the text.</div>
<div id="loading" style="display:none;" >Please Wait...</div>
<input type="button" class="button" id="submitform" value="Submit">
</div>

<div id="display-results"></div>

</body>

</html>

design.css
Consists of style sheet CSS file for comment box.
#mainbox{
width:500px;
padding:5px;
margin:0px auto;
border-radius: 5px;font-family: arial; 
line-height: 16px;color: #333333; font-size: 14px; 
background: #ffffff;rgba(200,200,200,0.7) 0 4px 10px -1px; 
 
}
#display-results{
width:500px;
padding:5px;
margin:10px auto;
border-radius: 5px;font-family: arial; 
line-height: 16px;color: #333333; font-size: 14px; 
background: #ffffff;rgba(200,200,200,0.7) 0 4px 10px -1px;  
}
#message{
border: 1px solid #d6d7da;
padding:4px;
background-color:#e5e5e5;
margin-top:10px; 
}

textarea{ 
padding: 10px;
border: solid 1px #BDC7D8; 
margin-bottom:3px;
}
.button {
background-color: #00BFFF ;
border-color: #3ac162;
font-weight: bold;
padding: 10px 10px;
color: #ffffff;
}
.errorMsg{
 color: #cc0000;
 margin-bottom: 5px;
 display:none;
}

DisplayLink.php
This is a DisplayLink class, which helps to convert URL to hyperlink.
<?php
Class DisplayLink { 

function Convert_link_to_urls($text = '')
{
 $text = preg_replace('#(script|about|applet|activex|chrome):#is', "\\1:", $text);
 $finaltext = ' ' . $text;
 $finaltext = preg_replace("#(^|[\n ])([\w]+?://[\w\#$%&~/.\-;:=,?@\[\]+]*)#is", "\\1<span class='ccc'><a href=\"\\2\" target=\"_blank\"><font style='font-family: Verdana, Geneva, sans-serif;color: blue;font-size:13px; line-height:20px;'>\\2</font></a></span>", $finaltext);
 $finaltext = preg_replace("#(^|[\n ])((www|ftp)\.[\w\#$%&~/.\-;:=,?@\[\]+]*)#is", "\\1<span class='ccc'><a href=\"http://\\2\" target=\"_blank\"><font style='font-family: Verdana, Geneva, sans-serif;color: blue;font-size:13px; line-height:20px;'>\\2</font></a></span>", $finaltext);
 $finaltext = preg_replace("#(^|[\n ])([a-z0-9&\-_.]+?)@([\w\-]+\.([\w\-\.]+\.)*[\w]+)#i", "\\1<span class='ccc'><a href=\"mailto:\\2@\\3\"><font style='font-family: Verdana, Geneva, sans-serif;color: blue;font-size:13px; line-height:20px;'>\\2@\\3</font></a></span>", $finaltext);
 $finaltext = substr($finaltext, 1);
 return $finaltext;
}

}

?>

controller.php
Controller work is to control the flow of execution. Here when user click on Submit button of comment box, then Jquery script sends a ajax request to controller and in response it will display the comment.
<?php
include("DisplayLink.php");

if(isSet($_POST["link"])){
$DisplayLink = new DisplayLink(); 
echo $DisplayLink->Convert_link_to_urls($_POST["link"]) ;
}
?>

This is all about Create Clickable Comment Link in PHP. Let me know yours comments below, in case of any queries.

Download Code:
https://github.com/skptricks/php-Tutorials/tree/master/Create%20Clickable%20Comment%20Link%20in%20PHP

Video Link :
https://youtu.be/9I2mK4UQ_N8

No comments:

Post a Comment