Okada Design Blog » zend

Zend framework Flickr class on Codeignier with jquery

shinokada — Sun, 29 Nov 2009 09:17:59 +0000

This file does not contain CI core and Zend framework.
You can download the previous files and add to it.

This is an extension of using Zend_Service_Flickr from this post.

Download Files

The previous post has a very plain display, so this time I added minimum style and used jquery tools scrollable for slide effects.

Goals

Index page has a form with search word and number of image input field.

If a visitor did not enter any search word, then a warning message “All fields are required . Please try again!” will be displayed.

If only a search word is input, then 20 images will be displayed and message will tell the item searched and number of images.

The default image will be fish and number of image will be 20.

Set up

I created a folder called ci_zend_flickr in c:\xampp\htdocs\.

Note for Mac user: Please open application/helpers/zend_framework_helper.php and comment out Windows part and uncomment the other part.

If you don’t have this file, you need to download the file from the previous post here.

Zend Framework

Please follow this post to set up Zend framework on Codeigniter or download the file from the previous post here

Config

system/application/config/autoload.php

Autoload Zend Framework.

$autoload['helper'] = array('zend_framework');

system/application/config/config.php

Change your base_url to suit your structure.
Add your Flickr API key here. The details of Flickr API key is here.

$config['base_url']	= "http://127.0.0.1/ci_zend_flickr/";
...
...
$config['flickr_api_key'] = 'your api key here';

Controller

system/application/controllers/flickr3.php

flickrapikey = $this->config->item('flickr_api_key');
        Zend_Loader::loadClass('Zend_Service_Flickr');
        $this->load->helper(array('form', 'url'));
	$this->load->library('form_validation','session');

    }

    function index()
    {
    $flickr = new Zend_Service_Flickr($this->flickrapikey);
    $query =array("fish");
    $options = array(
        'tag_mode' => 'or',
        'per_page' => 20
        );
    $results = $flickr->tagSearch($query,$options);
   $message ="";
   $data['message']=$message;
    $data['results']=$results;
    $data['word']=$query;
    $data['imgnum']= 20;
    $data['title']='ZF on CI: Flickr';
    $data['main']='flickr_view3';
    $this->load->view('template', $data);
    }

    function flickrsearch()
    {
    $flickr = new Zend_Service_Flickr($this->flickrapikey);
    $perpage = $this->input->post('search');
    $imgnum = $this->input->post('imgnum');
    $this->form_validation->set_rules('search', 'Search', 'required');
    $this->form_validation->set_rules('imgnum', 'Images', 'is_natural');

    	if ($this->form_validation->run() == FALSE)
		{
		     $this->session->set_flashdata('index_msg', 'All fields are required . Please try again!');
		    redirect('flickr3/index');

		}
		else
		{
		$query =array($perpage);

                if (!is_numeric($imgnum)){
                $imgnum = 20;}

               $options = array(
               'per_page' => $imgnum
                );
               $results = $flickr->tagSearch($query,$options);
               $data['results']=$results;
               $data['title']='ZF on CI: Flickr';
               $data['main']='flickr_view3';
               $message ="You are searching for \"".$perpage. "\"
You are searching for ". $imgnum . " images";
               $data['message']= $message;
               $this->load->view('template', $data);
		}
         }
}
?>

The constructor loads the Flickr API key, Zend framework, necessary helpers and libraries.
This time I am using form helper which will be used in a view file, and form_validation which will be used in this controller and session. I am using session for CI’s flashdata.

In index class, create a new object of Zend_Service_Flickr with the Flickr API key as a parameter.
Set a variable $query to fish. You can change it as you like. This will be needed for loading a website first time.
Tag mode and number of images options are added. If you open Zend/Service/Flickr.php or see here, you will see different options which can be set.

A variable message is set. This will be needed later to display the search details.
Then all other data are stored.
I am loading view/template. In this template, it has a $main variable and flickr_view3 is set to it as well.

$data['main']='flickr_view3';
$this->load->view('template', $data);

