jueves, 23 de julio de 2009

Javascipt Tree with Jquery and Ajax

Just so i dont forget to post it and explain further when i have sometime!
Jquery is used for performing the ajax part and the show/hide effects
although i could've used yaguajax (http://code.google.com/p/yaguajax) I decided to use jquery because of the showing/hiding effects, well anyways, this is a tree that takes a JSON object as parameter 1 (data), ill provide more examples in the future!

CSS
-----------------------
ul li a {
}
.level {display:none;}
.level1{display:none;}
.level2 {display:none;}


JAVASCRIPT
-----------------------
tree={branches:[],parse:function(data,id,fieldName,lvlPrefix,lvlField,lvlClass,jsFunc,branchTitle){var div=document.getElementById(id);var ul=document.createElement("ul");if(branchTitle){var li=document.createElement("li");li.setAttribute("class","treetitle");li.appendChild(document.createTextNode(branchTitle));ul.appendChild(li);}if(!this.hasbranch(id))this.branches[id]={data:data,expanded:false};for(i=0;i<data.length;i++){var val=data[i][fieldName];var lvlID=lvlPrefix+data[i][lvlField];if(!val) continue;var li=document.createElement("li");var a=document.createElement("a");var txt=document.createTextNode(val);var lvl=document.createElement("div");lvl.id=lvlID;lvl.setAttribute("class",lvlClass);a.appendChild(txt);a.href="javascript:"+jsFunc+"("+$.toJSON(data[i])+");";li.appendChild(a);li.appendChild(lvl);ul.appendChild(li);}div.appendChild(ul);this.expandContract(id);},hasbranch:function(id){return (!(typeof(this.branches[id])=="undefined"));},expandContract:function(id){if(!this.hasbranch(id))return false;if (this.branches[id].expanded){$("#"+id).hide("slow");this.branches[id].expanded=false;return;}$("#"+id).show("slow");this.branches[id].expanded=true;return;}}

lunes, 13 de julio de 2009

Upload Progress Bar 100% PHP

Past weekend I entertained myself trying to figure out how would I go doing a 100% PHP upload progress bar without using iframes.

At the start my premise was this:

PLAIN PHP (Trying not to use extensions!)
PLAIN AJAX UPLOAD (Yes, the upload would've been done ALL via AJAX)
MULTIPLE FILES MULTIPLE UPLOADS MULTIPLE PROGRESS BARS! Yeah, Multiple!

Doing a bit of research I found out that the file object in javascript had some interesting properties like the following:

<input id="file" type="file" name="blah" onchange="interesting(this);">

function interesting(elm){

alert(elm.files.item(0).fileSize); //Gets the filesize in bytes for the loaded file
alert(elm.files.item(0).getAsDataURL()); //Gets the whole file as a base64 encoded string

}

As you might guess I've found the second (elm.files.item(0).getAsDataURL()) very interesting,
so the main idea was, "If i can get the file as a base64 encoded string I can send it through ajax without any problems, write to a file from PHP, get the amount of bytes written, then get a percentage and make a progress bar in a snap hah! Yeah I dont know about you but in my case I always start happy and then begin to complicate things :) (I think its a fact related to the very existence of programmers?)

However there were certain complications trying to send this data as $_POST data through AJAX.

Most of the time my struggle was based on getting $_POST data "as it arrived", now, "as it arrived" meant data to be dumped in the *very moment* as it was coming IN
I tried reading with $fp = fopen("php://input",'r'); while(!feof($fp)) $line = fgets($fp,2048); amongst other techniques like trying to use output buffering, but no luck. Later on I did some more research and found out that PHP is not able to read POST data in the manner as I wanted (as some kind of stream flushing it in as it arrived).

So, everyone pointed out me to use APC upload progress functions, but i didn't felt like installing apc just for getting a way of polling for upload progress, thats when I stepped with uploadprogress simply by doing :


pthreat@localshot:~$ pecl search uploadprogress

Retrieving data...0%Matched packages, channel pecl.php.net:
=======================================
Package Stable/(Latest) Local
uploadprogress 1.0.1 (stable) 1.0.1 An extension to track progress of a file upload.

Riiiiiiight, who would've thought so!!


I just had to do the following:

sudo su -c "pecl install uploadprogress";

Add the extension to /etc/php5/apache2/php.ini

echo "extension=uploadprogress.so" >> /etc/php5/apache2/php.ini

Then i checked out the examples available in the extension, and i came up with the following:

DEMO RIGHT HERE!

You can get the code here:

CODE RIGHT HERE!

I've called this uprogress, I guess i didnt wanted to be original this time :)

I still have to tweak a coupple of things, but it works in the overall.

sábado, 4 de julio de 2009

ZF Tool

Today I woke up, and decided to make a small project with Zend Framework, some kind of a photo album. I wanted to make the whole thing modular and all, I've got to a TUTORIAL that sort of explained howto use modules, with ZF.After some workarounds i managed to get it "working", Just to find that Zend_Tool was using Short Tags to generate code. As you all know (or most of you should) Short tags are meant to be deprecated in PHP6.

This bug has been filed by me here: http://framework.zend.com/issues/browse/ZF-7192

Here's some of it:

From Zend/Tool/Project/Context/Zf/ViewScriptFile.php:
Starting in line 127:

<h2><?= \$this->message ?></h2>

From my php.ini file :)

; Allow the <? tag. Otherwise, only <?php and <script< tags are recognized.
; NOTE: Using short tags should be avoided when developing applications or
; libraries that are meant for redistribution, or deployment on PHP
; servers which are not under your control, because short tags may not
; be supported on the target server. For portable, redistributable code,
; be sure not to use short tags.

short_open_tag = Off

miércoles, 1 de julio de 2009

Simple Javascript File Adder

Bored, made this simple file adder, actually you can add text fields also, I should add options into it for it to be able to also remove the created input fields.

files={elms:[],count:0,add:function(id,name,type,max,prefix){if(max&&((files.count+1)>max))return;var elm,cont,label;elm=cont=label=null;cont=document.getElementById(id);type=(type) ? type : "file";if(!cont) return alert("addboxes.js: Container for adding elements does not exists");name=(!name) ? "files" : name;elm=document.createElement("input");elm.setAttribute("name",name+"[]");elm.setAttribute("type",type);label=document.createElement("label");label.setAttribute("class","autoadd");if(prefix) label.appendChild(document.createTextNode(prefix+' '+(files.count+1)));label.appendChild(elm);cont.appendChild(label);files.elms[files.elms.length]=elm;files.count++;}}/*Example Usage: <a href="javascript:files.add('emails','reviews','text',4,'Review #');">[+]Add Email</a> <div id="emails"></div>*/

martes, 16 de junio de 2009

Zend Gdata Maps

Using Zend Framework checked the Gdata package and found no google maps support:

So i decided to create a Zend_Gdata_Maps subpackage, and here it is:

Download Zend_Gdata_Maps!

Installation: Just uncompress it outside The Zend Framework folder

See the Examples provided on Zend/Gdata/Maps/Examples

yeah, the examples are *practical* and *usefull* you wont find any useless gibberish on them

Run the example within your console OUTSIDE the ZF folder!

/path/to/php Zend/Gdata/Maps/Examples/example.php



Once youre used to it, use it in your project as any other library.

There's lot to be done yet! I'm sure there are a thousand of bugs.

Looking up for people who care to create a Google Maps Gdata Subpackage :)

Cheers!

Juan.-