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.
<?php
// For Windows
ini_set("include_path", ini_get("include_path").PATH_SEPARATOR.str_replace("/", "\\", BASEPATH)."contrib\\");
require_once ('Zend/Loader.php');
// For Non-Windows
/*
ini_set("include_path", ini_get("include_path").PATH_SEPARATOR.BASEPATH."/contrib/");
require_once 'Zend/Loader.php';
*/
?>
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
<?php
class Flickr3 extends Controller{
protected $flickrapikey;
protected $flickemail='youremail here';
function __construct() {
parent::Controller();
$this->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. "\"<br />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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo $title; ?></title>
<base href="<?=base_url();?>">
<link rel="stylesheet" type="text/css" href="<?=base_url();?>css/default.css" />
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-buttons.css" />
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-navigator.css" />
<!-- Full version of jQuery Tools + jQuery 1.3.2 -->
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(document).ready(function() {
// heeeeeeeeeeere we go.
$("#chained").scrollable({hoverClass: 'hover'}).circular().navigator().mousewheel().autoscroll({
steps: 1,
interval: 3000
});
});
</script>
<style>
.scrollable img {
width:100px;
margin:20px 5px 20px 21px;
}
.scrollable img.hover {
background-color:#123;
}
</style>
<noscript>
Javascript is not enabled! Please turn on Javascript to use this site.
</noscript>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php $this->load->view('header');?>
</div>
<div id="nav">
<?php $this->load->view('navigation');?>
</div>
<div id="main">
<?php $this->load->view($main);?>
</div>
<div id="footer">
<?php $this->load->view('footer');?>
</div>
</div>
</body>
</html>
All the necessary style sheets and jquery tools are added in the head section. You can find details of different set ups here.
Note:
<?php $this->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
<h1>Zend Framework on Codeigniter: Flickr</h1>
<div id="search">
<?
if ($this->session->flashdata('index_msg')){
echo "<div class='flashmessage'>";
echo $this->session->flashdata('index_msg');
echo "</div>";
}
if ($message){
echo "<div class='message'>";
echo $message;
echo "</div>";
}
echo form_open('flickr3/flickrsearch');
$data = array(
'name' => 'search',
'id' => 'search',
'value' => '',
'maxlength' => '100',
'size' => '50',
);
echo "\n<h3>Enter search words</h3>\n";
echo form_input($data)."\n";
echo "<br />\n<h3>Enter number of images</h3>\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";
?>
</div>
<!-- wrapper for navigator elements -->
<div class="navi"></div>
<!-- "previous page" action -->
<a class="prevPage browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable" id="chained">
<!-- root element for the items -->
<div class="items">
<?php
foreach ($results as $result)
{
echo '<img src="'.$result->Thumbnail->uri.'" />'."\n";
}
?>
</div>
</div>
<!-- "next page" action -->
<a class="nextPage browse right"></a>
<br clear="all" />
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.
<form action="http://127.0.0.1/ci_zend_flickr/index.php/flickr3/flickrsearch" method="post">
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.
Why extend ZF to only use Flickr class when there is http://phpflickr.com/ which you can use with minor changes.It’s fast and I have been using it a lot (http://www.myonepage.com/gafitescu is an example).
No reason except learning purpose. But thanks for your resource, I will check it up.
Retrieving images upon every search request that way will always be kinda slow.
It might be wise to cache the image lists for popular search terms.
A real nice article on Codeigniter – Zend integration.
[...] using Codeigniter and jQuery jQuery Quicksand on CodeIgniter Ajax Todo List system with CodeIgniter Zend framework Flickr class on CodeIgniter with jquery Zend Framework on CodeIgniter: Youtube How to implement Zend Framework with CodeIgniter How to [...]