Make edit profile like facebook with ajax & php.

Monday, July 4, 2011

Make edit profile like facebook with ajax & php.

Well, here I will discuss about it with the makers php and ajax jquery. After touring on google I found a web that discuss this.
Start the first step. In order for these applications can run properly must be first downloaded the jquery file here or here

Create a database first.

other article :

Database

CREATE TABLE IF NOT EXISTS 'users' ( 'user_id' int(11) NOT NULL AUTO_INCREMENT, 'username' varchar(45) NOT NULL, 'password' varchar(45) NOT NULL, 'profile' text NOT NULL, PRIMARY KEY ('user_id') ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

then, create a php file to connect to the database.

<? Php $ Host = "localhost"; $ User = "root"; $ Password = ""; $ Dbname = "tutorials"; $ Connect = mysql_connect ($ host, $ user, $ password) or die ("sorry there is nothing wrong to get into the database". mysql_error ()); mysql_select_db ($ dbname, $ connect) or die ("sorry there is nothing wrong to get into the database". mysql_error ()); ?> {Codecitation class = "Brush: xml; Gutter: false;" width = "500px"} create a file called update.php, it will be useful for primary file. <strong> update.php </ strong> {Codecitation class = "Brush: xml; Gutter: false;" width = "500px"} <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Facebook profile </ title> <script type="text/javascript" src="/jquery-1.4.4.min.js"> </ script> <script type="text/javascript"> $ (Document). Ready (function () { / / The edit link $ ('. 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 } ); / / Edit content textarea $ (". Editbox"). Change (function () { $ ('. Edit'). Hide (); boxval var = $ (". editbox"). val (); var dataString = 'data =' + boxval; $. Ajax ({ typr: "POST", url: "update_profile.php", data: dataString, cache: false, success: function (html) { $ ('. Text_wrapper'). Html (boxval); $ ('. Text_wrapper'). Show (); } }); }); / / Edit text without $ (Document). Mouseup (function () { $ ('. Edit'). Hide (); $ ('. Text_wrapper'). Show (); }); }); </ Script> <link rel="stylesheet" href="/css.css" /> </ Head> <body> <div class="mainbox"> <a href="#" class="edit_link" title="Edit"> Edit </ a> <! - Shows the profile data from user table -> <? Php include ("db.php"); $ User_id = $ session_id; $ Sql = mysql_query ("select profile from users WHERE user_id = '1 '"); $ Row = mysql_fetch_array ($ sql); $ Profile = $ row ['profile']; ?> <div class="text_wrapper"> </ div> <div class="edit" style="display:none"> <textarea class="editbox" cols="23" rows="3"> </ textarea> </ div> </ div> </ body> </ html>

then create a file update_profile.php, this serves to action that will happen.

update_profile.php

<?php include ("db.php"); if ($_POST['data']) { $data=$_POST['data']; $data= mysql_escape_string($data); $user_id=$session_id; $sql = "update user set profile='$data' where user_id='$user_id'"; mysql_query($sql); } ?>

css file to make it last. Here :

@charset "utf-8"; /* CSS Document */ body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; } .mainbox{ width:250px; margin:50px; } .text_wrapper { border:1px solid #0099cc; padding:5px; width:187px; } .edit_link { float:right; } .editbox { overflow:hidden; height:61px; border:1px solid #0099cc; width:190px; font-size:12px; font-family:Arial, Helvetica, sans-serif; padding:5px; }