The Tutorial Blog » ajax

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.

Ajax Helper For CodeIgniter [Video]

Wez Pyke — Wed, 16 Dec 2009 16:59:46 +0000

Blip.tv Page

Link to helper

Twitter

No related posts.

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

ASCIICasts: AJAX History and Bookmarks

Wez Pyke — Sat, 12 Sep 2009 22:30:25 +0000

View full tutorial

In the last episode we added AJAX functionality to a paginated list of products. Instead of acting as normal HTML links, the paginated links had click events added to them via unobtrusive JavaScript so that when clicked they made an AJAX request that updated the main content of the page with a new page of products.

Problems With AJAX

Because we’re using AJAX to update the page the URL doesn’t change when a new page of products is loaded. This means that if we reload the page, or bookmark it and return to it later, the first page of products will be shown no matter what page of products we were on. Another consequence of using AJAX is that changing the page of links we’re viewing doesn’t add the previous page to the browser’s history, so we can’t use the back and forward buttons to move through the pages we’ve just viewed.

So there are disadvantages to our AJAX approach; how can we work around them? That’s what we’ll show you in this episode. Be warned that this episode will be more about JavaScript than Ruby on Rails as the issues we’ll be dealing with are on the client-side.

There are a number of JavaScript libraries we could use to solve this problem. One of the oldest is reallysimplehistory, available on Google code. There is also Yahoo’s Browser History Manager. Yahoo have a number of JavaScript libraries available so it’s worth a look. Another option is Asual’s SWFAddress, which works with Flash as well as JavaScript.

All of the libraries mentioned above work with plain JavaScript, but as we’re using jQuery in our application it would be better if we could find one designed to work with that. Asual, mentioned above, have released a plugin called jQuery Address that would work, but instead we’re going to use a different one called jQuery URL Utils plugin. This plugin has a lot of functionality despite its small size (less than 4KB minified) and comes with good documentation.

Continue reading full tutorial...

No related posts.

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

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.

10 CakePHP Tutorials You Should Read

Wez Pyke — Wed, 15 Jul 2009 23:25:05 +0000

There are a number of frameworks available for PHP such as CodeIgnitor, Zend, Symfony, Kohana and many more. In this article you will find tutorials that I have found on the web that will help PHP programmers that are new to the MVC pattern or CakePHP.

CakePHP is an amazing framework if you know how to use it, but the documentation for CakePHP is quite badly written and can cause confusion for new users. Here are a few links to try and make life easier for new and experienced CakePHP users.

No related posts.

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

The Tutorial Blog » ajax

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

Ajax Helper For CodeIgniter [Video]

ASCIICasts: AJAX History and Bookmarks

Problems With AJAX

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

10 CakePHP Tutorials You Should Read