• php_uploadprogress_dll_WIN32.zip
• uploadprogress-1.0.0.tgz

A extensão precisa acessar a pasta de uploads temporária, portanto é necessário configurar no php.ini o caminho. Inclua as seguintes linhas no seu arquivo de configurações do php:

[UploadProgress]

extension=php_uploadprogress.dll
uploadprogress.file.contents_template="C:WINDOWSTempupload_contents_%s"
uploadprogress.file.filename_template="C:WINDOWSTempupt_%s.txt"

Obs: Reparem para a última parte dos caminhos que devem ser mantidos (“upload_contents_%s” e “upt_%s.tx”)

Obs2: Sei que não é a melhor opção, mas estou fazendo o tutorial baseado em ambiente Windows. Mas os passos são os mesmos para ambiente Unix.

Segue o controller que fará todo o controle do upload:

class IndexController extends Zend_Controller_Action
{
/**
* Monta o formulário
*
* @return void
*/
public function indexAction()
{
$request = $this->getRequest();
$this->view->id = md5(microtime() . rand());
}

/**
* Processo os arquivos quando forem finalizados
*
* @return void
*/
public function processAction()
{
Zend_Layout::getMvcInstance()->disableLayout();
$this->_helper->viewRenderer->setNoRender();

Zend_Debug::dump($_FILES);
Zend_Debug::dump($_POST);

}

/**
* Retorna o json com as informações do progresso do upload.
*
* @return void
*/
public function processInfoAction()
{
Zend_Layout::getMvcInstance()->disableLayout();
$this->_helper->viewRenderer->setNoRender();

$id = $this->_getParam('id');
echo Zend_Json::encode(uploadprogress_get_info($id));
}
}

indexAction apenas renderiza o formulário passando o ID do post. É por este ID que a extensão saberá identificar de qual upload deve ser retornado as informações.

processAction apenas recebe os arquivos e ecoa na tela as informações.

processInfoAction recebe o ID do upload e retorna o json necessário para o javascript fazer a barra de progresso.

Este é o HTML montado para o upload. Notem que é obrigatório o campo hidden com o identificador gerado no indexAction.

<form action="<?= $this->url(array('action'=>'process')) ?>" id="frmUpload" enctype="multipart/form-data" method="post">
<input type="hidden" name="UPLOAD_IDENTIFIER" value="<?= $this->id; ?>" id="UPLOAD_IDENTIFIER"/>

<label>Select File:</label>
<input type="file" name="file" style="display:block" />

<input type="submit" value="ok" />
</form>
<div id="uploadprogressbar"></div>

A div identificada por “uploadprogressbar” é onde o será feita a barra de progresso.

O que resta agora é somente o javascript. Para a barra de progresso é necessário o jQuery e o plugin jQuery ProgressBar.

Inclua o seguinte código JS no header da página que terá o formulário.

<script type="text/javascript">
var progress_key;

$(document).ready(function() {
progress_key = $("#UPLOAD_IDENTIFIER").val();
$("#frmUpload").bind("submit", function() {
beginUpload();
});
$("#uploadprogressbar").progressBar();
});

function beginUpload() {
$("#uploadprogressbar").fadeIn();
setTimeout("showUpload()", 100);
}

function showUpload() {
$.get("<?= $this->url(array('action'=>'process.info')); ?>/id/" + progress_key, function(data) {
if (!data)
return;

var response;
eval ("response = " + data);

if (!response)
return;

var percentage = Math.floor(100 * parseInt(response['bytes_uploaded']) / parseInt(response['bytes_total']));
$("#uploadprogressbar").progressBar(percentage);

});
setTimeout("showUpload()", 100);
}
</script>

Feito isso, é só testar e ver o resultado.

Para mais informações do plugin ProgressBar acesse o site do mesmo.

Qualquer dúvida entre em contato que farei o possível para ajudar.

Abraços!

Para tentar exemplificar, irei fazer um passo-a-passo da integração. Estou assumindo que seu projeto já esteja funcionando corretamente, ou seja, MVC configurado corretamente e etc.

A primeira coisa a se fazer é adicionar o componente no mesmo nível onde está o ZF:

/library

/library/Tavs

/library/Zend

Feito isso, seu projeto já terá acesso ao componente Flexigrid. Obs: Tomei o cuidado de escrever as classes mantendo o padrão adotado pelo ZF, onde cada “/” é representada por “_” no nome da classe.

Com o componente incluído, já podemos escrever no controller os métodos que farão configuração do Flexigrid.

IndexController.php

<?php

