Make edit profile like facebook with ajax & php.|NETTER KINGDOM 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 &#8203;&#8203;= 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; }

Comments :

15 komentar to “Make edit profile like facebook with ajax & php.”

Anonymous said...
on 

BNMMGHMGHM

Anonymous said...
on 

1. If the executives promise high traffic then understand you are talking with a non-SEO person.
The race is becoming even more challenging with the passing
of each day. This will not only help you find the best service provider but will help you
build an idea about the recent SEO market.

NOW, I don't mean you should just put keyword spam in your footer. There are so many good blogs out there, and if you're one of those writers, you
definitely know how important it is that your site gets heard through all of
the noise. Since keyword analysis is needed for both
SEO (search engine optimization) and SEM, we often confuse using these terms.
Content writing for websites is not as simple as typing out a predetermined amount of words, if you wish people
to view the content. Configure You - Tube settings by changing the default settings to your
preferred and secure preferences. This helps auto dealership websites
rank higher in the search engines results and get more traffic to
the website. They want to know things about how to create effective copy, general
marketing tips and maybe even stuff about social media. The
growth management of small business can be accomplished with SEO as an integral part of your overall Internet marketing strategy.
Effective SEO techniques for Bloggers aren't any different. Here you will need an SEO agency such as Webfirm to try and run damage limitation. Once you find the right and affordable SEO Company, it is essential to talk about your business objectives, target customers and future goals with the professionals to help them develop their strategies accordingly. G) SEO basics -Image 6: Open Google. Today, it is necessary that you scout the market for the best SEO Host that can help you achieve this. SEO content is a huge deal in today's online oriented
business world. The internet has become an integral part of our lives that according to the latest statistics, almost 1 billion Americans access
the internet. SEO requires understanding of various
algorithms.

my weblog :: simply click microfinance.ca

lora said...
on 

I come across this page by accident, thank you for all that information, I keep your blog in brand page, it is very clear and precise, thank you for the work
Thank you for this article, interesting comments, good luck.
for you
Voyance gratuite immediate, voyance gratuite par mail

Voyance mail said...
on 

Super! Your blog is really great!
Thank you to exist !!!
voyance par mail gratuite

Voyance mail said...
on 

It's been several times already that I check your blog and I say BRAVO to you, it's great! :) Keep it up !!!
voyance par mail gratuite

voyance par mail said...
on 

I like your blog, it is really cool! Exactly, it helps me a lot to set up my own (even if it is still in death poins) !!!! Continues as her, I love it!

voyance gratuite par email said...
on 

Thank you for sharing, this information is useful to me,good quality.

voyance gratuite en ligne said...
on 

Your blog is really great, I come over every day and each time I find something that suits me

consultation voyance gratuite said...
on 

Good article! Thank you so much for sharing this post. Your views truly open my mind.

Mobile App Developers said...
on 

I don’t know how should I give you thanks! I am totally stunned by your article. You saved my time. Thanks a million for sharing this article.

Mobile App Developers said...
on 

I don’t know how should I give you thanks! I am totally stunned by your article. You saved my time. Thanks a million for sharing this article.

Voyance gratuite serieuse said...
on 

You can definitely see your expertise in the work you write. The world hopes for more passionate writers like you who are not afraid to say how they believe. Always follow your heart.

voyance par mail said...
on 

It’s really a nice and useful piece of info. I’m glad that you shared this useful info with us. Please keep us up to date like this. Thank you for sharing.

voyance gratuitement said...
on 

It’s truly a great and helpful piece of information. I’m happy that you simply shared this useful info with us. Please keep us informed like this. Thank you for sharing.

sofy lefour said...
on 

Excellent pleasant site visualized thanks for the work done on this site
voyance gratuite mail

Post a Comment

Please don`t spaming !
Please do not put a link in the comments box. Author of comments have been getting backlinks from this blog.
I will deleted if your comment is spam or put your link IN THE COMMENTS BOX !!!
Have a nice day my friend... :D

Top Commenters