Team Tutorials» Using jQuery to Reorder a List and Update a Database

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

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.

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
Handling Errors To Prevent Application Crashes in VB
Replace Wordpress Search With Google Search Box
Disable Visual Effects to Speed Up Windows XP
How and Why You Should Still Use Tables
Graphically Mapping The Files on Your Harddrive

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

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

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.

ID	First Name	Last Name	Phone Number

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.

ID	First Name	Last Name	Phone Number

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

ID	First Name	Last Name	Phone Number

ID	First Name	Last Name	Phone Number

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

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.

How to Get a Users Geo Location?

John Ward — Mon, 23 Feb 2009 00:27:29 +0000

Every wonder how all of those dating ads know that you are looking for hot girls near (insert your city here)? Well if you are a complete nerd like me you probably ignored the hot girls and wondered: “How did they know where I live?”. There are a few simple ways to do this. Today I am going to show you how to GeoCode using MaxMind’s free version.

MaxMind offers a paid version of this script that probably offers much more functionality. For what I need though, the free database does the job. I checked the results via a few proxies and they matched the US city fine. I am not sure how this works with international visitors, but I use it for US targeted traffic (It does pick up Canadian cities and Provinces fine….eh)..

First off you are going to need to download the Database and PHP API code:

MaxMind GeoLiteCity
Geoip.inc
Geoipcity.php
Geoipregionvars.php

Once you download all of the files. Extract them all and upload them to the same folder on your server.

Now to use the API we need to include a few files. Then we are going to open the database and check the users location:

include("geoip.inc");
include("geoipcity.inc");
include("geoipregionvars.php");
$gi = geoip_open("./GeoLiteCity.dat", GEOIP_STANDARD);
$rsGeoData = geoip_record_by_addr($gi, $_SERVER['REMOTE_ADDR']);
geoip_close($gi);

This will grab the information, but what can we do with it. To find out what variables you can use print out the array:

include("geoip.inc");
include("geoipcity.inc");
include("geoipregionvars.php");
$gi = geoip_open("./GeoLiteCity.dat", GEOIP_STANDARD);
$rsGeoData = geoip_record_by_addr($gi, $_SERVER['REMOTE_ADDR']);
geoip_close($gi);
print "";
print_r($rsGeoData);
print "";

The results should output something like this:

geoiprecord Object
(
    [country_code] => US
    [country_code3] => USA
    [country_name] => United States
    [region] => TN
    [city] => Memphis
    [postal_code] =>
    [latitude] => 35.1242
    [longitude] => -89.9521
    [area_code] => 901
    [dma_code] => 640
)

I ran the above code using a Memphis based proxy. As you can see MaxMinds database gives us:
Country Abbreviation in two formats,
Full country name,
Region (state/province),
City,
Postal code (this usually works but is blank in the example),
Latitude,
Longitude,
Area Code,
DMA code (Designated Market Area as in Nielsen Media tv/radio market areas in the US)

Ok so now that we know what everything is, all we have to do is echo the results in the proper places. For example:

echo $rsGeoData->city;
echo ' ,';
echo $rsGeoData->region;

Would out put: Memphis, TN.
So if you were going to use this in a template you would use something like this in the header:

city.','.$rsGeoData->region;
?>

Then in your template wherever you want the City, State to display simple:

Meet girls near

The your site might look something like this:

Convert a MySQL date field using PHP Functions

John Ward — Fri, 20 Feb 2009 06:52:04 +0000

Today I am going to show you how to convert data returned from a MySQL database that was store as a date data type into a user friendly format. To do this you can take two different approaches. One way to do it is to use the function date_format() function in your query. The other way to to modify the date after it is returned.

Since you are trying to convert the date I am assuming you can connect to a database, runa query, and display the results. If not check out some of our older tutorials:

How to Access a MySQL Database Using PHP

Creating a Form that will Search a MySQL Database

You can use the function in the query to convert the date or after the results are returned.

Using date_format()

Here is an example of how to call the function in a query:

$query = mysql_query("select * date_format(date, '%b %d') as newdate from `table`")

