Monday, May 9, 2011

Client-side HTML table pagination with JavaScript - NewInstance

Client-side HTML table pagination with JavaScript - NewInstance

Most of the times, you don't need to paginate on the client side: if you have an enough small set of records to be displayed, I would suggest you to choose a scrollable
.
Server-side web pagination is really needed when you have to display hundreds of records. You may fetch results from the DB using an offset and loading a single page for each HTTP request.
If your resultset is small it's possible to load it fully. Sometime I saw code loading the full resultset in session; and on each page-switch the browser refreshes displaying a different subset/page. There are many disadvantages of a server-side pagination like this:
  • You have to use the HTTP Session (and remember to clean up when it's nomore needed).
  • You have to reload the page on every page switch.
  • You cannot go forward and backward to check previous data without loosing the view on current resultset.
  • You have to write code for the server side actions handling all the page-switch work.
As I said before, everything would be solved using a table inside scrollable div but, in my current web application "GUI designers" like to persecute the users having them clicking and clicking even for few records. As in my case, I have an "editable table" (an html form) that's also paginated, in wich validation of each record depends on other records...
At least I wanted to avoid reloading the page on every page switch, and also avoid using HTTP Session when not strictly necessary. So I end up writing a JavaScript paginator object that handles the job of paginating any html table rendering also a simple pagination bar.
Here's a live sample:
# field
1
2
3



« Prev | 1 | 2 | 3 | 4 | Next »

That's all. If you want to download a demo (html+javascript files), you can click here: JavaScript Table Paginator Demo.
If you have a huge table, maybe it will be displayed fully before the javascript at the bottom will be executed. To avoid this, you can set the table as hidden by default using css style, and make it visibile using JavaScript after the pager.showPage() call.

Monday, May 2, 2011

How to rename a file uploaded with Zend_Form_Element_File

How to rename a file uploaded with Zend_Form_Element_File

There are several ways of renaming files if you don’t want to use Zend_Form_Element component. However, the following is a ZF technique.Suppose you have a very basic form with a single file element:

Form.php
class My_Form extends Zend_Form { 
public function init()     { 
$element = new Zend_Form_Element_File('imagefile'); 
$element->setLabel('Upload an image:'); 
$element->setDestination($uploaddir); 
/* file directory */ 
$element->addValidator('Count', false, 1);    
$element->addValidator('Size', false, 202400);    
$element->setRequired(false); 
$element->addValidator('IsImage', false, 'jpeg,jpg,png,gif'); 
$this->addElement($element, 'imagefile'); 
} 
}
 
What you need to do is to override the isValid( .. ) method of your Form Object:

Form.php
public function isValid($data) { 
$oldname = pathinfo($this->imagefile->getFileName());    
$newname = $this->getUniqueCode(10) . '.' . $oldname['extension'];    
$this->imagefile->addFilter('Rename',$newname);    
return parent::isValid($data);      
}
 
If you don’t want to loose your other validators , don’t forget to call the parent isValid() method . As you can see, I used PHP’s pathinfo() method to parse the file path. (There should be another one in ZF ). I renamed it with a string of 10 random characters, and kept the extension as it was. Below is the method that you can use for the random file name :

function getUniqueCode($length = "") {     
$code = md5(uniqid(rand(), true));    
if ($length != "")  return substr($code, 0, $length); 
else   return $code; 
}
Finally, in your controller, you basically check if the form is valid,

MyFormController.php
$request = $this->getRequest();  
$form  = new My_Form(); 
if ($request->isPost()) { 
if ($form->isValid($request->getPost())) { 
$formData = $form->getValues(); 
try {      $form->imagefile->receive();    } 
catch (Exception $e) {     throw new Zend_Exception ('There is a problem with the file upload');        } 
}  }
 
I hope it helps.