Web wok

Auto-complete Select menu with Jquery, Ajax and MySQL

3guineas — Tue, 04 Aug 2009 09:34:20 +0000

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[i].optionDisplay + '';
 }
 options += '';
 $("select#idbuilding").html(options);
 }, "json");
 return false;
 });

The HTML code

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 <<

CSS easy layout

3guineas — Wed, 10 Jun 2009 10:41:34 +0000

My advice si to forget the ruler and download Blueprint . Blueprint is a CSS framework, which gives you a grid to place your elements and basic, clean typography.

One issue with the grid provided by Blueprint is that the footer doesn’t stick to the bottom of the page.

However, there is a hack for this, which described below.

How to keep the footer at the bottom of the page

Your CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;

}

The HTML:

Your website content here.

</div>

from Ryan Fait’s blog post .

make MySQL transactions work in PHP

3guineas — Fri, 27 Mar 2009 20:03:17 +0000

Requirements:

All tables involved in the transactions in your database must be TYPE=InnoDB.
I am using a library to connect to the database. However, if you are familiar with the PHP mysql API functions , you can replace the library calls with the API calls. The general concept is still valid.

Step.1 The PHP wrapper

Create php functions to wrap the mysql queries that implement the transaction syntax.

Implement a function to return the value of the last id inserted (this will be used to check that the query has been performed successfully).

//get id from the last inserted record
function get_last_inserted_id($table)
{
    $q = "SELECT LAST_INSERT_ID() FROM $table";
    return mysql_num_rows(mysql_query($q));
}

Step.2 The main code

To test it, say you have two tables ‘project’ and ’street’. You want to insert a new project in the project table and a new street for that project into the street table.

If any of the two transactions don’t work, mysql will rollback, and therefore no records will be inserted.

Note: you can put as many queries as you want between begin() and commit()/rollback().

begin(); // transaction begins
$db=open_db();
//add to projects
$db->add_record(‘project’,$fields);
$prj_id=$db->get_inserted_id();
//add to street
$db->add_record(’street’,$fields);
$street_id=get_last_inserted_id(’street’);
echo (“
”.$prj_id.” “.$street_id);
$db->close();
if(!$prj_id||!$street_id)
{
rollback(); // transaction rolls back
echo “you rolled back”;
exit;
}
else
{
commit(); // transaction is committed
echo “your insertion was successful”;
exit;
}

Get the difference between two arrays in PHP

3guineas — Thu, 26 Mar 2009 15:22:39 +0000

This is a little useful function which gets all the elements that are in one array but not in another.

/*
It returns all the elements in array $b that do not appear in array $a.
*/
function array_sub_array($a, $b) {
$tot=count($b);
       for($i=0;$i<$tot;$i++){
              if(!in_array($b[$i],$a)){$c[]=$b[$i];}

        }
        $c=array_filter($c);//HACK: delete NULL values
        return $c;
}

prev/next navigation in Plone

3guineas — Mon, 16 Mar 2009 12:52:21 +0000

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:

retrieve the objects from the folder
place them in a list
get the position of the current object in the list
calculate the previous and next positions from the current position (-1 and +1, respectively)
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:




 
 
 
 
 Next: 
 
 
 
 
 
 
 Previous:

Displaying folder contents in Plone

3guineas — Mon, 16 Feb 2009 11:42:47 +0000

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.



 
Photos of the original letter ( in total)

Rotate and zoom images with Javascript

3guineas — Mon, 17 Nov 2008 12:11:38 +0000

A Javascript script to rotate and zoom images using the canvas element.

Installation

in the BODY of your html page insert the commands which will trigger the transformations and the image you want to rotate, embedded in a canvas element:

<body onload="CanvasOnload()">

<h1>Image rotate and zoomh1>
    <span style="text-align: center; width: 65px">
        <a href="javascript: location.href = 'index.html'" style="text-decoration: none">
            <img src="reset.png" alt="Reset the image" border="0" />
        a>
    span>

