The Tutorial Blog » PHP

Weekly Recap (14 Feb – 21 Feb)

Wez Pyke — Sun, 21 Feb 2010 15:41:57 +0000

Here is a recap of the posts from this week.

Build a Twitter-like site with CodeIgniter and jQuery Part 2

5 PHP Frameworks you may not know about

Creating a basic iPad application

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

5 PHP Frameworks you may not know about

Wez Pyke — Mon, 15 Feb 2010 14:55:30 +0000

There are many PHP frameworks available for developers to choose from when creating a project. Frameworks such as CodeIgniter, CakePHP, Symfony and Zend are the most popular frameworks used by developers.

In this article I will compile a list of 5 frameworks that many developers may not know of.

Seagull

Supports:

PHP4
PHP5
Multiple Database's
ORM
DB Objects
Templates
Caching
Validation
Ajax
Auth Module
Modules

PHP on TRAX

Supports:

PHP5
Multiple Database's
ORM
DB Objects
Validation
Ajax
Modules

Yii

Supports:

PHP5
Multiple Database's
ORM
DB Objects
Templates
Caching
Validation
Ajax
Auth Module
Modules

Akelos

Supports:

PHP4
PHP5
Multiple Database's
ORM
DB Objects
Templates
Caching
Validation
Ajax
Auth Module
Modules

Prado

Supports:

PHP5
Multiple Database's
ORM
DB Objects
Templates
Caching
Validation
Ajax
Auth Module
Modules

Other frameworks

If there are other frameworks that you know of that you think I have missed then please feel free to post a comment.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

10 Awesome jQuery Tutorials You Should Check Out

Wez Pyke — Mon, 08 Feb 2010 14:02:53 +0000

jQuery is a great tool that everyone in web development should be using to make the functionality of their websites better, it's easy of use and good documentation is what makes jQuery such a successful framework. Although the documentation is good there are still a lot of tutorials out there that you should check out.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

PHP gallery with no page reloads using jQuery

Wez Pyke — Wed, 23 Dec 2009 18:02:09 +0000

For this tutorial we will be using the ImgBrowz0r class for the backend of the gallery, we will then write a jQuery script so that we can browse through the gallery created by ImgBrowz0r without no page reloads and a nice effect between page requests so the user knows the page has changed. We will also be using the prettyPhoto plugin for jQuery to open up the actual images.

Getting ImgBrowz0r and prettyPhoto to work

The first thing I done was create a folder called jquery_gallery inside here is where all the files and folders are gonna be stored. I then created 4 folders inside jquery_gallery, the folders are called css, images, inc and js.

When you have downloaded the ImgBrowz0r class, copy the file into the inc folder.

Now inside the images folder create 2 folders cache and gallery. After you have unzipped prettyPhoto goto the images folder and inside the images folder copy the folder named prettyPhoto to our image folder. There should now be 3 folders inside our images folder cache, gallery and prettyPhoto.

Inside our css folder that we have created we will copy the css file from the prettyPhoto css folder named prettyPhoto.css.

The last thing to do for prettyPhoto is to copy the javascript file from the prettyPhoto js folder to our js folder.

So now we should have a file structure like so:
|css
|--prettyPhoto.css

|images
|--cache
|--gallery
|--prettyPhoto

|inc
|--imgbrowz0r.php

|js
|--jquery.prettyPhoto.js

We need to also create a css file for our imgBrowz0r class, create a css file inside our css folder and name it gallery.css. Copy the code into this file that is below:

