Problem:

How to automatically populate the options of a select menu, when the user selects an option from another menu.

We encountered this problem in the MyHouseMyStreet project. We had a select menu of streets and one of buildings within each street. We wanted that everytime the user selected a street, the buildings of that street appeared in another select menu.

Solution:

First of all, we add the select menus in the HTML code. The one containing the streets is populated from a table in the database.

The select menu for the buildings contains no options as these will be added by the javascript code.

Then we add the javascript code, which is activated everytime the user changes option in the streets’menu.  The javascript sends a post request to the server passing the id of the street for which we need to retrieve the buildings and specifies the action requested (in this case to get the buildings – this is used so that you can use the php files to handle other requests as well).

The php retrieves the buildings associated to that street using the idstreet passed by the javascript and returns them in a JSON array.

The javascript receives the results and parses them.

Requirements:

jquery library

Code:

The Javascript code

//update buildings select menu as soon as a street is selected
$('#idstreet').change(function(){
 var idstreet=$('#idstreet').val();
 $.post("code/search_manage.php", { 'action': "getbuildings",  'idstreet': ""+idstreet+""},
 function(data){
 var buildings = data;
 var options = '';
 for (var i = 0; i <buildings.length; i++) {
 options += '<option value="' + buildings[i].optionValue + '">' + buildings[i].optionDisplay + '</option>';
 }
 options += '<option value="all" selected>all</option>';
 $("select#idbuilding").html(options);
 }, "json");
 return false;
 });

The HTML code

<select name="idstreet" id="idstreet">
 <?
 $db=open_db();
 $db->open("SELECT * FROM street ORDER BY street_name");
 $streets=NULL;
 if(!$db->eof){
 while(!$db->eof){
 $streets[]=$db->get_row();
 }
 }
foreach($streets as $street){?>
 <option value="<?=$street['idstreet']?>"><?=$street['street_name']?></option>
 <? }?></select>
<select name="idbuilding" id="idbuilding"></select>

The PHP server code

$action=isset($_POST['action'])?$_POST['action']:'';
if($action=="getbuildings"){
 $db=open_db();
 $db->open("SELECT * FROM building WHERE street_idstreet=".$_POST['idstreet']." ORDER BY bnum_name");
 $buildings="[";
 if(!$db->eof){
 while(!$db->eof){
 //$buildings['optionValue']=$db->read_field('idbuilding');
 //$buildings['optionDisplay']=$db->read_field('bnum_name');
 $buildings.= '{optionValue:'.$db->read_field('idbuilding').', optionDisplay: "'.$db->read_field('bnum_name').'"},';
 $db->nextrow();
 }
 }
 $db->close();
 $buildings=substr($buildings,0,strlen($buildings)-1);
 $buildings.="]";
 echo <<<HERE_DOC
$buildings
HERE_DOC;

 exit();
}

Problem:

being able to navigate through the items of a Plone folder as you browse them.

case-study:

I had several images and other documents all in the same folder. As they  landed on a page, I wanted users to be able to navigate to the previous / next image without having to go back to the root folder.

Solution:

1. retrieve the objects  from the folder
2. place them in a list
3. get the position of the current object in the list
4. calculate the previous and next positions from the current position (-1 and +1, respectively)
5. create the links to these objects (remember to add the template at the end of the object’s url if you have a customised view for such object)

Implementation:

<div metal:fill-slot="main">
<div  tal:define=".....
chapters python:here.aq_parent.getFolderContents(contentFilter = {'portal_type' : ['BevanLetterImage']});
 sibl     python:[p for p in chapters];
 numsibl python:len(sibl);
 pos     python: [i for i in range(numsibl)if sibl[i].getId == here.getId()][0]" >
<!--prev next nav-->
 <div class="listingBar" tal:condition="python: next or prev"
 tal:define="next python:pos < numsibl-1;
 prev python:pos != 0;">
 <span tal:condition="next">
 <a class="listingNext"
 tal:define="nextsib python:sibl[pos+1]"
 tal:attributes="href string:${nextsib/getURL}/view"
 tabindex="1"
 href="">
 <span i18n:translate="label_next">
 Next: </span>
 <span tal:replace="nextsib/Title" />
 </a>
 </span>
 <span tal:condition="prev">
 <a class="listingPrevious"
 tal:define="prevsib python:sibl[pos-1]"
 tal:attributes="href string:${prevsib/getURL}/view"
 tabindex="2"
 href="">
 <span i18n:translate="label_previous">
 Previous: </span>
 <span tal:replace="prevsib/Title" />
 </a>
 </span>
 </div>
<div style="clear:both"></div>
<!--end prev next nav-->

Problem:

retrieve only specific contents of a Plone folder, order the list by a customised criteria (i.e. date, title) and display some of their related info.

case-study:

I have a letter with related images ( a customised product that I created, called “BevanLetterImage”)  in one folder. I want to display the images below the letter and order them by title.

Solution:

create a list which displays from the folder contents only the images and specify the title as the  sortable criteria.

