Team Tutorials

Simple XML to XHTML Transformation

John Ward — Mon, 03 May 2010 21:38:37 +0000

In this tutorial we are going to use XSLT to transform a simple XML document into an XHTML web page. XSLT stands for eXtensible Style Sheet Transformations. With our XSL document we will pretty much grab the values we need from the source XML and display them nicely in XHTML. In order to complete this tutorial you should have a basic understanding of XML documents, HTML/XHTML, and CSS.

First off you need some sample XML. I made a quick list of cars I have owned.



	
		1995
		Eagle
		Talon
		ESi
	
	
		1998
		Mitsubishi
		Eclipse
		GS-T Spyder
	
	
		2004
		Cadillac
		CTS
		Sport

We are going to add an XML stylesheet to the document, similar to a CSS file with HTML. In order to add the file we need to add the xml-stylesheet tag to our root document.

Which should give you this.




	
		1995
		Eagle
		Talon
		ESi
	
	
		1998
		Mitsubishi
		Eclipse
		GS-T Spyder
	
	
		2004
		Cadillac
		CTS
		Sport

Next you will need to create a new document that I called output.xsl. This file will be used to tell the browser how to display our XML. Here is a pretty standard starting template.

Now we need to create a typical HTML table to display our results in.

Now we are going to determine which fields we want to display in the rest of the table rows. We will do this by using the xsl:for-each tag. This will pretty much create a for each loop and loop through which ever values you specify. We want whatever data is container withing the car tag within the autos tag. So you would do something like this:

Then we simple tell XSLT how to display the values (in tables and cells in this case) and what values we want.

Then to finish it off you can style your table with some CSS.

Its that simple. We started with this simple XML file and ended up with the output of an XHTML page.

Download Source

New Features

John Ward — Thu, 08 Apr 2010 23:30:38 +0000

As most of you have probably noticed we have made some major changes to team tutorials. I created a new layout with the intention of making the site much easier to read. We added a preview image for each post that will be updated on all new posts. There is also a description box on each post with more information about the post and the ability to print or share the post. Here are so more new features:

Team Tutorials Forums - Check out the new forum section. Here you can ask question on pretty much anything tech related. We look forward to building a loyal forum following. Also if you have a question that is not related to a post you are reading please post it in the appropriate forum.
Comments – I added avatars to the comments and also nested comments. Now you can reply directly to a person. This should make the comments much easier to read. Also author comments will be highlighted in blue.
Tag Cloud – We now feature a tag cloud on the side bar so that you can browse post by tag instead of category.
Sub Categories – Sub categories have been removed from the side bar and moved to the top of each category page. This helped clean up the sidebar.
Demo Section – We will now feature all live demos, downloads, source code, etc for each tutorial on the Demos page.
Resource Section – This page will serve as a one stop shop for the best sites on the web (other than our site). We are looking to add your favorite tutorial sites, free tools, wordpress plugin/layout sites. You get the idea. If you have a site you would like to add please contact us.
New Ad Placements – With the new layout we have also feature some new ad placements. You can now purchase 125×125 side bar ads and top banners. We hope that the new ad formats will allow us to remove some of the more intrusive post level ads and provide our users with a better overall experience. If you are not using ad block, thank you. If you would like to purchase an ad please visit our advertising section.
Post Ratings (Coming Soon) – We also plan to add the ratings to each post. Users will be able to rate the post on different levels such as difficulty and helpfulness. We are having an issue with the rating system right now and will release that feature once we get the kinks worked out.

I hope you guys enjoy the new layout. We have both been pretty busy lately and would like to start posting more frequently. That will probably lead to us posting some new simple tutorials. For example post that describe how to use a certain function in some programming language. If anyone is interested in writing tutorials please contact us.

If you see any problems with the new layout please let me know.

Site Improvements

John Ward — Wed, 07 Apr 2010 01:35:25 +0000

We have been working on a new look and feel for the site. The new layout should be a little more clean than the old one. We tried to keep it simple and improve the readability. We will be upgrading over the next few days and will update with more details.

Referential Integrity with MySQL

Mike Maguire — Fri, 04 Dec 2009 03:28:11 +0000

Referential Integrity is when the rows from one table are “cross-referenced” and verified with those in another table. This tutorial will walk you through using MySQL to enforce this rule. For example, let’s say you want to have a customer table that contains all the information about your customers and then you want to have an invoice table that will keep the information for invoices. This invoice table will need to be associated to the customer table through the customer id. This relationship would allow you to get all invoices for a customer by searching for their ID. Enforcing referential integrity also will prevent the insertion of a invoice with a customer ID that isn’t in the customer table. Let’s get started.

First, we need to decide what our tables are going to look like. These could vary based on the application you are working with but for this tutorial, we will keep them basic. First, the customer table which doesn’t need to be anything special except ensuring that the type is INNODB and that you set the primary key.

CREATE TABLE customers
(
   customer_id INT NOT NULL AUTO_INCREMENT,
   name 			VARCHAR(50),
	address  	VARCHAR(60),
	city 			VARCHAR(45),
	state			VARCHAR(2),
	zip 			INT,
   PRIMARY KEY (customer_id)
) TYPE = INNODB;