strong { font-weight: bold }
 
	/* This is some example CSS. You can change this to your own liking. */
	.img-description, .imgbrowz0r-navigation, #imgbrowz0r { margin: 0 auto;width: 970px;text-align: left }
	.imgbrowz0r-navigation { padding: 1.5em 0 0.5em }
	.imgbrowz0r-navigation .img-statistics { margin-top: 1.5em }
 
	.img-description { margin: 1.5em auto 0 }
 
	#imgbrowz0r .img-row { padding: 0 1em }
	#imgbrowz0r .img-directory a:link,
	#imgbrowz0r .img-directory a:visited { font-family: Georgia, "Times New Roman", Times, serif;text-decoration: none }
 
	#imgbrowz0r .img-thumbnail a:link img,
	#imgbrowz0r .img-thumbnail a:visited img { border: 1px solid #000 }
	#imgbrowz0r .img-thumbnail a:hover img,
	#imgbrowz0r .img-thumbnail a:active img { border-color: #fff }
 
	#imgbrowz0r .img-directory a:link,
	#imgbrowz0r .img-directory a:visited { background-color: #000;border: 1px solid #000;font-size: 1.5em;color: #ccc }
	#imgbrowz0r .img-directory a:hover,
	#imgbrowz0r .img-directory a:active { border-color: #fff;color: #fff }
 
	#imgbrowz0r .img-directory span.img-dir-name,
	#imgbrowz0r .img-directory span.img-thumb-date { display: block }
	#imgbrowz0r .img-directory span.img-dir-name { font-weight: bold;font-size: 1.2em }
 
	#imgbrowz0r .img-thumbnail a,
	#imgbrowz0r .img-directory a { display: block;margin: 0 auto;width: 200px }
 
	#imgbrowz0r .img-thumbnail,
	#imgbrowz0r .img-directory { float: left;padding: 1.5em 0;width: 25%;text-align: center }
	#imgbrowz0r .img-column-1 { clear: left }
 
	#imgbrowz0r .img-directory a:link,
	#imgbrowz0r .img-directory a:visited { height: 160px;line-height: 150px;
					       background-repeat: no-repeat;background-position: 50% 50% }
 
	/* http://sonspring.com/journal/clearing-floats */
	html body div.clear,
	html body span.clear { background: none;border: 0;clear: both;display: block;float: none;font-size: 0;list-style: none;
			       margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0 }

Create a file called index.php in the root of our folder and copy in the basic html.




	
	TheTutorialBlog.com | Photo Gallery

Inside the div called content_main is where our the ImgBrowz0r class code will go.


require('inc/imgbrowz0r.php');
// These are all settings (set to default). The settings are not validated since you have to configure everything.
// There is a chance that ImgBrowz0r stops working if you enter the wrong values.
$config = array(
	// Directory settings. These are required. Without trailing slash. (required)
	'images_dir'               => 'images/gallery',
	'cache_dir'                => 'images/cache',
 
	// Url settings. These are required. Without trailing slash. (required)
	// %PATH% is replaced with the directory location and page number
	'main_url'                 => 'http://localhost:8888/tutorials/jquery_gallery/index.php?q=%PATH%',
	'images_url'               => 'http:///localhost:8888/tutorials/jquery_gallery/images/gallery',
	'cache_url'                => 'http:///localhost:8888/tutorials/jquery_gallery/images/cache',
 
	// Sorting settings (optional)
	'sort_by'                  => 3, // 1 = filename, 2 = extension (png, gif, etc.), 3 = inode change time of file
	'sort_order'               => false, // true = ascending, false = descending
 
	// Thumbnail settings (optional)
	'thumbs_per_page'          => 12, // Amount of thumbnails per page
	'max_thumb_row'            => 4, // Amount of thumbnails on a row
	'max_thumb_width'          => 200, // Maximum width of thumbnail
	'max_thumb_height'         => 200, // Maximum height of thumbnail
 
	// Time settings (optional)
	'time_format'              => 'F jS, Y', // Date formatting. Look at the PHP date() for help: http://nl3.php.net/manual/en/function.date.php
	'time_zone'                => 0, // Timezone. Example: 1
	'enable_dst'               => false, // Daylight saving time (DST). Set this to true to enable it.
 
	// Misc settings (optional)
	'ignore_port'              => false, // Ignore port in url. Set this to true to ignore the port.
	'dir_thumbs'               => true, // Show a thumbnail in a category box. Default is false.
	'random_thumbs'            => false, // Use random thumbnails for categories. Default is false.
	'read_thumb_limit'         => 0 // See README for information about this setting.
	);
 
// Start the class
$gallery = new imgbrowz0r($config);
 
 
// Prepare everything. This function must be called before you call other functions.
$gallery->init();
 
// Generate navigation and statistics
$gallery_breadcrumbs = $gallery->breadcrumbs();
$gallery_pagination = $gallery->pagination();
 
 
// Display navigation
echo '', "\n\t", $gallery_breadcrumbs, "\n\t", $gallery_pagination, "\n\t\n", '
', "\n\n";
 
// Display images and directories
echo $gallery->browse();
 
// Display navigation
echo '', "\n\t", $gallery_pagination, "\n\t", $gallery_breadcrumbs, "\n", '
', "\n\n";
?>

Fill in the information for the main_url, images_url and cache_url or it will not work.

In the imgBrowz0r.php file located in inc find line number 205 and add a rel called prettyPhoto:

