Team Tutorials » CSS

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

Simple PHP Website Templates

John Ward — Mon, 25 Aug 2008 17:10:50 +0000

So you have a basic HTML site with 100 pages, what happens when you want to change the title tag? Well, if you aren’t using PHP includes, you will have to update each file. Wouldn’t it be nice if you could make the change to one file and it would update every page? That is what we will accomplish with our basic PHP template tutorial.

This tutorial will require a server that can handle PHP code. If you would like to set one up on your computer, check out Mike’s “Installing WAMP tutorial”.

First, if you don’t have a website that you would like to break up into a template, you can use the sample 2 column layout below from 456bereastreet.com

Simple 2 column CSS layout, final layout | 456 Berea Street

Simple 2 column CSS layout, final layout

Option 1
Option 2
Option 3
Option 4
Option 5

Column 1
456 Berea Street Home | Simple 2 column CSS layout | Developing with web standards index
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.
Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.
Consectetuer adipiscing elit
Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.

Column 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.

Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Link 8
Link 9
Link 10
Link 11
Link 12
Link 13
Link 14
Link 15

Footer

We are going to break the page up into individual files, and then use PHP includes to join them again. Here is a break down of how the files will be separated.

The first step is to is to create a new PHP file. This file will be for the header, so I will name it header.php (you could also name these header.inc if you would like). We will cut all of the code from the beginning HTML tag all the way down to the end of the header section and paste it in this file. The file should look like this:





	Simple 2 column CSS layout, final layout | 456 Berea Street
	
	
	
	




	Simple 2 column CSS layout, final layout

Next we will cut the code for the top menu and paste it into a file called top-menu.php



		
			Option 1
			Option 2
			Option 3

			Option 4
			Option 5

And the last part is to cut from the div id=”sidebar” to the end of the page and paste it in sidebar.php. You could also separate the footer into its own file, but for the is example I will include it into the sidebar.



		Column 2
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.
		
			Link 1
			Link 2

			Link 3
			Link 4
			Link 5
			Link 6
			Link 7
			Link 8

			Link 9
			Link 10
			Link 11
			Link 12
			Link 13
			Link 14

			Link 15
		
	
	
		Footer

Now if you cut all of those lines, it should leave you with the following code in your original file:

Column 1
456 Berea Street Home | Simple 2 column CSS layout | Developing with web standards index

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.
Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.
Consectetuer adipiscing elit
Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.

So now we have all of the code broken down into include files. How do we put them all back together?

Create a file called template.php, we will use this as the template to build each content page. Now we just have to include the pages we just created. When using include, the web server will render the code from the included pages before the browser interprets it. You will see later that the source code will be identical if viewed in the browser.

This is what your template.php file should look like:

Column 1
456 Berea Street Home | Simple 2 column CSS layout | Developing with web standards index

Then when creating a new file, simple use the template and change the content in the main div to the new content. When you want to add a link to that page you can add it in sidebar.php or top-menu.php

Hide and Show a Div Using Javascript

John Ward — Sun, 27 Jul 2008 15:01:47 +0000

This tutorial will show you how to create a hidden Div and display it with the click of a link. There are a few reasons you may want to hide a Div in a website design. You may want to create a drop down type menu or a box that will show more information when you click a link. Another reason would be for SEO purposes. In theory hiding information in a Div is not against Google’s rules. As long as the user can still see the content when clicking a button you are not displaying different information to the user than you are to the search engine.

First we are going to start with a very basic page layout and create a 2 Divs. One will be shown and one will be hidden. Here is the starting code.




Hidden Div



This is not hidden.

This is hidden.




Ok now I will add some basic style to these boxes.



Hidden Div






This is not hidden.

This is hidden.

The page should look like this so far.

Now to hide the div. To do this we will change the display to none in the CSS for the #hidden div. See the code below.




Hidden Div






This is not hidden.

This is hidden.

Now when you preview the page you will not see the Div.

In order to show the div we will need to add a Javascript function. We will pass the ID attribute of the Div to the function. Basically this means that we can use this one function to show or hide more than one Div on the same page. Below is the Javascript code that we will add the the Head section of the page.

The script above is creating the function “toggle” an passing the value “id”. Next we are using the Document Object Model to get the current state of the display attribute. Then if “display: block;” for the #hidden div we will change it to be “display: none;” else we will change the display to none.

Add the code to your page in the head just below the style.




Hidden Div



 




This is not hidden.

This is hidden.

Now all we have to do is create a link that will call the toggle function and pass the ID of the Div we want to toggle. We will create a link that goes no where and add the onclick property below.

Toggle Div

Add the link to your visible div.




Hidden Div









	This is not hidden.
	Toggle Div


This is hidden.

Save the file and test. You should not see the Div when the page loads. When you click the toggle link the hidden box will appear.

Here is an example of something you could use this for. I have a site for deals on clothing. Now if we wanted to add some quality SEO content to help the site rank we could put it in a hidden div so that it doesn’t distract the customer.

When the div is clicked it could expand with SEO rich content and links.