Then when your results are returned simple echo $row[newdate]. The date I used will output the date in this format: Feb 18th (abbreviated month and numeric day with suffix).
You need to pass the date string and the format mask to the function: date_format($date, $format)

You can pretty much do this the same way after your results are returned.
For example:

	$query = mysql_query("select * from `table` ");
	while ($row = mysql_fetch_array($query)){
		$newdate = date_format(strtotime($row[date]), '%b %d');
	}

strtotime will convert a string date to a time stamp.

Other formatting option for date_format()

Specifier	Description
%a	Abbreviated weekday name (Sun..Sat)
%b	Abbreviated month name (Jan..Dec)
%c	Month, numeric (0..12)
%D	Day of the month with English suffix (0th, 1st, 2nd, 3rd, …)
%d	Day of the month, numeric (00..31)
%e	Day of the month, numeric (0..31)
%f	Microseconds (000000..999999)
%H	Hour (00..23)
%h	Hour (01..12)
%I	Hour (01..12)
%i	Minutes, numeric (00..59)
%j	Day of year (001..366)
%k	Hour (0..23)
%l	Hour (1..12)
%M	Month name (January..December)
%m	Month, numeric (00..12)
%p	AM or PM
%r	Time, 12-hour (hh:mm:ss followed by AM or PM)
%S	Seconds (00..59)

edit:
This can also be done using the date function. Something like:

$day = date(“d”,strtotime($row['date']));
$month = date(“M”,strtotime($row['date']));

would give you Mar 03

Creating Checkboxes Based on SQL Results

Mike Maguire — Mon, 22 Sep 2008 02:14:36 +0000

This tutorial will walk you through creating a database of categories and then using the categories in the database to create a series of checkboxes. This could be used for forum or board that will allow them to select a category of their story/comment. Let’s begin.

I will be doing all of this code and execution on my local PC thanks to WAMP Server which can be installed by following Installing a WAMP Server. To get started we will need to create our database. To do this, run the following in your SQL editor:

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
CREATE TABLE `tutorial` (
  `CatID` int(3) NOT NULL auto_increment,
  `Category` varchar(100) NOT NULL,
  PRIMARY KEY  (`CatID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;
INSERT INTO `tutorial` (`CatID`, `Category`) VALUES
(1, 'Cars'),
(2, 'Trucks'),
(3, 'Baseball'),
(4, 'Basketball'),
(5, 'Football'),
(6, 'Houses'),
(7, 'Root Beer'),
(8, 'Gatorade'),
(9, 'Speakers'),
(10, 'Computers'),
(11, 'Databases'),
(12, 'Software');

This will create our table that we will be using for this tutorial. Now we need to create the file that will pull these values to our site and show them in an orderly fashion. Create an index.php in your www root of your WAMP server and open it in your favorite text editor.

This first section of the file simply creates the connection to the database and select all the categories from the table named tutorial (which we just created). It sets all the results to the variable of results. Make sure you change the code to have your databases user name and password in the proper locations. If it receives no results it throws an error and displays it to the browser window. The final thing you see is that we created a variable of cats so that we can keep track of how many items have been inserted.


Select your story topic(s)


Next, we set up our form. Then we create a table so that the items can be aligned properly. 
$row[1]: 
";
	$cats = 1;
}
else
{
	echo "";
	$cats++;
}
}
mysql_free_result($result);
?>
This section so to process everything in the brackets of the “while” clause to be executed until $row (the results returned from our query) contains no information. The first line of the while clause checks to see if this is the third category we have entered since we declared cats to be 1. If it is, it echoes the line after it which shows the category in a column and then ends the row and starts a new one. Otherwise, it just puts the value in a new column and leaves the row tag open and increments the variable by one. This way every third category will be placed on a new row. The final line clears the results from the variable.




$row[1]:

Then we close the final row and end the table. Then we create a couple of breaks and make the submit button to allow the user to submit the values and finally close the form. If you have followed these steps you should get a page similar to this:

If you go into the database and add more items, or change the items in there the page will automatically show your changes without the need to change the code like below:

This concludes this tutorial. We will continue to take this a step further in the next tutorial. If you have any questions, please leave a comment. I hope this was easy to follow and thanks for reading.

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:

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:

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