This statement will create a table called customers that contains customer_id, name, address, city, state, and zip columns. It sets the customer id field to the primary key and makes it auto increment for each insert. Next we need to build the invoice table that will house the information about an invoice. (*Note: Normally an invoice would reference an item table to house the items for each invoice, but for sake of remaining simple, we will just have an items field that contains a varchar with comma separated items)

CREATE TABLE invoice
(
   invoice_id		INT NOT NULL AUTO_INCREMENT,
   customer_id	   INT,
   submit_date    TIMESTAMP NOT NULL,
	total				DECIMAL(10,2),
	tax				DECIMAL(10,2),
	shipping			DECIMAL(10,2),
	items				VARCHAR(100),
   PRIMARY KEY(invoice_id),
   INDEX (customer_id),
   FOREIGN KEY (customer_id) REFERENCES customers (customer_id)
) TYPE = INNODB;

This statement will create the invoice table containing invoice id, customer id, submit_date, total, tax, shipping, and items, columns. It sets the primary key to the invoice_id. INDEX tells it to index that column so that when we search the DB for that value it will be faster to return the results. Then the foreign key sets the customer_id of this table to look at the customer_id of the customer table to make sure it exists.

Let’s go ahead and make sure everything works as it is supposed to. First, we will try to insert an invoice for a customer ID that we haven’t inserted yet. Use the following insert statement.

 insert into invoice (customer_id,submit_date,total,tax,shipping,items) values (1,current_timestamp,54.22,4.50,10.25,'RAM, Power Supply, Case');

You should receive an error similar to the above picture. This just means that there is no customer with that ID so you can’t insert an invoice for them. Next, lets add the customer to the customer table.

insert into customers (name,address,city,state,zip) values ('Mike','100 That One Place','Anywhere','TX',22222);

Once you insert that row you should be able to successfully insert the invoice without any issues. The final thing that will referential integrity will enforce is to ensure you can’t delete customers that have invoice attached to them. Let’s try to ensure it works.

delete from customers where customer_id = 1;

You should receive the error above. If you delete the invoice from the invoice table first, you will then be able to delete the customer. That concludes this intro to referential integrity. I hope this is clear to you and thanks for reading.

Downloading and Installing Heidi SQL

Mike Maguire — Tue, 24 Nov 2009 23:58:23 +0000

Recently, John and I have been doing a lot of database work using MySQL and have had to connect to several large databases and manage them correctly. This can be a daunting task without a tool to easily do so. This is where Heidi SQL comes in. This tutorial will walk you through downloading, installing, and configuring Heidi SQL to use against your MySQL databases.

Let’s begin by going to Heidi’s download page and downloading the installer.

Once the site loads, you will see the link to download the installer as shown above. Click on that link and save the file somewhere on your computer so that you can install it.

This is what the downloaded installer should look like. Double-click on it to start the installation process.

This is the welcome screen. Click on Next.

Read the agreement and check the radial button to accept the terms and then click on next. Click on Next.

This is where to install the files for the application. Leave this default if you are unsure of where to put them. Click on Next.

This is where you can pick what it names the start folder in the Start Menu where the application shortcuts will be located. Click on Next.

This screen will allow you to select the additional options you would like such as desktop and quick launch icons. Click on Next.

This is the final screen before installation will occur. Review the settings and ensure they are all correct. Click on next to start the installation.

You will see the above screen while the installation completes. It should only take a few seconds.

Once installation is complete, you will get the screen. Keep the box checked to launch as soon as you hit finish.

This is the connection manager. You can add several databases to the application and manage them by selecting them here. You can also enter the information for a one time connection. To create a connection that you will save, click on New at the top of the screen.

This box will pop up asking what you want to name the session. I named mine Tutorial. Click on OK to continue. It will now take you back to the main screen to fill in the options for the connection.

Fill in the fields with the information. The default port for MySQL is 3306. Once the information is all filled out, click on Save + Connect and it will connect you to the database as well as save it for the next time.
*Note: If you are unable to connect, you will need to configure your server to allow incoming connections and/or contact your host. MySQL does not allow remote connection by default and will need to be configured to do so.

This is the main window of Heidi. The left pane is the server you are connected to as well as the databases it contains. The pane on the right it the information pane that will change based on what you have selected on the left. It will allow you to browse the data, view the settings, and write queries to run against the databases. The bottom pane is the log pane and it will show you what the application is currently during.

That concludes this tutorial. Heidi is a powerful tool with everything you need to manage, manipulate, and update your MySQL database. Play around with it and get used to it and you won’t regret it. Thanks for reading.

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

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 PostsCreating a Form that will Search a MySQL Database
Downloading and Installing Heidi SQL
Using jQuery to Reorder a List and Update a Database
How to Parse a CSV File Using PHP
How to Return MySQL Results to a Table

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.

Team Tutorials

Simple XML to XHTML Transformation

Related Posts

New Features

Other Related Tutorials

Site Improvements

Other Related Tutorials

Referential Integrity with MySQL

Related Posts

Downloading and Installing Heidi SQL

Related Posts

Introducing TutorialGrad

Related Blogs

Other Related Tutorials

Using jQuery to Reorder a List and Update a Database

Related Posts

Site Downtime

Other Related Tutorials

Sending E-Mail to validate User Sign-up

Related Posts

How to Parse a CSV File Using PHP

Related Posts