'/', $this->cur_directory, $file[1], '" title="', $file[1], '" rel="prettyPhoto">, $this->config['cache_url'],

If we do not do this then the jQuery prettyPhoto plugin will not work.

Navigating through the gallery without page reloads

To do this we need to write our own jQuery code so that when a hyperlink inside the gallery div then we will do an ajax call that will then replace the content in the content_main div.

$('.img-directory a').click(function(){
	$.get($(this).attr("href"), function(data){
		$("#content_main").slideUp("slow", function(){
		$("#content_main").html(data)}), $("#content_main").slideDown()
	});
	return false;
})

So when a hyperlink inside the a div with the class called img-directory is clicked we will get the href from the hyperlink and retrieve that page using $.get(). We will then slide up the element until the content has loaded and then the elemnt will slide back down and contain the content we requested. We also return false so that the page does not reload.

We do the same for the breadcrumbs so we can navigate between them without the page refreshing also:

$('.img-breadcrumbs').click(function(){
	$.get($(this).attr("href"), function(data){
		$("#content_main").slideUp("slow", function(){
		$("#content_main").html(data)}), $("#content_main").slideDown()
	});
	return false;
});

The entire index.php page should look like so:




	
	TheTutorialBlog.com | Photo Gallery
	
	
	
	
	
 
	



require('inc/imgbrowz0r.php');
// These are all settings (set to default). The settings are not validated since you have to configure everything.
// There is a chance that ImgBrowz0r stops working if you enter the wrong values.
$config = array(
	// Directory settings. These are required. Without trailing slash. (required)
	'images_dir'               => 'images/gallery',
	'cache_dir'                => 'images/cache',
 
	// Url settings. These are required. Without trailing slash. (required)
	// %PATH% is replaced with the directory location and page number
	'main_url'                 => 'http://localhost:8888/tutorials/jquery_gallery/index.php?q=%PATH%',
	'images_url'               => 'http:///localhost:8888/tutorials/jquery_gallery/images/gallery',
	'cache_url'                => 'http:///localhost:8888/tutorials/jquery_gallery/images/cache',
 
	// Sorting settings (optional)
	'sort_by'                  => 3, // 1 = filename, 2 = extension (png, gif, etc.), 3 = inode change time of file
	'sort_order'               => false, // true = ascending, false = descending
 
	// Thumbnail settings (optional)
	'thumbs_per_page'          => 12, // Amount of thumbnails per page
	'max_thumb_row'            => 4, // Amount of thumbnails on a row
	'max_thumb_width'          => 200, // Maximum width of thumbnail
	'max_thumb_height'         => 200, // Maximum height of thumbnail
 
	// Time settings (optional)
	'time_format'              => 'F jS, Y', // Date formatting. Look at the PHP date() for help: http://nl3.php.net/manual/en/function.date.php
	'time_zone'                => 0, // Timezone. Example: 1
	'enable_dst'               => false, // Daylight saving time (DST). Set this to true to enable it.
 
	// Misc settings (optional)
	'ignore_port'              => false, // Ignore port in url. Set this to true to ignore the port.
	'dir_thumbs'               => true, // Show a thumbnail in a category box. Default is false.
	'random_thumbs'            => false, // Use random thumbnails for categories. Default is false.
	'read_thumb_limit'         => 0 // See README for information about this setting.
	);
 
// Start the class
$gallery = new imgbrowz0r($config);
 
 
// Prepare everything. This function must be called before you call other functions.
$gallery->init();
 
// Generate navigation and statistics
$gallery_breadcrumbs = $gallery->breadcrumbs();
$gallery_pagination = $gallery->pagination();
 
 
?>
 


// Display navigation
echo '', "\n\t", $gallery_breadcrumbs, "\n\t", $gallery_pagination, "\n\t\n", '
', "\n\n";
 
// Display images and directories
echo $gallery->browse();
 
// Display navigation
echo '', "\n\t", $gallery_pagination, "\n\t", $gallery_breadcrumbs, "\n", '
', "\n\n";
?>

Download

You can download the files used in this tutorial here

Final words

I hope this tutorial has been useful for you and that you can take something you have learnt from it and use it in future projects.

Please feel free to leave a comment.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Useful websites and resources for learning CodeIgniter

Wez Pyke — Sun, 06 Dec 2009 02:01:55 +0000

Frameworks are becoming more and more popular because of the useful pre-built functions and organization of how files are meant to be stored and used.

Here is a shortlist of 10 resources that should be useful for beginners looking to learn CodeIgniter.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Uploading files to Rackspace Cloud (Mosso) using PHP API

