Facebook Like Profile Able To Edit With Jquery

In this post, I wanna try to help you to make extraordinary your web template design facebook like profile developing can be edit with Jquery.

For the first time, you probably feel doubt about it. But you can make this with 5 to 10 minutes by following bellow scripts which I provided. 


Try this to giving extra look your web design project. This project highlights your facebook profile on the project. Wish you want to use my facebook page or view Facebook profiles on the template you should try this script.

Read Also:
1. How To Make Login PHP Form With PHP Login Script And Jquery
2. Make Facebook Style Notification Popup Using CSS and Jquery Codes
3. How To Make Live Character Count Meter with Jquery
4. Games With HTML Codes: Make A Snake Game With Notepad
Facebook Like Profile Edit With Jquery

Facebook Like Profile With Jquery

So, let's see the facebook script for create facebook like a profile on web-based software.

Database Design:

In this part, you should place user table contains user_id, username, password and profile:
CREATE TABLE  `users` (
`user_id` INT NOT NULL primary key AUTO_INCREMENT ,
`username` VARCHAR(45) NULL unique,
`password` VARCHAR(45) NULL ,
`profile` TEXT,
);

PHP


updateprofile.php

Contains javascript, PHP code, and HTML code:
<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");
$user_id=$session_id;  
$sql=mysql_query("select profile from users where user_id='$user_id'");
$row=mysql_fetch_array($sql);
$profile=$row['profile'];
?>
<div class="text_wrapper"><?php echo $profile; ?></div>
<div class="edit" style="display:none">
<textarea class="editbox" cols="23" rows="3" ></textarea>
</div>
</div>
update_profile_ajax.php

Contains PHP code at users table:

<?php
include("db.php");
if($_POST['data'])
{
$data=$_POST['data'];
$data = mysql_escape_String($data);
$user_id=$session_id; 
$sql = "update users set profile='$data' where user_id='$user_id'";
mysql_query( $sql);
}
?>
Database configuration file With PHP Codes.
db.php
<?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");
?>
CSS Codes
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
}
Your projects are now ready for use. I am sure that now you can make facebook like profile and edit with jquery in 5 minutes. If you have any question for about it pls don't avoid the comment option. I will try to solve your problems with this project.

About Luthfar Rahman

I am Luthfar Rahman is the founder of Megaupdate24. I am a Computer Science Engineer, Online Marketer, and Public Speaker. Like to traveling and have been blogging last 7 years. Follow me on Facebook, Google+ and Twitter.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment