Team Tutorials» | Team Tutorials

Introducing TutorialGrad

Mike Maguire — Thu, 05 Nov 2009 03:44:23 +0000

Sorry for the lack of posts that we have had recently, but John and I have been working on some new projects and are proud to be able to finally release one of the many active projects that we are working on.

TutorialGrad is a site that will allow others to post tutorials from their own sites automatically through an RSS feed submission. You go to the site, type in your RSS feed and we do the rest.

We have worked long and thought all features of the process through to make the site the best it can be for users as well as site owners. Some features include:

No Framed Content- We will not frame any content. Leaving the users the full ability to see your tutorials.
No Content Stealing- We simply post the description on the tutorial and then give the users a direct link to it. They will all land directly on your page. This will give you more legitimate back links.
Auto Posting- We will look at your RSS feed daily (currently, may change to more frequent with time once we get all the kinks out) and scrape any tutorial in it and post it to the site.
Feed Support- We actively support RSS and ATOM feeds. If you use something else that you would like to be supported, please let us know.
Auto Thumbnails- We take a “snapshot” of your site upon submission for the users to see the thumbnail next to the tutorials.

Related Blogs

Related Blogs on tutorials
Ultimate Round-Up Of 60 Excellent Gimp Tutorials | Tutorials …
FrancescoMugnai.com » 20 Most Wanted Web Design Tutorials

Using jQuery to Reorder a List and Update a Database

John Ward — Wed, 30 Sep 2009 21:05:23 +0000

This tutorial will show you how to use jQuery to allow as list (UL) to be reordered and will also make an AJAX call to a PHP file that will update the database when an item is dropped. I found this useful for a project I was working on recently. The user wanted to be able to change the order that categories displayed in a report. The items are stored in a database with a field called display_order. When the report is generated we simply order by that field.

This tutorial requires:

A web server that handles PHP and MySql or setup a local Windows Apache MySql Php web server.
jQuery and jQuery UI.
Basic HTML/CSS/Javascript knowledge.

First you are going to need to download jQuery Ui. There are plenty of feature within jQuery User Interface that I will not be touching in this tutorial, but for sake of the tutorial download the entire bundle. Also I will be using the default (UI Lightness) theme.
Create a folder for this project on your server. You will need to unzip the jQuery files and put them all in this directory.

Since jQuery comes with an example called index.html I am going to name my file test.php. You can call it whatever you want. Create the file. We will use it later. We’ll set the database up first.

I like to use HeidiSQL when working with MySQL. Now on the database server I am going to create a database call test_tutorials, with a table called report_items. Here are the field properties for the report_items table:

Now populate your table with some test data. I’ll insert 6 rows. Also make sure you insert the display order starting from 0.

You can save the changes to your data base and get back to working on test.php. Open the file. We’ll start with the basic layout.





Reorder Test

Next we’ll include the stylesheet from our jQuery theme. I’ll also add some CSS from the example on the jQuery UI website. Then we’ll include the jQuery javascript files.





Reorder Test

We are going to pull the intial data from the database. In order to do this we’ll need to make a database connection. Create a new file called connect.php and create a database connection (obvious added your credentials where needed.

Save connect.php and include it into your test.php file:







Reorder Test

Now we need to retrieve the database results and dsiplay them. The items will be display in an un-ordered list. We’ll add this code to the body.


	
    $catname";
	}

	?>

Take not above. When we echo the li we are adding the ui-state-default class which is just a jQuery theme class and the span that we included is an arrow icon also provide with jQuery Ui. Where you see item_$catid, that should be your primary key from your database (this will be used later to reorder items.

Now save the file and load it in your browser. If you followed everything hopefully you will get something like this:

Now we’ll enable the sortable function on our list. Remeber I gave the UL tag an id of sortable. Add this code in the head below your jquery javascript files:

The code above enables sorting of the UL with the id #sortable. The placeholder: ‘ui-state-highlight’ tells jquery we want it to show a place holder of where we can drop the item. In the them I am using it is a yellow box. Make the changes above and save your page. You should now be able to drap and drop your list items.

Now that you have that working we can move to the AJAX call. When an item is dropped, we want to call a php file to update the database. We do that by using the stop: action. So when dragging stops, the script will call the url (updatedb.php) we provided below. To make the AJAZ called, we let jQuery do the work.

You see the ajax function above. We tell it what type of request, in this case wer’ll use get variables. We also tell it what URL, this is a php file we’ll create to update the database. Then we add the data that will be sent.

The code $(”#sortable”).sortable(”serialize”)}); will take the items within our ordered list and serialize it. It will take the items of the list, in whatever order they are in, and turn them into a get variable. So for each item it will add it to an array and format is properly to make the call to the PHP file. The data will look like this:
item[]=1&item[]=2&item[]=3&item[]=4&item[]=5&item[]=6

If you want to debug AJAX request I recommend using Firefox with the Firebug plugin. If you want to see that the request is being attempted and that what the data looks like, you can add an alert box just below the placeholder like this: alert($(”#sortable”).sortable(”serialize”));
Save the changes to you file we are done with test.php. Here is my full source of test.php up to this point.







Reorder Test










	
    $catname";
	}

	?>

Now we need to actually update the database. Create a file called updatedb.php. This file is pretty simple. We take each item in the array and then update the database based on the array position($key) and the primary key ($value)

$value) {
	mysql_query("UPDATE report_items SET Category_Display_Order = '$key' WHERE Categoryt_ID ='$value';");
}
?>

Save that file and test the reorder. If you have problems and you think it is with the AJAX call. Check fire bug. Here is an example of a bad request in this case I tried to include a file that was not there.

I hope this tutorial helped someone out

August 25, 2008 — Simple PHP Website Templates (11)
July 27, 2008 — Hide and Show a Div Using Javascript (13)
June 8, 2008 — Installing Code Editor (1)
March 30, 2009 — How to Return MySQL Results to a Table (6)
September 21, 2008 — Creating Checkboxes Based on SQL Results (7)

Site Downtime

John Ward — Fri, 18 Sep 2009 01:50:10 +0000

As some of you may have noticed the site has been unavailable over the last few days. We are in the process of upgrading to a new server (with 2 quad core Xeon processors and 8gb RAM) and things have not gone as smooth as planned. We will get all the issue straightened out and try to push the new server to it’s limits. If you are wondering why we haven’t posted in the last two month’s we have both been busy with work and side projects. We hope to post some new tutorials soon.

Sending E-Mail to validate User Sign-up

Mike Maguire — Thu, 23 Jul 2009 01:06:51 +0000

In one of our last tutorials we covered how to verify that a user’s email address is formatted correctly as well as verify that it goes to a valid domain name. That is great, but still not a great way to make sure a user actually owns or uses that e-mail address. This tutorial will walk you through one method of sending the user an e-mail upon signing up that gives them a link to activate their account. This will require them to click on the link in the e-mail before they can actually login to the site. Let’s get started. First, let’s create a table to hold our user information. I made a database called teamtutorials on my local server and ran this to create the table.

CREATE TABLE `users` (
  `user_id` int(7) unsigned NOT NULL auto_increment,
  `display_name` varchar(20) NOT NULL,
  `password` varchar(255) NOT NULL,
  `first_name` varchar(25) NOT NULL,
  `last_name` varchar(25) NOT NULL,
  `email_address` varchar(255) NOT NULL,
  PRIMARY KEY  (`user_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0;

Now that the table is set up and configured the way we need it to be we can start creating the php files. We will start with the simple form file. This is adduser.php (it doesn’t have to be a php file but I do it so that If I add something later that is php it is already a php file.)


	UserName:

	First Name:

	Last Name:

	E-mail:

	Password:

	Confirm PW:

Next, we will need to create the register.php file that will be called when the form is submitted.


First, we start the php tag and then check for the POST variables to be set. If any of them are not set it will send them back to the creation form.
else
	{
		$servername='localhost';
		$dbusername='dbusername';
		$dbpassword='dbpassword';
		$dbname='full db name';
		global $link;
		$link=mysql_connect ($servername,$dbuser,$dbpassword);
		if(!$link){die("Could not connect to MySQL");}
		mysql_select_db($dbname,$link) or die ("could not open db".mysql_error());

If all of the POST variables are set we continue by setting the server variables and creating the database connection. Ensure that you change the variables to your server access information.
		$display_name = $_POST['display_name'];
		$password = $_POST['pass'];
		$first_name = $_POST['fname'];
		$last_name = $_POST['lname'];
		$email_address = $_POST['email'];
		$sha_password = sha1($password);
		$hash_string = hash('md5',$display_name);

This just stores all the values into variables that are easier to work with so we don’t have to call the POST global every time. We sha1 the password because it is not reversible so it makes it the most secure. The hash_string is a md5 hash value of the display_name so that it isn’t easily readable. We use the display name because it will be unique and specific to the user. 
$query = "insert into `users` values(Null,'$display_name','$sha_password','$first_name','$last_name','$email_address',0,1,CURRENT_TIMESTAMP,Null,'$company_name',8);";
		mysql_query($query) or die ("Error in query: $query " . mysql_error());
		$user_id = mysql_insert_id();

Next, we insert a row into our table that we made using the variables that were passed from the form. We also get the ID of the inserted row so we know what the user id will be.
		$headers = "From: activations@teamtutorials.com \r\n";
		$validate_link = "http://teamtutorials.com/validate.php?id=$user_id&string=$hash_string";
		$email_body = "Thank-you for signing up on TeamTutorials. Click on the link below to complete your registration. If you have any issues completing the verfication please let us know. \n\n $validate_link \n\n TeamTutorials Staff";

This builds all the information needed to generate an e-mail using php. The headers sets the from field so that the email will be from a user (if you don’t set this it will be nobody (the user which apache runs under in linux). The validate link is a link to the file that will validate the user when they click on it. The \n command is the php new line command.
		if (mail($email_address,"TeamTutorials Sign-Up",$email_body,$headers)){
			echo "Email has been sent to ".$email_address.". Please check your e-mail for steps to activate your account. Check your spam folder as sometimes these 		e-mail get marked as spam. If you still do not see your e-mail, please  Click Here to resend.";
		}
		else
		{
			echo "There was an error sending an e-mail to your e-mail address. Please contact us to let us know of the issue.";
		}
	}
?>

Finally we attempt to send the e-mail and echo success or failure. That concludes this file. Finally we need to make the file that will validate the user when they click on the link in the e-mail that we just sent them. This file is validate.php.

First we make sure the values are in the url that we are expecting. At the end of the file we will re-direct them to the home page if these values aren’t set.
$query = "select user_id,display_name from `users` where user_id=$id;";
	$result = mysql_query($query) or die ("Error in query: $query " . mysql_error());
	$row = mysql_fetch_assoc($result);
	$storedhashvalue = hash('md5',$row['display_name']);
	mysql_free_result($result);

These lines run a query against the table to get the information for the user based on the user id in the url. It then re-hashes the value so that we can compare the on in the url to match.
	if ($storedhashvalue == $hashstring){
		$query = "update `users` set active_flag=1 where user_id=$id;";
		$result = mysql_query($query) or die ("Error in query: $query " . mysql_error());
		echo "Your account has been activated. Please 

Finally we re-direct the user if the variables are not in the url. Now if you go to adduser.php and fill out the form and hit submit. It will send whatever e-mail you put in the form an e-mail with a link in it. Click on the link to activate the user. That concludes this tutorial. If you have any questions, please leave it in the comments. Thanks for viewing.
Related Posts

July 16, 2008 — Creating a Form that will Search a MySQL Database (43)
September 30, 2009 — Using jQuery to Reorder a List and Update a Database (8)
June 18, 2009 — How to Parse a CSV File Using PHP (10)
March 30, 2009 — How to Return MySQL Results to a Table (6)
March 13, 2009 — Editing MySQL Data Using PHP (38)

How to Parse a CSV File Using PHP

John Ward — Thu, 18 Jun 2009 22:07:06 +0000

In this tutorial you will learn a simple way to parse CSV files using PHP and output the text of the fields you need. This tutorial is not going to go into what you can do with the data once you get it from the CSV as the possibilities are endless. We will simply show you how to get the data into an array in PHP.

First you can download our test.csv file here.

Now we are going to open the file for reading using the fopen() function in PHP. Will will specify the location of the file and also the mode in which we want to open it. In this case we are using the “R” mode which stands for read. Other possible uses of this function can be found on the manual page for fopen().

Next we are going to create a while loop. We will use this loop to parse each line of the CSV.

Next we are going to use the fgetcsv() function to “split” each line of our CSV file into an array called $data. When there are no lines left the condition will be false and will end the loop. In the fgetcsv() function we will pass the file handle, length (optional) and the separating character (which is a comma in this case.
test

*note: If you data fields are encapsulated using a character such as – (for ease of example) you can specify the enclosure filed like so: fgetcsv($handle, 5000, “,”,”-”). By default the enclosure character is a double quote, but the function will also handle no enclosure character.

Next all we have to do is echo the fields that we want to see. We will use the field number in the array to do this. I will echo the second value in the CSV.

";
}
?>

Another note. If you do not know which value the field you are looking for will be in the array just print the array like this:

";
	print_r($data);
	echo "";
}
?>

As you can see it is pretty simple to parse csv using this method. You may have issue with memory if you try to open large files using fopen. in that case you will want to read the file line-by-line, but that is another tutorial.

Related Posts

September 30, 2009 — Using jQuery to Reorder a List and Update a Database (8)
July 22, 2009 — Sending E-Mail to validate User Sign-up (8)
March 30, 2009 — How to Return MySQL Results to a Table (6)
March 13, 2009 — Editing MySQL Data Using PHP (38)
February 22, 2009 — How to Get a Users Geo Location? (9)

Validating Email Address with PHP and AJAX

Mike Maguire — Mon, 08 Jun 2009 07:05:27 +0000

This tutorial will walk you through checking for an e-mail to be valid as the user is filling out the form without having to reload the page. Bear in mind, that there is no way to make sure that we get an accurate working e-mail every time. All we can do is prevent users from using extremely random ones or for domains that don’t exist. I was working on a form for a new website that is going to require users to create an account and was browsing the web to see what people use to validate e-mails, other than the obvious choice of running it through a reg-ex (regular expression), and I came across a site that showed me a feature of php that can be useful. The original post can be found over at David Walsh’s website. I think that using that this php function as well as a reg-ex and running them from an AJAX call should do the trick. So let’s get started. You can get the images we will be using here. First we will make the form that will call the functions. Since this will be our user account creator we’ll call it adduser.php. (I’m leaving out the default HTML/CSS as you can do that however you like – you may also note that this file could be an HTML as there is no php in this section – this is just a part of the much larger file that I am working with (-:).




User Creation
UserName (Display Name): 

First Name:

Last Name:

E-mail:


Password:
Confirm PW:

Only a few things to note here: the onBlur command in the e-mail textbox is the first. This is going to call the email function (which is included in the script include at the beginning of the file) every time that textbox is tabbed or clicked away from. Also, note the div after the textbox, that contains the failure image now as we will use that ID to change the image later. Next, we need to create the php file that will actually do the validation when the AJAX calls it. Let’s call this file validate_email.php. I’ll break this one down a little to explain what’s going on.


This couple of lines simply checks for a variable to be set and if it is, calls the function to validate the address – this will prevent from someone going straight to this file or going to it with a blank string. As you can see we pass the value in the variable to the function. 
function isValidEmail($email)
	{
	$myReg="/^[A-Za-z0-9\._-]+@[A-Za-z0-9_-]+\.([A-Za-z0-9_-][A-Za-z0-9_]+)$/";
		if(preg_match($myReg, $email)){
			if(domain_exists($_GET['email']))
			{
				echo("");
			}
			else
			{
				echo("");
			}
		}
		else
		{
			echo("");
		}
	}

The function looks worse than it actually is due to the reg-ex. They can be a little confusing, but once you understand what it does, it’s not that bad….but that is another tutorial. For now just know it checks the string that is passed to it to be formatted correctly. First we set the reg-ex and then we pass the address to it through the preg_match command. This will process the string to match the reg-ex and output true or false. If it passes validation, we then pass it to our function to check the MX record. If that passes we echo the path to success.gif (which is a green check-mark), otherwise we echo the path to failure.gif (which is a red x). Note that for these to work you will need to put the images in the proper locations or change the path to the images. Finally, in this file we need to create the domain_exists fcuntion that we called in the above section of code. 
function domain_exists($email,$record = 'MX')
{
	list($user,$domain) = split('@',$email);
	return checkdnsrr($domain,$record);
}
?>

This simply runs the e-mail(after splitting the email at the @ symbol) through the checkdnsrr which checks for the MX record to be retrievable from the domain name. This essentially just checks for a server to be responding at that domain name. Technically we could still put an e-mail that doesn’t exist, as all we check is for the domain to exist. Next, we need to create the AJAX call file. We’ll call this file validate_email.js.
function checkEmail(){
	httpObject = getHTTPObject();
	if (httpObject != null) {
		if (!document.getElementById('email').value== ""){
			httpObject.open("GET", "../includes/php/validate_email.php?email="+document.getElementById('email').value, true);
			httpObject.send(null);
			httpObject.onreadystatechange = setImage;
		}
		else
		{
			document.getElementById('emailflag').innerHTML = "";
		}
	}
}

This file has 3 functions in it. The first one is the function that we are calling from the form in the first file. This function calls the getHTTPObject function to initialize the AJAX call that we will use. Next, we check for the email field in the form to contain information and if it does, we do an HTTP GET request to call the php file and pass it the email that is currently in the textbox. If it contains no data it sets the div that is created right after the textbox to contain the failure image. Once the HTTP object state changes, we call the function that will pass the image contents. 
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}}

This function declares the httpObject that we will be using and throws an error in the browser if it does not support the call. 
function setImage(){
if(httpObject.readyState == 4){
document.getElementById('emailflag').innerHTML = httpObject.responseText;
}}

This final function checks for the state of the object to be 4 (completed) and if it is it sets the innerHTML of the ID from the form to whatever was echoed from the PHP file (either the success or the failure gif). That completes the files. Ensure that all the files are in the right place. I have my php file in /includes/php/validate_email.php and the javascript file is /includes/js/validate_email.js. 

This is the form that should be shown when you go to the main form. 

When you type a valid e-mail into the e-mail box, the checkmark should appear where the X was like above.

If you put in a improperly formatted e-mail like above, it should switch it back to an X. It will also go back to an X if you blank out the text box. 
That completes this tutorial. Some of this can be hard to follow so please leave any questions or comments you have in the comments sections and we’ll help you out where we can. Also, I made the reg-ex fit as many things as I could, if you find a valid e-mail that it fails, please let me know so that I can modify it to work. Thanks for viewing this tutorial and I hope it was easy to follow. 
Other Related Tutorials

November 10, 2008 — Configuring and Creating a Database in MS SQL 2008 (10)
October 8, 2007 — Installing and Configuring the Popularity Contest for WordPress (1)
May 14, 2008 — Pulling Drop-down values from a database using Javascript and PHP (41)
March 18, 2007 — Remove Windows System Generated Folders (3)
May 8, 2009 — Disable UAC(User Access Control) in Windows Vista (7)

Disable UAC(User Access Control) in Windows Vista

Mike Maguire — Sat, 09 May 2009 00:41:30 +0000

UAC is a security feature in Windows Vista that is designed to make sure you want to do certain tasks. UAC requires permission to perform all of the following tasks:
• Changes to system-wide settings or to files in %SystemRoot% or %ProgramFiles%
• Installing and uninstalling applications
• Installing device drivers
• Installing ActiveX controls
• Changing settings for Windows Firewall
• Changing UAC settings
• Configuring Windows Update
• Adding or removing user accounts
• Changing a user’s account type
• Configuring Parental Controls
• Running Task Scheduler
• Restoring backed-up system files
• Viewing or changing another user’s folders and files
Many users have asked if and how they can disable this from prompting them every time they want to do these tasks. This tutorial will walk you through disabling it.

To start you will want to click on the Start orb and type msconfig into the box for it to find what you are looking for (alternatively if you use the classic start menu, click on run and type msconfig and press enter).

The above window will appear. This is the configuration setting for a lot of Windows components and features. We will not want to click on the tools tab to open the section with our UAC settings.

This is the tools tab. This tab allows you access to some pre built scripts and features of the Windows Operating System.

Scroll down until you see Disable UAC. Click on it once and click the Launch button at the bottom of the screen.

The above window will appear to let you know that is has completed successfully or give you any error it may have encountered. That is all there is to it. As you may have noticed, there is also an option to Enable UAC which will allow you to turn it back on if you decide you would like to. I hope this tutorial was easy to follow and thanks for reading.

Launch of WootStat – The Best Woot Tracker on Facebook

John Ward — Mon, 06 Apr 2009 23:36:30 +0000

Introducing WootStat, the premier Woot tracker for Facebook. Mike and myself decided to work with the Facebook API. We ended up created a cool application for tracking items on Woot.com. After checking out the competiton we stack up pretty well. I think we have the most features of any WootTracker on Facebook.

WootStat offers:

User Voting
Price Comparison
Sharing Capabilities
Past items
Woot-Off Predictions
Top Users
Best and Worst Items
Email Notifications
…and more to come

The user who refers the most friends this month will win a $50 NewEgg.com Gift Card. At the time of this post the leader has only 3 referrals. All you have to do is add WootStat and then Invite Your Friends.

If you want to check out the app you can check it out at WootStat.com.

See the Facebook about page

What is woot?

I hope that this would lead to some Facebook API tutorials, but I can’t promise anything. As usual if you have any question post them below or feel free to use the contact form. We generally respond to all inquires.

September 30, 2009 — Using jQuery to Reorder a List and Update a Database (8)
September 21, 2008 — Creating Checkboxes Based on SQL Results (7)
September 7, 2008 — jQuery Pop Over Effects (4)
August 18, 2008 — Password Verification and Strength Checker (10)
August 13, 2008 — JavaScript Progress Bar 2 (7)

How to Return MySQL Results to a Table

John Ward — Tue, 31 Mar 2009 00:24:08 +0000

This question has been asked several times lately and I wanted to clear this up. This is a very easy concept once you get it down. In order to display the results from a MySQL query into a table will will store the results in an array and then echo out each row in a while loop.

First off. I am going to use a table that I created in the past tutorials on this site.

The table contains the following fields:

ID – auto generated integer
FName – First Name, varchar
LName – Last Name, varchar
PHON – Phone number, varchar

Create the table and populate some test data if you haven’t done so already. If you don’t know how to do this please visit some of our other MySQL tutorials.

Create your database connection

<?php
//create a database connection
mysql_connect("localhost","your username","password") or die("Error: ".mysqlerror());
//select your database
mysql_select_db("your db");
?>

Next we need to setup the table. We will add the column headings.

<?php
//create a database connection
mysql_connect("localhost","your username","password") or die("Error: ".mysqlerror());
//select your database
mysql_select_db("your db");
?>

<html>
<body>

<table border=1>
  <tr>
   <th>ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Phone Number</th>
  </tr>

As you can see above we ended our PHP code and create an HTML table. The TR tage is used to defined a table row and the TH tag is used for Table Headings.

In php you can “break” out of code and execute HTML and then continue writing php code. Do do this you simply end your php code with then start a new

So the next setup will be to add the php code to select our items from the database.

<?php
//create a database connection
mysql_connect("localhost","your username","password") or die("Error: ".mysqlerror());
//select your database
mysql_select_db("your db");
?>

<html>
<body>

<table border=1>
  <tr>
   <th>ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Phone Number</th>
  </tr>

<?php
//create the query
$query = mysql_query("select * from `TestTable`");

//return the array and loop through each row
while ($row = mysql_fetch_array($query)){

	$id = $row['ID'];
	$fname = $row['FName'];
	$lname = $row['LName'];
	$phone = $row['PHON'];

?>

Above you will see that we executed a query and returned the results as an array. We will loop through each record and echo the results in the table. Take notice that I DID NOT CLOSE the if statment here on purpose.

Now to we will add the HTML for the rows that are returned. We will use php and echo the results.

<?php
//create a database connection
mysql_connect("localhost","your username","password") or die("Error: ".mysqlerror());
//select your database
mysql_select_db("your db");
?>

<html>
<body>

<table border=1>
  <tr>
   <th>ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Phone Number</th>
  </tr>

<?php
//create the query
$query = mysql_query("select * from `TestTable`");

//return the array and loop through each row
while ($row = mysql_fetch_array($query)){

	$id = $row['ID'];
	$fname = $row['FName'];
	$lname = $row['LName'];
	$phone = $row['PHON'];

?>

  <tr>
   <th><?php echo $id;?></th>
   <th><?php echo $fname;?></th>
   <th><?php echo $lname;?></th>
   <th><?php echo $phone;?></th>
  </tr>

Now all we have to do is end the if statement and close all of our open HTML tags.

<?php
//create a database connection
mysql_connect("localhost","your username","password") or die("Error: ".mysqlerror());
//select your database
mysql_select_db("your db");
?>

<html>
<body>

<table border=1>
  <tr>
   <th>ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Phone Number</th>
  </tr>

<?php
//create the query
$query = mysql_query("select * from `TestTable`");

//return the array and loop through each row
while ($row = mysql_fetch_array($query)){

	$id = $row['ID'];
	$fname = $row['FName'];
	$lname = $row['LName'];
	$phone = $row['PHON'];

?>

  <tr>
   <th><?php echo $id;?></th>
   <th><?php echo $fname;?></th>
   <th><?php echo $lname;?></th>
   <th><?php echo $phone;?></th>
  </tr>

<?php } //this ends the if?>

</table>
</html>

If you do it right you will get something like this:

September 30, 2009 -- Using jQuery to Reorder a List and Update a Database (8)
March 13, 2009 -- Editing MySQL Data Using PHP (38)
September 21, 2008 -- Creating Checkboxes Based on SQL Results (7)
August 25, 2008 -- Simple PHP Website Templates (11)
July 16, 2008 -- Creating a Form that will Search a MySQL Database (43)

Editing MySQL Data Using PHP

John Ward — Fri, 13 Mar 2009 17:01:43 +0000

We have had a few tutorial that show how to display and add data to a MySQL database. Now I am going to show you how to edit a row in your database. In previous examples we setup a table which contains: ID, FName, LName and PHON. We will be retreiving the data, making changes, then updating the row in the database. This tutorial is designed for the user to update there own information so we will only be editing row for this user.

If you haven’t taken a look at the past tutorials you may want to:
How to Access a MySQL Database Using PHP
Inserting Data Into a MySQL Database using PHP

You are going to need to create the database if you haven’t done so yet. I called my table `TestTable` and populated the following fields:

ID – Integer, Auto increment
FName – varchar (first name)
LName – varchar (last name)
PHON – varchar (phone number)

Populate some test data into your database and you should be ready to go.

We are going to need to create two files in order to edit the date.
editinfo.php – We will get the user info from the DB and put it into a form.
updateinfo.php – We will send the changes from editinfo.php to this for and update the database.

First create editinfo.php

We are going to connect to the database:

Since I am only editing 1 row I am going to just use the user with ID 1. If you were using this in an application you would have this information store when the user is authenticated, but I am going to hard code the user ID into my queries for the example.

As you can see by the comment about, we will return the rows as an array called $row. Once we build the HTML form we will be able to populate the data into the field. Now I will start with the HTML for the form.



Edit User Info

The important things to note in the HTML above is the form action and method. Action is where we will be sending the data. We want to pass all the changes to updateinfo.php and then updateinfo.php will update the database. The method is the method that we will be using to transmit the variables. You can use either GET or POST variables. GET variables will be displayed in the url, for this example we do not want that, we can you the post method.

Next add the form fields. We will use the input tag for this form. Pay attention to the different values if you are not familiar with them.

type=”text” –just means we are using a text field
value=”" –this is what the box will display by default.
name=”id” –this is what the variable will be named. This is what we will send to updateinfo.php



Edit User Info






userid:






Last Name:






Last Name:






Phone Number:

Now we have the fields setup. You will notice that the input box for id is disable. This is because I do not want the user to be able to change their ID.

Next step is to populate the form with some data. We will echo the values that we set above in the PHP code.




Edit User Info






userid:






Last Name:






Last Name:






Phone Number:

Now you should have you fields populated. The next step is to create the updateinfo.php file and actually update some data. We will start by capturing the data. First connect to your database.

Build the update query and execute.

Return to edit info";

?>

That is all you need to allow a user to update their info. Now this is a very basic version. If you were to use this on a production web site you would want to do form validation and also protect yourself from sql injection in the update form.

Here is the full source for both files:

editinfo.php





Edit User Info






userid:






Last Name:






Last Name:






Phone Number:

updateinfo.php

Return to edit info";
?>

If you are going to ask a question please take the time to go through the tutorial first. Thanks.

July 16, 2008 — Creating a Form that will Search a MySQL Database (43)
March 30, 2009 — How to Return MySQL Results to a Table (6)
September 21, 2008 — Creating Checkboxes Based on SQL Results (7)
June 18, 2008 — Setting Up a WAMP Server (48)
September 30, 2009 — Using jQuery to Reorder a List and Update a Database (8)