A method flickrsearch will take inputs from the form. Search and imgnum will be stored to their variables, and form_validation rules are set.

If this form validation gives a false, then flashdata is set to index_msg, and redired to index.
Otherwise a query will be set. In case if number is not set, 20 is set as default here as well.

When it is successful, a message valiable $message is set and inform the word and number of image searched.

Views

system/application/views/template.php





  
  <?php echo $title; ?>
  






	
        







  
  load->view('header');?>
  

  
  load->view('navigation');?>
  

  
  load->view($main);?>
  

  
  load->view('footer');?>

All the necessary style sheets and jquery tools are added in the head section. You can find details of different set ups here.

Note:

load->view('header');?>

This code will load header.php in the views folder.

Other view php

system/application/views/header.php
system/application/views/navigation.php
system/application/views/footer.php

These files have nothing at the moment. But you are free to add any codes.

system/application/views/flickr_view3.php

Zend Framework on Codeigniter: Flickr

session->flashdata('index_msg')){
	echo "";
	echo $this->session->flashdata('index_msg');
	echo "";
}
if ($message){
  echo "";
	echo $message;
	echo "";
}
echo form_open('flickr3/flickrsearch');

$data = array(
              'name'        => 'search',
              'id'          => 'search',
              'value'       => '',
              'maxlength'   => '100',
              'size'        => '50',
            );
echo "\nEnter search words\n";
echo form_input($data)."\n";
echo "
\nEnter number of images\n";
$data = array(
              'name'        => 'imgnum',
              'id'          => 'imgnum',
              'value'       => '',
              'maxlength'   => '20',
              'size'        => '30',
            );
echo form_input($data)."\n";
echo form_submit('submit', 'Submit')."\n";

echo form_close()."\n";
?>












	
	

uri.'" />'."\n";
            }

?>

Divs for flashdata and message are added at the beginning. Since we loaded the form helper in our controller, form_open and other function are used for this form.

For example

echo form_open('flickr3/flickrsearch');

This will output the following html.

From , they are for jquery tools scrollable.

foreach function is used to show all the images.

If you wish to display other properties, please see Zend framework manual here.

CSS style sheets

The minimum style is added.

body {
	background-color: #AFAFAF;

}

#wrapper {
	width: 780px;
	margin: auto;
	background-color: #fff;
	padding: 15px 30px;
}

h1 {
	font-size:28px;
	color:#333;

}

h2 {
	font-size:24px;
	color:#333;

}
p {
	font-size: 18px;

}
#main {

	margin-bottom: 100px;
}

#search {

	margin: 0;

}
.flashmessage {
	font-size: 20px;
	color: red;
}

.message {

	color: blue;
	font-size: 20px;
}

You can find all other style sheets for the scrollable in CSS folder. Please download the source.

Test Drive

Now you go to http://127.0.0.1/ci_zend_flickr/index.php/.
Type in any word and number and click Submit.

Type in any word and no numbers. It will show 20 images.

Type no word or numbers and click Submit. It will show a warning.

You can type more than one words, i.e. dog, cat, cow.

Conclusion

It looks better than the first trial. However a big problem lies in loading speed.
It takes too much time to fetch images from Flickr and load to a page.
Any suggestion on this point will be appreciate it.

Zend Framework on Codeigniter: Youtube

shinokada — Sat, 21 Nov 2009 22:28:47 +0000

This post is about how to use Zend Framework on Codeigniter to show Youtube videos.

Download

Note:

The download file is set up for Windows. If you are not using Windows, then open application/helpers/zend_framework_helper.php and comment out Windows part and uncomment the other part.

Implement Zend Framework in Codeigniter

First you have to implement Zend Framework in Codeigniter. Please read this post.

Controller/youtube2.php

Create a file and add the following code.

_youTube = new Zend_Gdata_YouTube;
    }

function index(){
      // Gets playlists
    $data['playlistfeed']= $this->_youTube->getPlaylistListFeed('NationalGeographic');
    $this->load->view ('youtube_view2',$data);
    }