I know the tutorial was pretty basic, but I hope that the example above gives you an idea of how this can be used. I may also expand this into another tutorial and show you how to create a nice menu using the technique.

Styling HTML Tables with TableCloth

John Ward — Mon, 16 Jun 2008 05:01:58 +0000

In this tutorial I will show you how to apply some simple style to your tables by applying the TableCloth style sheet and JavaScript file. TableCloth is a free, light way, way to add style to existing HTML tables. It only required two lines of code added to your table. With table clothe you can also modify how the HTML tables react to your input by changing the JavaScript file.

First you will need to download the TableCloth files from CSS Globe.

Extract the files and save them, we will use them later. For the next part of the tutorial we need to have a table made already. If you don’t have a table made you can use this code





Styling Tables with TableCloth





  

  First Name
  Last name
  Age

  

  

    John
    Ward
    21

  

  

    Mike
    Maguire
    21

  

  

    Sara
    Lee
    61

  

  

    Walter
    Reed
    1

First Name	Last name	Age
John	Ward	21
Mike	Maguire	21
Sara	Lee	61
Walter	Reed	1

Save the file as table.htm and open it with your browser. The table should look like this

The table is very plain looking, but that can be changed with a few lines of code. We will add two lines of code in the head of our page.

Now we need to copy the tablecloth folder into the directory with our table.htm

Note that there are two folders named “tablecloth” when you extract the files, we want to copy the folder that contains these files:

After you copy the files over and add the changes to the header of table.htm, refresh the page. Your table should now be styles by tablecloth.

By default the table columns are highlighted when you hover over them with the mouse.

Also when you click on an item the entire columns turns a green color.
Image06

These values can be changed in the tablecloth.js file which is located in the tablecloth folder. This info is near the top of the file in the config section.


	// if set to true then mouseover a table cell will highlight entire column (except sibling headings)
	var highlightCols = true;

	// if set to true then mouseover a table cell will highlight entire row	(except sibling headings)
	var highlightRows = false;	

	// if set to true then click on a table sell will select row or column based on config
	var selectable = true;

So if you wanted only the rows to be highlighted you would change the config to look like this.


	// if set to true then mouseover a table cell will highlight entire column (except sibling headings)
	var highlightCols = false;

	// if set to true then mouseover a table cell will highlight entire row	(except sibling headings)
	var highlightRows = true;	

	// if set to true then click on a table sell will select row or column based on config
	var selectable = true;

Then the table would look like this on mouse over.

You can even highlight both column and row if you would like or turn of the green highlighting on click. As you can see the file is easy to manipulation and the lines are commented so it should be easy to figure out. There is also a CSS file included that you can modify. I am not going to go into modifying the default style in this tutorial. All it takes to modify the style is some basic CSS knowledge.

Installing Code Editor

Mike Maguire — Mon, 09 Jun 2008 04:59:30 +0000

This tutorial will walk you through installing Crimson Editor (Emerald Editor) which will allow you to work with many types of codes files including PHP, HTML, DHTML, XML, and many more. The software is essentially a notepad replacement that will highlight the syntax of the code that you are working with, like below:

As you can see, this makes working with the code a lot easier and there is less confusion. Let’s get started installing our software.

First we need to download the software to be installed. To do this, go to http://www.crimsoneditor.com.

Once the site loads, click on download on the left as shown above.

Then click on one of the download links to begin the download.

Select to save the file to your hard drive and put it where you can easily access it once it is done downloading. I placed mine on the desktop.

You should now have an icon where you elected to save the file. Double click on the icon to get the setup started.

If you get this alert, click to allow the software to be executed/installed.

The first section is the license agreement. Read through itand then click “I Agree” to continue.

This is the component selection screen. You can choose whether you want to have Start Menu group, and Quick Launch button. I recommend keeping the syntax files. These are the files that tells it how to “color” the text when you are working with code.

This window allows you to pick where you install the files for it to run. If you don’t know, you can leave it default and it will work fine.

Once it has completed installing all of the files, the window should like the one above. Click on close to conclude the installation.

The first time you launch it will you receive the above box telling you that the config file has been corrupted and that it is setting up the defaults. This is simply because you don’t have a config file since you haven’t run it yet.

Launch the application using the icon on your desktop or the quick launch icon (if you set them to appear in the installation). Once in the application click on File and then Open.

The above window will open. These are files that are included with the editor for you to open to see the syntax highlighting at work. Pick any file you want and double-click on it.

This shows what the code I chose to open looks like. This concludes setting up this software for you to use. Go out and start coding some awesome applications. Thanks for reading.

Team Tutorials » CSS

Using jQuery to Reorder a List and Update a Database

Related Posts

Simple PHP Website Templates

Simple 2 column CSS layout, final layout

Column 1

Consectetuer adipiscing elit

Column 2

Simple 2 column CSS layout, final layout

Column 2

Column 1

Consectetuer adipiscing elit

Column 1

Consectetuer adipiscing elit

Related Posts

Hide and Show a Div Using Javascript

Related Posts

Styling HTML Tables with TableCloth

Related Posts

Installing Code Editor

Related Posts