Implementation:

Insert the following code in the part of the template where you want the list to show.

The code retrieves only the object of type aType and according to criteria sortable_criteria (examples of criteria: ‘sortable_title’, ‘Date’).

For each image it displays the title and the image as a thumbnail. Both are also rendered as links to the real image.

<!--image list-->
<div id="photo-holder">
 <tal:foldercontents define="contentFilter contentFilter|request/contentFilter|nothing;
                            limit_display limit_display|request/limit_display|nothing;
                            more_url more_url|request/more_url|string:folder_contents;
                            contentsMethod python:test(here.portal_type=='Topic', here.queryCatalog, here.getFolderContents);
                            folderContents folderContents|python:contentsMethod(contentFilter={'sort_on':'sortable_criteria','portal_type':['aType']}, batch=True);
                            use_view_action site_properties/typesUseViewActionInListings|python:();
                            over_limit python: limit_display and len(folderContents) > limit_display;
                            folderContents python: (over_limit and folderContents[:limit_display]) or folderContents;
                            batch folderContents">
<h3>Photos of the original letter (<span tal:content="python:len(folderContents)"></span> in total)</h3>

 <tal:listing condition="folderContents">

            <tal:block tal:repeat="item folderContents">
                <div  tal:define="item_url item/getURL|item/absolute_url;
                                       item_id item/getId|item/id;
                                       item_title_or_id item/pretty_title_or_id;
                                       item_description item/Description;
                                       item_type item/portal_type;
                                       item_type_title item/Type;">
<!-- custom -->                  
 <a  href="#"
                       tal:attributes="href python:item_url+'/view'"><p class="photo-title" tal:content="item_title_or_id"></p>
  <img src="" alt="" tal:attributes="src python:item_url+'/image_thumb'"  />
                    </a>
<!-- end of custom -->
               </div>
 </tal:block>
 </tal:listing>
 </tal:foldercontents>
 </div>  <div style="clear:both"></div>
<!--end of image list-->

Setting up the DEV and LIVE sites

Download the wordpress installation:  http://wordpress.org/download/.

In the dev and live servers, create a new empty folder in your websites roots.

Unzip the wordpress installation and copy the files in the newly created folders.

Set up the Apache’s virtual host for your dev and remote sites.

Create a new empty database i.e. culturegeeks in the dev server and another with the same name in your remote server.

Rename wp-example.php in wp-config.php.

Open wp-config.php and set the database settings so that if you are in your dev server you will connect to the dev database, otherwise it will connect to the remote database. In my case that’s what I got:

switch($_SERVER['SERVER_NAME']){
 case '192.168.0.2':
 //dev site (fileserver)
 define('DB_USER', 'I am not gonna publish it here!');     // Your MySQL username
 define('DB_PASSWORD', 'I am not gonna publish it here!'); // ...and password
 define('DB_HOST', '192.168.0.2');    // 99% chance you won't need to change this value
 break;
 default:
 //live site (dl320) //remote user:admin pwd:*g11eiKu9Y#E
 define('DB_USER', 'I am not gonna publish it here!');     // Your MySQL username
 define('DB_PASSWORD', 'I am not gonna publish it here!'); // ...and password
 define('DB_HOST', '212.42.165.194');    // 99% chance you won't need to change this value
 break;
}
define('DB_NAME', 'culturegeeks');    // The name of the database

Go to your dev website address and run the installation script:
devyourwebsite/wp-admin/wp-install.php

This will set up the dev website.

Go to your live website address and run the installation script:
devyourwebsite/wp-admin/wp-install.php

This will set up the live website.

You will be asked to give your blog a title and an email address. Next, you will be prompted with a username and password. Save these details, as you’ll require them when you access the website’s dashboard (admin area).

Set up the new site in Dreamweaver, where the local settings refer to the dev site and the remote settings your remote site’s ftp details. Test the connection is successful.

The two sites have now been initialized and should be exactly the same.

Update your remote site

Let’s say we want to make some changes to the look&feel of the website. First, we will apply a new template to the dev site, twick it and then upload the changes to the live site.

First, download the new template. A range of free templates can be found at: WordPress Theme Viewer

Unzip the package i.e. dummy_Theme into the themes/ folder of your dev site. 

Go to your dev site’s dashboard, the new theme should appear as one of the available templates.

Make changes, i.e. change the logo (which can be found in the images/ folder of the theme).

In Dreamweaver, right-click on your chosen theme, theme/dummy_Theme  and click Put. This will automatically upload the folder in your live site.

Go to your remote site’s dashboard, the new theme should appear as one of the available templates.

References

http://codex.wordpress.org/Main_Page - wordpress guide

http://codex.wordpress.org/Installing_WordPress#Detailed_Instructions - detailed installation’s instructions

The aim

I wanted to have a photoalbum for the buildings and the people who lived in a street. However, I wanted the photoalbum to be as shareable and robust as possible. Thus, instead of building my own, I opted for using Flickr.