public function listAction(){
    // Gets playlist videos
    $playlistId = $this->uri->segment(4);
    $query = $this->_youTube->newVideoQuery(
    'http://gdata.youtube.com/feeds/playlists/' . $playlistId);
    $data['videoFeed']= $this->_youTube->getVideoFeed($query);
    $this->load->view('listaction_view', $data);
    }

public function viewAction(){
    // Gets video
    $videoId = $this->uri->segment(4);
    $data['videoId'] = $this->uri->segment(4);
    $data['videoEntry'] = $this->_youTube->getVideoEntry($videoId);
    $this->load->view('youtube_video_view', $data);
    }
}

Firstly I am adding a protected variable $_youTube.
In the constructor, I load the class Zend_Gdata_Youtube, and create a new object.

In the function index, I add a variable playlistfeed and send it to a view called youtube_view2 which I am going to create it shortly.

I am going to collect National geographic videos in this case. You can change it as you wish.

views/youtube_view2.php

Create a file and add the following code.




  
  Video lists



National Geographic Videos on Youtube


getPlaylistVideoFeedUrl(), '/'
), 1); >


title->text; >


description->text; >

This will output the following html.

...
National Geographic Videos on Youtube



Oceans


Explore the beauty of the world's oceans.


Animal Attack!

...
...

When you click a link, it will take you listAction() function in youtube2 class and the fourth segment will be used as id in that class.

views/listaction_view.php

Create a file and add the following code.




  
  Youtube Video Details




National Geographic Videos on Youtube. Videos about title->text; >


getFlashPlayerUrl(), '/'),
1); >


    
        mediaGroup->title->text; >


    



mediaGroup->description->text. "

"; >

This listAction() function outputs the following html.

...
National Geographic Videos on Youtube. Videos about Oceans



    
        Video Title: Feeding Frenzy: Manta Rays in the Maldives

    Watch Video


When tide and current turn a tiny bay into a bowl of plankton, manta rays in the Maldives gather for a roiling, whirling feast.

Video id: yihoIvUBDM4?f=playlists&amp;app=youtube_gdata



    
        Video Title: Penguins vs. Pelicans

    Watch Video


...
...

The links will take you to youtube2 viewAction () function with Youtube video identifier.
The viewAction() function will take the forth segment and show a video in the next step.

views/youtube_video_view.php

Create a file and add the following code.




  
  Watch: Youtube Videos




mediaGroup->title->text; >




&amp;rel=0"
type="application/x-shockwave-flash"
wmode="transparent" width="425" height="355">

This view outputs the following html.

...
Feeding Frenzy: Manta Rays in the Maldives







...
...

How to implement Zend Framework with Codeigniter

shinokada — Sat, 21 Nov 2009 12:14:58 +0000

Download Files

There are quite few posts how to use Zend framework in Codeigniter.

However none of them worked on my XAMPP. I thought there might be some who are struggling to use Zend frame work on Windows. Here is how I did.

Here you can read why they don’t work with Windows.

Adding Zend Framework

Here you can read how to add Zend Framework. And I use this structure for this post.

You need to create a folder ../system/contrib/ and add Zend folders in this folder.

../system/
         contrib/
               Zend/
                     Acl/
                     Acl.php
                     Amf/
                     Amf.php ...

Create a file system/application/helpers/zend_framework_helper.php and add the following.

If you are not using Windows, then add the following instead.

ini_set("include_path", ini_get("include_path").PATH_SEPARATOR.BASEPATH."/contrib/");
require_once 'Zend/Loader.php';

Adding it in autoload.php

Open config/autoload.php and add the following.

$autoload['helper'] = array('zend_framework');

Using Zend in Codeigniter

Now you can load any Zend class by adding Zend_Loader::loadClass(‘ZEND-CLASS-HERE’);.
You can see all the Zend classes here. http://framework.zend.com/manual/en/

Here are three examples.

Zend_Service_Flickr

Create a file controllers/flickr.php and add the following.

