9lessons Programming Blog

Ajax Add a Record with Button Status Change using jQuery.

I like Facebook and Twitter API method of clicking follow, add a friend button. You click the button, the button status changed to 'You following' and 'Remove' at the same time request inserted into database. I had designed this tutorial using Ajax and jQuery.

Analyzing URLs as Links to the resource using a PHP function.

This is PHP function split_url_fuction() writter for twitter like application that i am developing, useful to split URL from the updated sentence(posted message), then URL changing like tinyurl and link to the resource.

This function is break up the URL from the sentence, if the URL string length greater than 30 words it's change like TinyURL.

Live Demo

Step 1. You have to include the file split_url_function.php into the PHP file that will use the function.

include("split_url_function.php");

Now you have to pass the updated data:

<?php echo split_url_function($message); ?>

Here $message is the value from a SQL query.( Table structure )

This is the code of split_url_funtion() PHP function:

<?php
include("tiny_url.php"); //tinyurl function
function split_url_function($update)
{
    //----URL Checking in Update.
    $http= substr_count($update,"http://");
    $www=substr_count($update,"www.");
    $htp=substr_count($update,"http//");

    if($http==1)
   {
         $str="http://";
         $h=1;
    }
if($www==1)
   {
      $str="www.";
      $w=1;
    }
if($h==1 && $w==1)
    {
       $str='http://www.'; //--Both
    }
if($htp==1)
    {
          $comb_str=$update; //--No url
     }
//--- explode the update
$fa=explode($str,$update);
$cnt_fa=count($fa);
$se=explode(" ",$fa[1]);
$cnt_se=count($se);

for($i=1;$i<=$cnt_se;$i++)
{
     $sep.=$se[$i].' ';
}
   // Split URL
      $split_url=$str.$se[0];
      if($split_url=='')
     {
         $final_update=$update;
      }
      else
    {
         // URL link sting lenght verfication
         if(strlen($split_url)>=30)
        {
             $tiny = tiny_url($split_url);
$final_update=$fa[0].'<a href="'.$tiny.'" target="_blank">'.$tiny.'</a>'.$sep;
echo $final_update;
         }
         else
        {
          // Combine all the explode parts
$final_update=$fa[0].'<a href="'.$split_url.'" target="_blank">'.$split_url.'</a>'.$sep;
echo $final_update;
         }
     }
}
?>

tiny_url.php Original reference http://davidwalsh.name/create-tiny-url-php

<?php
function tiny_url($url)
{
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_URL,'http://tinyurl.com/api-create.php?url='.$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
?>

Download Source Code

Live Demo

If you feel free post a comment.

Related post:
Delete a Record with animation fade-out effect using jQuery and Ajax.
Add Security to your PHP projects using .htaccess file
Twitter Like Parsing URLs with JavaScript.

Twitter Like Parsing URLs with JavaScript.

This tutorial explains about how to Parsing URLs within the posted text like Twitter with Javascript. My last post I had included this Script. I was developing project I found this nice javascript prototype property script in mozilla labs site.

If you want to suggest any other alternate scripts, feel free post a comment.

Download Source Code

Live Demo

JavaScript
Method String.prototype property invoked parseURL. When called on a String the regular expression finds any case of a URL and will enclose the URL with a HTML anchor tag.

<head>
String.prototype.parseURL = function()
{
return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(url) {
return url.link(url);
});
};
</head>

index.php
Here we applying the parseURL() method to text variable called posted update contains a URL. But in database the update does not contain any anchor HTML tag.

<body>
<form action="" method="post">
<span class="what">What are you doing?</span>
<textarea ="" cols="55" id="update" maxlength="145" name="update" rows="3"></textarea>
<input type="submit" value=" Update " class="update_button" />
</form>

<?php
include("dbconfig.php");
$sql="select * from updates order by ms_id desc";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$message=stripslashes($row["message"]);
?>
<tr>
<td>

//---------------------------------------------------------------

//---------------------------------------------------------------

</td>
<td>
<a href="#" id="<?php echo $row["ms_id"]; ?>" class="delbutton"><img src="trash.png" alt="delete"/></a> </td></tr>
<?php
}
?>

</body>

Download Source Code

Live Demo

If you want to suggest any other alternate scripts, feel free post a comment.

Related Posts :
Delete a Record with animation fade-out effect using jQuery and Ajax.

Delete a Record with animation fade-out effect using jQuery and Ajax.

Are you like Twitter and Yammer API? This post about how to delete a record with animation fade-out effect using Ajax and jQuery. I like Twitter API very much, it's clean and faster. So i prepared this jQuery tutorial delete action with out refreshing page.

Part II: Delete Records with Random Animation Effect using jQuery and Ajax.

