Facebook Like Profile Edit with Jquery and Php

This post is very special Facebook like profile edit with jquery, ajax and PHP. Why special before I was thinking this is little difficult but I had developed in just 8 minutes using jquery and php. Use this and enrich your web applications.

Database Design
user table contains user_id, username, password and profile.

CREATE TABLE  `users` (
`id` INT NOT NULL primary key AUTO_INCREMENT ,
`user_name` VARCHAR(45) NULL unique,
`password` VARCHAR(45) NULL ,
`message` TEXT,
);

db.php
Database configuration file.

<?php
$mysql_hostname = "localhost";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>

index.php
Contains javascript, HTML and PHP code. Take a look at bold blue color class names.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//Edit link action
$('.edit_link').click(function()
{
$('.text_wrapper').hide();
var data=$('.text_wrapper').html();
$('.edit').show();
$('.editbox').html(data);
$('.editbox').focus();
});

//Mouseup textarea false
$(".editbox").mouseup(function()
{
return false
});

//Textarea content editing
$(".editbox").change(function()
{
$('.edit').hide();
var boxval = $(".editbox").val();
var dataString = 'data='+ boxval;
$.ajax({
type: "POST",
url: "update_profile_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$('.text_wrapper').html(boxval);
$('.text_wrapper').show();
}
});
});

//Textarea without editing.
$(document).mouseup(function()
{
$('.edit').hide();
$('.text_wrapper').show();
});
});
</script>

//body part
<div class="mainbox">
<a href="#" class="edit_link" title="Edit">Edit</a>
// Displaying profile data from the users table
<?php
include("db.php");
$uid = $session_id; 
$sql=mysql_query("select message from users where id='$uid'");
$row=mysql_fetch_array($sql);
$profile=$row['message '];
?>
<div class="text_wrapper"><?php echo $message ; ?></div>
<div class="edit" style="display:none">
<textarea class="editbox" cols="24" rows="4" ></textarea>
</div>
</div>

update_profile_ajax.php
Contains PHP code updating profile field at users table.

<?php
include("db.php");
if($_POST['data'])
{
 $data=$_POST['data'];
 $data = mysql_escape_String($data);
 $uid=$session_id;
 $sql = "update users set message ='$data' where id='$uid'";
 mysql_query( $sql);
}
?>

CSS code

 body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.mainbox
{
width:250px;
margin:50px;
}
.text_wrapper
{
border:solid 1px #0099CC;
padding:5px;
width:187px;
}
.edit_link
{
float:right
}
.editbox
{
overflow: hidden;
height: 61px;
border:solid 1px #0099CC;
width:190px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding:5px
}

Previously, we have seen an example to implement Update/Delete Multiple Rows using PHP