Apart from the fact that Flickr is possibly the most popular photosharing network, it has also the great advantage of offering an API which allows seamless integration with your applications. Furthermore, lots of people are contributing to create wrappers on different languages which simplify the API calls.

On this regard, since the project is written in PHP, I decided to adopt phpFlickr for my purposes. At the time of this post, the version is 2.2.0.

Run a preliminary test

The first step was to get the API key . This is free and you can obtain it by logging into your Flickr’s account and clicking on: http://www.flickr.com/services/api/keys/

Once you have completed the registration process, you will be given two codes, which you will need later to access Flickr, an api key and a secret.

I always do my experiments in a local website, which acts like a sandbox (“tests”) for my experiments so that I do damage my actual applications. Thus to test Flickr API, I have created a subfolder “flickrapi” in my tests folder. I have also created an empty file index.php and checked the server sees the new folder:

localhost:8020/flickapi (where localhost:8020/ is my virtual host for the tests folder in Apache)

Next, I have downloaded phpFlickr in the “flickrapi” folder.

To check that the package is seen by php, I have modified flickrapi/index.php with:

<?
include "phpFlickr/phpFlickr.php";
?>

If no errors are displayed, the package has successfully accessed.

The second step was to start using the API itself. phpFlickr implements all the API methods as methods of a Flickr class. So you need to instantiate a Flickr object first, by doing:

$f = new phpFlickr($api_key,$secret,$die_on_error);

where:

$api_key and $secret – are the API key and secret code obtained earlier.

$die_on_error – is a boolean value and determines whether operations should cease if the API returns an error (default is false).

If no error occurred, you can start quering Flickr using the specified methods on $f ( these are defined in phpFilckr.php).

Since the test was successful, I moved on to play a bit with Flickr’s calls. In particular I wanted to:

1. access my photos

2. retrieve pictures according to their tags and machine tags

access to my photos

First, I searched among the people’s database on Flickr, my own account. Then, from my account’s details, I retrieved my user id and using this I got access to my photos.

$username="myusername_example";
  // Find the NSID of the username inputted via the form
    $person = $f->people_findByUsername($username);

    // Get the friendly URL of the user's photos
    $photos_url = $f->urls_getUserPhotos($person['id']);

get photos with specific tags and machine tags

To run a search, I used photos_search method and as the $tags variable I specified the tags/machine tags I wanted to filter my photos by.

//Get photos that have tag "flat"
$photos =$f->photos_search(array("user_id"=>$person['id'],
"tags"=>"flat",
"per_page"=>6));
//Get photos with machine tag building num 2, which represents a building number.
      $photos =$f->photos_search(array("user_id"=>$person['id'], "machine_tags"=>"myhousemystreet:buildingnum=\"2\"", "per_page"=>6));

The last (optional) step for me was to move the phpFlickr package from my test folder “flickrapi” to the folder which contains all my php packages, in my PHP5 installation. Then, I had to modify my code accordingly to check it still worked. This final test allowed me to see that I can now use phpFlickr in any site I want from now on, by just inserting:

require_once incpath("/phpFlickr/phpFlickr.php");

At the top of my php files. This is an optional step, but if I didn’t do that, every time I needed to use Flickr API, I would have had to copy phpFlickr as a folder within my new website.

So here’s my final index.php:

<?
/**
 * Testing connection to Flickr, using API.
 * inspired by http://phpflickr.com/
*/
require_once incpath("/phpFlickr/phpFlickr.php");

$api_key ="c0fde778bd98ac8701f2d4e8ef0be50c";
$secret ="dcf4ae887a9b1a06";
$die_on_error =true;// cease operation) if the API returns an error statement
$f = new phpFlickr($api_key,$secret,$die_on_error);
//SEARCH FOR PHOTOS
$username="val.cartei";
  // Find the NSID of the username inputted via the form
    $person = $f->people_findByUsername($username);

    // Get the friendly URL of the user's photos
    $photos_url = $f->urls_getUserPhotos($person['id']);

	//Get first 10 photos with specified tag in $extras
	  $photos =$f->photos_search(array("user_id"=>$person['id'], "machine_tags"=>"myhousemystreet:bnum=\"2\"", "per_page"=>6));
/*
    // Get the user's first 10 public photos
    $photos = $f->people_getPublicPhotos($person['id'], NULL, 10);
*/
	$i=0;
	  // Loop through the photos and output the html
    foreach ((array)$photos['photo'] as $photo) {
        echo "<a href=$photos_url$photo[id]>";
        echo "<img border='0' alt='$photo[title]' ".
            "src=" . $f->buildPhotoURL($photo, "Square") . ">";
        echo "</a>";
        $i++;
        // If it reaches the sixth photo, insert a line break
        if ($i % 6 == 0) {
            echo "<br>\n";
        }
	}

?>

Resources

http://www.flickr.com/services/api/ – Flickr’s API Official Documentation

http://phpflickr.com/ – the official website for the phpFlickr package.