<p>
	rotate:
	<input type="button" value="0°" onclick="rotate(0);">

	<input type="button" value="90°" onclick="rotate(90);">
	<input type="button" value="180°" onclick="rotate(180);">
	<input type="button" value="-90°" onclick="rotate(-90);">
p>

<div>
    <span style="text-align: center; width: 65px">
        <a href="#"
           onmousedown="mousedown = true; ZoomOut(document.getElementById('myimage'))"
           onmouseout="mousedown = false"
           onmouseup="mousedown = false"
           style="text-decoration: none">
            <img src="minus.jpg" alt="Zoom out" border="0" />
        a>

    span>
    <span style="text-align: center; width: 65px">
        <a href="#"
           onmousedown="mousedown = true; ZoomIn(document.getElementById('myimage'))"
           onmouseup="mousedown = false"
           onmouseout="mousedown = false"
           style="text-decoration: none">
            <img src="plus.jpg" alt="Zoom in" border="0" />
        a>
    span>
div>

<canvas id="ff_canvas" width="159" height="198">
    <img src="/js-tests/rotateImage/fashionable.jpg"
         alt="Zend"
         width="159"
         height="198"
         id="myimage"
         style="margin-left: 50px; position: absolute; top: 110px; left: 250px; cursor: hand" />

canvas>

In the HEAD of your html page, you need to insert the references to your scripts:

<script type="text/javascript" src="imgRotateCanvas.js">script>
<script language="javascript" src="imgZoomCanvas.js">script>

This is the code in “imgRotateCanvas.js”:

/*Author: Val Cartei,  val.cartei@gmail.com.
Year:2008
Description: rotates an image embedded in a canvas element.

This script is an adaptation of a script by: Benoit Asselin | http://www.ab-d.fr. The original script can be found at:
The JavaScript Source!! http://javascript.internet.com
*/

/**
*function: rotate
* @param int p_deg - the degrees of the rotation (e.g. -90,180,270,0).
*/
function rotate(p_deg) {
	if(document.getElementById('ff_canvas')) {
		/*
		Ok!: Firefox 2, Safari 3, Opera 9.5b2
		No: Opera 9.27
		*/
		var image = document.getElementById('myimage');
		var canvas = document.getElementById('ff_canvas');
		var canvasContext = canvas.getContext('2d');

		switch(p_deg) {
			default :
			case 0 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, 0);
				break;
			case 90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, -image.height);
				break;
			case 180 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, -image.height);
				break;
			case 270 :
			case -90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, 0);
				break;
		};

	} else {
		/*
		Ok!: MSIE 6 et 7
		*/
		var image = document.getElementById('myimage');
		switch(p_deg) {
			default :
			case 0 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
				break;
			case 90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
				break;
			case 180 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
				break;
			case 270 :
			case -90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
				break;
		};

	};
};

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
	var image = document.getElementById('myimage');
	var canvas = document.getElementById('ff_canvas');
	if(canvas.getContext) {
		image.style.visibility = 'hidden';
		image.style.position = 'absolute';
	} else {
		canvas.parentNode.removeChild(canvas);
	};

	rotate(0);
});

This is the code in “imgZoomCanvas.js”:

/*Author: Val Cartei,  val.cartei@gmail.com.
 Year:2008
 Description: rotates an image embedded in a canvas element.

This script is an adaptation of a script that can be found at:
 http://www.phpguru.org/downloads/image_rotate/rotate.html
 )*/

These are image files used. Put them in the root directory together with your html page and the .js scripts.

Zoom in:

ZoomOut:

and the sample image:

Jquery, Ajax forms, PHP and Mysql at the table

3guineas — Mon, 03 Nov 2008 16:26:06 +0000

Before starting, if you have PHP.x < PHP.2, you need to put into your includes folder the library jsonwrapper (this encodes/decodes json objects).

Imagine you have a form to add an item to a shop and you want to create a new category for that shop without leaving that page.

One way to do it is to have a link “add a new category” that when clicked, shows some input fields for adding the new category (e.g. name and description) and a button to submit these data.