tagSearch("cat");
if ($results->totalResults() > 0)
{

foreach ($results as $result)
{
echo 'Square->uri.'" />';
}

}
else
{
echo 'No Results Found.';
}
}
catch (Zend_Service_Exception $e)
{
echo 'An error occured, please try again later. (' .$e->getMessage(). ')';
}

}
}

?>

Don’t forget to change ADD-YOUR-KEY-HERE to your Flickr key.
If you don’t have one, get it from here.
Then visit your controller, http://127.0.0.1/codeigniter/index.php/flickr to see the result.

Using Zend_Gdata_YouTube

Create another file controllers/youtube.php and add the following.

newVideoQuery();
    $query->videoQuery = 'cat';
    $query->startIndex = 10;
    $query->maxResults = 20;
    $query->orderBy = 'viewCount';

    $data['queryurl'] =  $query->queryUrl;
    $data['videofeed'] =  $youtube->getVideoFeed($query);
    $this->load->view('youtube_view', $data);
  }
}

?>

views/youtube_view.php

Create this file and add the following.

";
    echo "Title: " . $videoEntry->getVideoTitle() . "
";
    echo "\nDescription:
";
    echo $videoEntry->getVideoDescription();
    echo "

";
}
?>

Then visit a new page http://127.0.0.1/codeigniter/index.php/youtube to the result.

Using Google calendar

Create controller/googlecalendar.php and add the following. Use your google email and password.

getCalendarListFeed();
} catch (Zend_Gdata_App_Exception $e) {
    echo "Error: " . $e->getMessage();
}
echo "Calendar List Feed";
echo "";
foreach ($listFeed as $calendar) {
    echo "" . $calendar->title .
         " (Event Feed: " . $calendar->id . ")";
}
echo "";
}
}
?>

Then again visit http://127.0.0.1/codeigniter/googlecalendar.

Download Files

Zend framework Youtube class on Codeigniter with jquery

shinokada — Sun, 01 Nov 2009 06:20:50 +0000

Download

This does not contain Codeigniter or Zend framework. If you need them please download it from here.

Introduction

The previous post “Zend Framework on Codeigniter: Youtube” involved three steps to see a video. And it did not have any style.

Goals

I will reduce it to two steps, add a minimum styling and use jquery tools scrollable.

The default videos in a scrollabe screen will be three.

Resources

Jquery Tools Scrollable: I am using a vertical scrollabe this time.
Zend Framework Youtube class
Codeigniter

Config

system/application/config/autoload.php

$autoload['helper'] = array('zend_framework', 'url');

Autoload the zend_framework and url.

system/application/config/config.php

$config['base_url']	="http://127.0.0.1/ci_zend_youtube/";

Add your base url here.

Controller

system/application/controllers/yt_scroll.php

_youTube = new Zend_Gdata_YouTube;

    }

function index(){

    // Gets playlists
    $data['playlistfeed']= $this->_youTube->getPlaylistListFeed('NationalGeographic');
    $this->load->view ('youtube_view3',$data);
    }

public function listAction(){
    // Gets playlist videos

    $playlistId = $this->uri->segment(4);
    $query = $this->_youTube->newVideoQuery(
    'http://gdata.youtube.com/feeds/playlists/' . $playlistId);
    $data['videoFeed']= $this->_youTube->getVideoFeed($query);
    $this->load->view('listaction2_view', $data);
    }

}

Contructor

A variable $_youTube is created with protected.
Constructor function loads Zend_Gdata_YouTube with Zend_Loader.
And a new object is created.

Index () function

PlaylistListFeed of National Geographic is stored in playlistfeed and this will be loaded in youtube_view3.

listAction () function

The fourth segment of uri will be used for $playlistId.
Query is stored to $query and videofeed will be in

View

system/application/views/youtube_view3.php




  
  Video lists
 
 



    
National Geographic Videos on Youtube


getPlaylistVideoFeedUrl(), '/'
), 1); ?>


title->text; ?>




description->text; ?>

Conclusion

You can add a form to submit the video subject like I did for Flickr. You may want to add this to your side column. Pagenation can be added to this.