Wez Pyke — Tue, 01 Dec 2009 00:39:45 +0000

Rackspace Cloud is a great VPS service, but when I recently done a project it needed the functionality of uploading directly from a website to the cloud. I did not find many tutorials on how to do this, so I thought I'd write a tutorial on it myself.

Step 1: Download the required files

The files you will need for this are located at the Rackspace Cloud website here. You can download the API for PHP, Java, Python, .NET and Ruby. But for this tutorial we will be using PHP.

Step 2: Setup

When the download of the PHP API has complete decompress the file and rename it to cloudfiles. Now place the folder named cloudfiles in the directory where the PHP files will be stored that will upload to the Rackspace Cloud.

Step 3: Create an upload form

For this tutorial we will only be creating a basic upload form, but I have planned for a more advanced uploader with a progress bar and multiple file uploads for a future tutorial, so be sure to check back for that.


File:

Name this file upload.html

Step 4: Uploading to Rackspace Cloud

So what we need to do to upload to the Rackspace cloud is to include the PHP API, connect to Rackspace, get the container we want to use, create an object and then upload the file to that object.


// include the API
require('cloudfiles/cloudfiles.php');
 
// cloud info
$username = ""; // username
$key = ""; // api key
 
// Connect to Rackspace
$auth = new CF_Authentication($username, $key);
$auth->authenticate();
$conn = new CF_Connection($auth);
 
// Get the container we want to use
$container = $conn->get_container('ContainerName');
 
// store file information
$localfile = $_FILES['upload']['tmp_name'];
$filename = $_FILES['upload']['name'];
 
// upload file to Rackspace
$object = $container->create_object($filename);
$object->load_from_filename($localfile);
?>

Name this file upload.php.

Download

You can download the source files from here

Send form data to PHP without the whole page reloading using jQuery

Wez Pyke — Tue, 08 Sep 2009 00:43:14 +0000

This is my screencast for the Nettuts/Screenr screencast competition. I feel as though I rushed it because I had to do it under 5 minutes but I hope you learn a thing or two from it.

Source Files

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

PHP Contact Form

Wez Pyke — Tue, 21 Jul 2009 17:35:32 +0000

Every website needs a way of contacting the people behind it and putting an email on a page is not such a good idea; because bots can easily pick up this email address and send spam to it. This is where a contact form comes in very useful because people can send you messages but do not get your email address.

For a contact form the first thing that we need to do is to create a form using HTML so that they can input their information and message that they are going to send.


	Name:  

	Email:  

	Message:

When the press send it will then go to a page called send_message.php. This page will grab the information that they input and send it to an email address using the mail() function in PHP.


$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
 
$to = 'your_address@your_email.com';
$subject = "New message from $name";
 
mail($to, $subject, $message, "From: $email");
echo "Message sent";
?>

We need to check that the sender of the message is human so we will add a simple math question to the bottom of our form.


 
	$num_one = rand() % 10;
	$num_two = rand() & 10;
	$final_num = $num_one + $num_two;
	$_SESSION['answer'] = $final_num;
	echo $num_one . ' + ' . $num_two . ' = ';
	?>

Don't forget to add


session_start();
?>

To the top of the page or we will get errors.

Now we check to see if they have entered information into every field and that the answer to the math question is correct, if it is the message will be sent otherwise an error will be returned.

All the code for the form is:


session_start();
?>

	Name:  

	Email:  

	Message:  

    
 
	$num_one = rand() % 10;
	$num_two = rand() & 10;
	$final_num = $num_one + $num_two;
	$_SESSION['answer'] = $final_num;
	echo $num_one . ' + ' . $num_two . ' = ';
	?>

All the code for error checking and sending the message is:


session_start();
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$user_answer = $_POST['answer'];
$real_answer = $_SESSION['answer'];
 
$to = 'your_address@your_email.com';
$subject = "New message from $name";
 
if(empty($name) OR empty($email) OR empty($message)) {
	echo "Fill in all fields.";
} elseif($user_answer != $real_answer) {
	echo "Math question was incorrect, please try again";
} else {
	mail($to, $subject, $message, "From: $email");
	echo "Message sent";
}
?>

You can download the source code for this tutorial here.

Please leave your comments and suggestions below for this tutorial.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

PHP Class for Google Maps API

Wez Pyke — Mon, 20 Jul 2009 15:18:06 +0000

A few days ago I was developing a website for a client. They required that there be a map showing where addresses are that were retrieved from a database. I have never properly looked at the Google Maps API before because I have never needed to use it; so for the first time I looked at it and gave it a try. Then after playing around with it for a bit i realised that reverse geocoding was needed to convert the address into latitude and longitude figures.

Because I was programming this website in PHP I thought I would have a look around for a PHP class to see if there was a quicker way of doing this. Luckily enough I found a PHP class called PHP GoogleMapAPI. It took me a few minutes to read through the documentation for this class but it was so straight forward and simple. All in all it takes only 6 lines of code using this class to create a google map and locate it to an address; because it does all the other work for you that you don't need to know about if you're not going to be programming Google Maps every day of your life.

Implementing Google Maps on your website

The first thing you need to do is go to the website and download the class. Then copy it into the directory where you keep your classes stored on your server.

When you have downloaded the class, it then needs to be included in the file that we want to show the map in. At the top of your file insert the code below.


require('GoogleMapAPI.class.php');
$map = new GoogleMapAPI('map');
 
// enter YOUR Google Map Key
$map->setAPIKey('YOURGOOGLEMAPKEY');
 
$map->addMarkerByAddress('621 N 48th St # 6 Lincoln NE 68502','Our Address','Our Address');
 
<body onload="onLoad()">
 
     $map->printMap(); ?>

What we are doing here is including the class with the require function in PHP. If the class fails to be included then the rest of the page will stop executing.
We then create a new instance of the class and then we insert.

If you have a Google Maps API key then insert it where it says 'YOURGOOGLEMAPKEY'. If you do not have one you can get one from here.

The function below adds a marker to the address you would like and centers it. This function takes 3 parameters; the address, a title and html.

$map->addMarkerByAddress();

We then need to include the onLoad function so that it knows to load the map on this page.

The last function that we add is

 $map->printMap(); ?>

Wherever you insert this function is where the map will be displayed on the page.

Let us know

I hope this tutorial has been useful and you have learned something new from it. Feel free to post a comment below and share your experience with this class or the Google Maps API.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

A Basic PHP Statistics Script

Wez Pyke — Sun, 08 Mar 2009 23:08:01 +0000

In this tutorial you will learn about writing information to a text file and then retrieving the information you wrote to the text file. Retrieving the files that are in a directory and about arrays.

This is a quite basic script and there isn't much to write about it so if there is something that you don't understand look the function up within the PHP manual online.

Step 1

In the first step we are going to get the current page that we are at and store it within a variable. The information in that variable will then be wrote to a file called stats.txt.

Include the following code in the pages that you want the number of visits to be counted for. If you have a file such as a header file than put this code in there.


 
// write current page to stats file
$cur_page = $_SERVER['REQUEST_URI'];
if(empty($cur_page)) {
	$cur_page = 'index.php';
}
$file = fopen("stats.txt", "a+");
fwrite($file, $cur_page . "\n");
fclose($file);
 
?>

Step 2

The next piece of code that we are going to write is going to retrieve the information in stats.txt and put it into an array. We then use the function array_count_values to see how many times the page url occurs. We also retrieve the files in the directory which this script is in to compare them with the files in stats.txt.


 
$file = fopen("stats.txt", "r");
$files = scandir('./');
$num_files = array();
while(!feof($file)){
	$line = fgets($file);
	$line = substr($line, 1, -1);
	$line = explode(",", $line);
	array_push($num_files, $line[0]);
}
 
 
$num_cv = array_count_values($num_files);
 
foreach($num_cv as $f => $c) {
	echo 'file: ' . $f . ' - ' . $c . '
';
}
 
?>

If you have any other alternatives or need any help then feel free to post a comment.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

The Tutorial Blog » PHP

Weekly Recap (14 Feb – 21 Feb)

5 PHP Frameworks you may not know about

Other frameworks

10 Awesome jQuery Tutorials You Should Check Out

PHP gallery with no page reloads using jQuery

Getting ImgBrowz0r and prettyPhoto to work

Navigating through the gallery without page reloads

Download

Final words

Useful websites and resources for learning CodeIgniter

Uploading files to Rackspace Cloud (Mosso) using PHP API

Step 1: Download the required files

Step 2: Setup

Step 3: Create an upload form

Step 4: Uploading to Rackspace Cloud

Download

Post a comment

Send form data to PHP without the whole page reloading using jQuery

PHP Contact Form

PHP Class for Google Maps API

Implementing Google Maps on your website

Let us know

A Basic PHP Statistics Script

Step 1

Step 2