This is a simple tutorial just change some lines of database code! I was developing some what Twitter like API. Today I published small part that explains how to Delete a Record with animation fade-out effect using jQuery and Ajax.

The tutorial contains a folder called posting with three PHP files and one sub folder js includes jQuery plugin.

- index.php
- dbconfig.php(Database configuration )
- delete.php
js-jquery.js

Download Source Code

Live Demo

Database Table Code

CREATE TABLE updates(
ms_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);

Step 1. index.php(user interface page)
Here Displaying records form database using while loop. Delete button included in <a> anchor tag attribute id=<?php echo $row['ms_id']; ?>. This we are passing to delete.php page.

<?php

include("dbconfig.php");
$sql="select * from updates order by ms_id desc";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$message=stripslashes($row["message"]);
?>
<tr><td><?php echo $message; ?></td><td><a href="#" id="<?php echo $row["ms_id"]; ?>" class="delbutton"><img src="trash.png" alt="delete"/></a> </td></tr>
<?php
}
?>

</body>

Step 2. delete.php
Simple php script delete data from Updates table.

<?php
include("dbconfig.php");
if($_POST['id'])

{

$id=$_POST['id'];

$sql = "delete from {$prefix}updates where ms_id='$id'";
mysql_query( $sql);
}
?>

Step 3 Ajax and jQuery Code
Included jQuery plugin in head tag and ajax code included in this jquery function $(".delbutton").click(function(){}- delbutton is the class name of anchor tag. Using element.attr("id") calling delete button value.

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

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

$(".delbutton").click(function(){
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>

</head>

Step 4.dbconfig.php
You have to change the database configuration like database name, username and password.

Download Source Code

jQuery Username Availability check.

This post about Twitter used jQuery plug-in JavaScript code in registration page username Availability check and update Screen name.

This is very useful stuff, this is the best way to implement it and the only thing you have to modify just some database connection parameters.

jQuery Plug-in :Download

Step1: Modifiy dbconnection.php

Change MySQL connection parameters in dbconnection.php

<?php

$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

Step2: cofigure check.php

Change table name and column name in SQL query.

<?php

// This is a code to check the username from a mysql database table

if(isSet($_POST['username']))
{
$username = $_POST['username'];

include("dbconnection.php");

$sql_check = mysql_query("SELECT user FROM {$prefix}users WHERE user='$username'");

if(mysql_num_rows($sql_check))
{
echo '<span style="color: red;">The username <b>'.$username.'</b> is already in use.</span>';
}
else
{
echo 'OK';
}}

Step 3. Add JQuery framework on your page

jQuery Plug-in :Download

First, you have to download the jQuery plugin and add a link to the framework within the tag <head> of the page:

Step 4. Registration.php Code

HTML code for this example is very simple:

Download source code

Update Screen Name

settings.js : enables jQuery functionalities
javascript code enables the jQuery functionalities.

var twitter=function()
{
var rtn={updateUrl:function(value){$("#username_url").html(value)},
screenNameKeyUp:function(){
jQuery("#user_screen_name").keyup(function(event){var screen_name=jQuery("#user_screen_name");

}

)
},return rtn}();

Copy jquery.js and settings.js in js folder

Registration.php Final code

<html>
<head>
<script src="js/jquery.js" type="text/javascript">/script>
<script src="js/settings.js" type="text/javascript"></script>

<script type="text/javascript">
pic1 = new Image(16, 16);
pic1.src = "loader.gif";

$(document).ready(function(){

$("#username").change(function() {

var usr = $("#username").val();

if(usr.length >= 3)
{
$("#status").html('<img align="absmiddle" src="loader.gif" /> Checking availability...');

$.ajax({
type: "POST",
url: "check.php",
data: "username="+ usr,
success: function(msg){

$("#status").ajaxComplete(function(event, request, settings){

if(msg == 'OK')
{
$("#username").removeClass('object_error'); // if necessary
$("#username").addClass("object_ok");
$(this).html(' <img align="absmiddle" src="accepted.png" /> ');
}
else
{
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
$(this).html(msg);
}});}});}
else
{
$("#status").html('The username should have at least 3 characters.');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
}});});

//-->

</script>
</head>
<body>
<div>

<label>User name:</label>
<input type="text" id="username" name="username" onkeyup="Twitter.updateUrl(this.value)" class="inn"/>

http://xyz.com/<span id="username_url" class="url">USERNAME</span>

</div>
<div id="status"></div>
<script type="text/javascript">
$( function () {
twitter.screenNameKeyUp();
$('#user_screen_name').focus();
});

</script>

</body>
</html>

Download source code
Visual Database Desing with MySQL Workbench