class IndexController extends Zend_Controller_Action
{
/**
* Retorna a instancia do flexigrid
*
* @return Tavs_jQuery_Flexigrid
*/
private function _getFlexigrid()
{
$front = $this-&gt;getFrontController();
$flexigrid = new Tavs_jQuery_Flexigrid($front-&gt;getBaseUrl() . '/index/list');

$flexigrid
-&gt;setTitle('Clientes')
-&gt;orderBy(
$this-&gt;_getParam('sortname', 'cliente_nome'),
$this-&gt;_getParam('sortorder', Tavs_jQuery_Flexigrid::SORT_ASC)
);

$flexigrid
-&gt;addColumn('text', 'cliente_nome', array(
'label' =&gt; 'Nome'
))
-&gt;addColumn('text', 'cliente_email', array(
'label' =&gt; 'Email'
))
-&gt;addColumn('date', 'cliente_nascimento', array(
'label' =&gt; 'Data de Nascimento',
'align' =&gt; Tavs_JQuery_Flexigrid_Column_Abstract::ALIGN_CENTER
))
-&gt;addColumn('checkbox', 'cliente_ativo', array(
'label' =&gt; 'Ativo?',
'align' =&gt; Tavs_JQuery_Flexigrid_Column_Abstract::ALIGN_CENTER
));

//seletor e atributos da tabela
$flexigrid
-&gt;setSelector('#grid-clientes')
-&gt;addTableAttrib('id', 'grid-clientes');

//paginacao
$flexigrid-&gt;configPaginator($this-&gt;_getParam('rp', 20), $this-&gt;_getParam('page', 1));

return $flexigrid;

}

/**
* Recupera e a manda para a view a instancia do Flexigrid
*/
public function indexAction()
{
$this-&gt;view-&gt;flexigrid = $this-&gt;_getFlexigrid();
}

/**
* Faz a busca no banco de dados para listar no flexigrid.
*
*/
public function listAction()
{

Zend_Layout::getMvcInstance()-&gt;disableLayout();
$this-&gt;_helper-&gt;viewRenderer-&gt;setNoRender(true);

//cria o objeto para montar da query
$db = Zend_Db_Table::getDefaultAdapter();
$select = $db-&gt;select();

//monta o select
$select-&gt;from(array('C'=&gt;'cliente'), array('cliente_id', 'cliente_nome', 'cliente_email', 'cliente_nascimento', 'cliente_ativo'));

$field_search = $this-&gt;_getParam('qtype');
$field_search_value = $this-&gt;_getParam('query');

if ( !empty($field_search) &amp;&amp; !empty($field_search_value) )
{
$select-&gt;where($field_search . ' LIKE ?', '%' . $field_search_value . '%');
}

$flexigrid = $this-&gt;_getFlexigrid();

echo $flexigrid-&gt;generateRows($select, 'cliente_id');

}

}

É importante lembrar que a inclusão de colunas no flexigrid é obrigatória. O parâmetro do construtor é a URL que o flexigrid irá chamar para popular o grid com o dados. Lembrando que essa requisição é feita com AJAX.

A principal característica deste componente é a personalização das colunas. No exemplo acima temos 4 colunas: duas com texto normal, uma para exibição de data e outra para checkbox. Atualmente, o componente suporta colunas para:

1. Checkbox
2. Date
3. Link
4. Select
5. Text

Para criar uma coluna personalizada por você, é necessário extender a classe Tavs_JQuery_Flexigrid_Column_Abstract e implementar o método render(). Ainda não tive tempo para documentar a utilização do componente, mas é só fazer uma boa leitura no código que fica trivial.

O método listAction monta a consulta para executar no banco de dados. Depois de criado o objeto $select, este é passado como parametro para o método $flexigrid->generateRows onde será configurada a paginação e trazer somente os registros necessários para a página em questão.

Depois de configurado o flexigrid, ecoamos a instância que foi enviada para a view:

index.phtml

<?php echo $this->flexigrid ?>

Está quase pronto! Agora falta incluirmos os arquivos jquery.js, flexigrid.js e flexigrid.css. Normalmente se faz essas inclusões no layout “master” da aplicação, no meu caso:

main.phtml

<?php

$base = Zend_Controller_Front::getInstance()->getBaseUrl();

$this
->headScript()
->appendFile( $base . '/scripts/jquery-1.2.6.min.js' )
->appendFile( $base . '/scripts/flexigrid.js' );

$this
->headLink()
->appendStylesheet( $base . '/styles/flexigrid.css' );

echo $this->doctype()
?>
<html>

<head>
<meta http-equiv="Content-Type"; content="text/html; charset=UTF-8" />
<?php
echo $this->headScript();
echo $this->headLink();
echo $this->JQuery();
?>
</head>

<body>
<?php echo $this->layout()->content ?>
</body>

</html>

Arquivos utilizados para o tutorial:

* Biblioteca jQuery
* Flexigrid
* Tavs Library baseado em ZF (Classes PHP).

Script de banco de dados usado no tutorial:

CREATE TABLE `cliente` (
`cliente_id` int(11) NOT NULL,
`cliente_nome` varchar(50) NOT NULL,
`cliente_email` varchar(50) NOT NULL,
`cliente_nascimento` datetime NOT NULL,
`cliente_ativo` int(11) NOT NULL default ‘1′,
PRIMARY KEY (`cliente_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

–
– Extraindo dados da tabela `cliente`
–

INSERT INTO `cliente` VALUES(1, ‘Tales’, ‘tales@gmail.com’, ‘2009-03-29 22:15:00′, 0);
INSERT INTO `cliente` VALUES(2, ‘Tales’, ‘tales@hotmail.com’, ‘2009-03-27 22:15:11′, 1);

Qualquer contribuição é sempre bem vinda. Correção de bugs ou coisas do gênero pode ser informado através do email contato@talesaugusto.com.br

É isso aí pessoal, espero que ter conseguido passar alguma informação útil a vocês.

Abraços.