When the button is clicked, javascript detects that you do not want to send the whole form, but instead it retrieves these fields and sends them as an Ajax request to the server. The php code on the server side will get the data, perform the request (adding the category) and return some data (e.g. the new category object) to the form. Javascript waits for the response and processes it.

This is the general idea, now let’s have a look at the code:

Client-side: form.php

in the HEAD insert javascript:

The first line imports jquery library

The second script tag includes Ajax interaction:

it dynamically displays the fields in the form that will be sent as Ajax (hidden at the beginning) and when submitted it discriminates between the whole form and the sending of these fields (‘action’).

it retrieves those fields within the form whose values we want to send to the server and encodes them as a json object.

it sends a simple POST request to a server with the data as json.

it handles the response by veryifing the data sent back by the server. If successful, it modifies the form and add a positive feedback, otherwise it shows a negative feedback.

in the BODY:

within the HTML form

....
 
.....

add a new category

Server-side: manage_data.php

PHP code:

0,
  'catname'   =>0,
);

require_once incpath("/jsonwrapper/jsonwrapper.php"); //encode/decode json objects for AJAX calls
//get the data from the post request sent through javascript
if(!empty($_POST["add"])){

$name=$_POST['catname'];
$description=$_POST['catdescription'];
$new_record_id= $ShopCategory->newRecord($data);
}

 //json object returned to the calling page
$foo= array(
 'idshopcategory'  =>1,
 'catname'   =>$name,
'catdescription'   =>$description,
);
// Now encode the array to JSON format
$json = json_encode($foo);
// encode array $json to JSON string
echo $json;
die();
?>

it creates an array of values to be returned

it encodes them as a json object (using json_encode as defined in the library jsonwrapper)

it sends the object to the page form.php.

Know your users – web stats made easy

3guineas — Wed, 29 Oct 2008 11:19:56 +0000

Google Analytics offers an easy way to get statistics of your website, but one of his major drawbacks is that

you can’t analyze historical data. Luckly, I found a software that can do that, Urchin 5.

Feed your logs into Urchin

Feed your log files into Urchin

zip your log files (e.g. logfiles.zip)

in Profiles>Log manager add a new profile

the popup will ask you the following:

Log file location – choose local

Log file path – select the path to your zipped file ( in my case, logfiles.zip).

Log format – choose auto

Get your reports

Now click on Profiles menu again and in the table you’ll see the newly created profile listed. Click on run (the lightning icon), this will run the analysis of the log source.

Then, on view (the zoom icon) to see the results. These open in a separate tab and on the left you can see the menu to navigate through the different reports. The most important for me are:

Traffic>Summary, which shows totals and averages for Sessions, Pageviews, Hits, and Byte. You can see details for each of these by clicking on the corresponding item in the Traffic menu.

Page&Files> Requested Pages, which ranks the popularity of the Pages

Page&Files> Downloads, ranks the popularity of all Downloads on your site by number of requests

All Files> All Files by Hits, ranks the popularity of all files on your site by number of requests, which is important to detect for example how many times a given document has been downloaded or an image been viewed.

Navigation> Entrance pages, which indicates which is thepage from which Visitors entered your website (the first page they saw).

Referrals>Referrals, which list the referring URLs (external web pages) that brought traffic to your site.

Browers &Robots> Browsers, ranks the browsers used by the public to access your site.

Browers &Robots> Platforms, ranks the platforms (e.g. Windows,Mac…) used by the public to access your site.

Each statistic can also be exported in different formats. I personally choose .doc as it appears to be the easiest to read, but you can have your data in Excel or tab separated, plain text. And of course, you can also print them.

Advantages and Disadvantages

A major drawback is that Urchin software is not free! The demo licence expires after 90 days.

A major advantage, it can be used with Google Analytics:

Copy your Google Analytics tracking code into a text editor.

Add the line in bold below to your tracking code (your actual code will contain your account and profile number in place of xxxx-x):

This additional line will serve the pageview to Urchin Software as well as Google Analytics, allowing you to gather data with both products.

Then, remove this line of code from your webpages: