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

Posts from this week Here is a list of posts from this week if...
10 Awesome jQuery Tutorials You Should Check Out jQuery is a great tool that everyone in web development...
Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...

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.

Useful websites and resources for learning CodeIgniter Frameworks are becoming more and more popular because of the...
Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...
Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...

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.

PHP gallery with no page reloads using jQuery For this tutorial we will be using the ImgBrowz0r class...
Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...
Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...

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.

Twitter-like pagination using CakePHP and jQuery I have already done this tutorial with CodeIgniter and jQuery...
Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...
Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...

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.

Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...
Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...
10 Awesome jQuery Tutorials You Should Check Out jQuery is a great tool that everyone in web development...

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

PHP gallery with no page reloads using jQuery For this tutorial we will be using the ImgBrowz0r class...
10 Awesome jQuery Tutorials You Should Check Out jQuery is a great tool that everyone in web development...
Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...

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

The Tutorial Blog » PHP

Weekly Recap (14 Feb – 21 Feb)

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

5 PHP Frameworks you may not know about

Creating a basic iPad application

5 PHP Frameworks you may not know about

Seagull

PHP on TRAX

Yii

Akelos

Prado

Other frameworks

10 Awesome jQuery Tutorials You Should Check Out

Quick Tip: Resolving conflicting problems between jQuery and MooTools or any other Javascript library

Twitter-like pagination using CodeIgniter and jQuery

PHP gallery with no page reloads using jQuery

jQuery Dropdown Suggestions

Twitter-like pagination using CakePHP and jQuery

Create a Scrolling Menu with CSS and jQuery

jQuery and Google Maps Tutorial

How to Mimic the iGoogle Interface

jQuery Infinite Carousel

Create a Digg-style post sharing tool with jQuery

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