quarta-feira, 29 de junho de 2011

SELETORES JQUERY

Olá amigos! Hoje vou sair um pouco do desenvolvimento com ZEND FRAMEWORK para outro assunto muito importante que é o desenvolvimento FRONT END, mais propriamente vou ensinar a utilizar a maior biblioteca js(javascript) do mundo o JQUERY e para começar bem com ele vou explicar em diversas postagens vários metodos do JQUERY.


(LOGO JQUERY COM SLOGAN 'ESCREVA MENOS, FAÇA MAIS)




Mas o que é de fato o JQUERY?

 Bem jQuery é uma Biblioteca JavaScript que simplifica percorrer documentos HTML, manipulação de eventos, animação e interações Ajax para desenvolvimento web rápido. jQuery é projetado para mudar a maneira que você escreve JavaScript.  



Caso vc tenha dúvida acesse o site para entender melhor! Para entender bem esses posts vc precisa entender um pouco sobre HTML e JAVASCRIPT.


MÃOS A OBRA
Hoje vou explicar basicamente como percorrer nosso elemento DOM a fim de selecionar um elemento para posteriormente fazer algo com ele...


Antes de tentar fazer qualquer coisa com o jquery vc precisa primeiro baixar a biblioteca, no nosso caso vamos apenas chamar direto do google, antes do head faça:


(TIRE OS ESPAÇOS)



< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">< / script >




Imaginemos um html escrito dessa maneira(não vou escrever a página inteira mas apenas oq eu vou explicar):




< ul >
 < li > ITEM 1 < / li>
 < li > ITEM 2 < / li>
< / ul >



Eu quero selecionar apenar o item 2 e ocultar ele como eu faria? Preciso percorrer o HTML


< scrip >
  $('li:eq(1)').hide();
< / script >



O que foi feito aqui em cima é bemm simples, apenas utilizamos o seletor personalizado de índice que é o :eq() ... entramos com o jquery $() depois falamos que queremos um li e nele usamos o eq posição 1 (o jquery percorre o DOM como um array e ja que começa do zero estamos selecionando o segundo li 'ITEM 2' e depois disso utilizando o metodo .hide(); ou seja quando vc abrir essa página a lista 2 some. Pode parecer totalmente simples (e é) mas o intuito aqui é vc entender a possibilidade desses seletores, com isso vc faz muita coisa como por exemplo "a partir do evento clique eu oculto parte do menu ou aquela opção..." isso ja depende da sua necessidade mesmo!

Espero ter ajudado...



  



terça-feira, 28 de junho de 2011

Enviando e-mail com ZEND FRAMEWORK


Mais um post sobre ZEND FRAMEWORK e dessa vez será algo bem simples mas muito util que é enviar e-mail com zend framework.
Para isso vamos utilizar a classe Zend_Mail


Como foi dito em outras postagens vc precisa conhecer o funcionamento do zend para enviar o e-mail dessa forma ok? Vou partir tambem do principio que vc sabe em que controller irá colocar o envio do e-mail o intuito aqui é ensinar como fazer isso.


Zend_Mail provê um conjunto de características gerais para compor e enviar mensagens, tanto de texto quanto mensagens de correio eletrônico multipart, em conformidade com MIME.


O correio pode ser enviado via Zend_Mail_Transport_Smtp ou Zend_Mail_Transport_Sendmail (lembra-se do mail do php? padrão)


Vamos para de falar e colocar na prática uma mensagem de e-mail simples, vou enviar para meu amigo que tem o e-mail 'amigo@gmail.com'
do meu e-mail paulo.gomes@profpv.com veja que simples o uso dos metodos:


###########################################
//chamando o zend mail
require_once 'Zend/Mail.php';


//criando objeto $email
$email = new Zend_Mail();
$email->setBodyText('Mensagem aqui, ou seja todo o texto, ou amigo');
$email->setFrom('paulo.gomes@profpv.com', 'Eu mesmo o PV');
$email->addTo('amigo@gmail.com', 'Nome do amigo');
$email->setSubject('Assunto do e-mail');
//disparando e-mail
$email->send();
###########################################

Simples e rápido mas a classe não se limita a isso, é bem mais completa e assim que puder eu coloco algo sobre ela.


Uma dica final, se vc quer adicionar cópia oculta e etc o nome do metodo é intuitivo addCc() esse adiciona com cópi
e addBcc() adiciona com cópia oculta.


Espero ter ajudado e até a próxima.

segunda-feira, 27 de junho de 2011

Upload de vários arquivos com zend framework e jquery



Esse post é dedicado a você que precisa fazer upload multiplo de arquivo com zend, para isso alguns detalhes antes...

Entender o que vamos fazer...
Vc que precisa fazer upload multiplo com zend framework sua solução esta aqui, e o que é melhor ainda não vamos criar diversos inputs mas sim utilizar o nosso grande amigo JQUERY para organizar esse FRONTEND e com um único input vamos inserir todos os arquivos que nos interessar...

O que vc precisa saber para entender o tutorial...
Enteder MVC é essencial, e um pouco do funcionamento do ZEND FRAMEWORK é interessante, mas se vc utilizar outro framework como CODEIGNITER, CAKE,SYMPHONY ou YII irá entender perfeitamente tudo que irei explicar aqui.

Mãos a 'OBRA'...

Uma vez que o importante aqui é entender como montar esse multiplo upload com ZEND então vamos separar duas partes apenas do MVC que são o CONTROLLER (onde vamos montar a lógica do negócio)  e a VIEW (onde vamos receber os arquivos pelo usuário).

Vamos usar 3 arquivos somente
No Controller
IndexController.php

E na View (INDEX)
index.phtml e envia.phtml

Vamos começar pelo FRONTEND ou seja, pelo JQUERY...

Para inserir vários arquivos em um unico input utilizamos o plugin do JQUERY Multifile.

Carregue esses arquivos na view:
 Carregando js
  1. <?php
  2.  $this->headScript()->appendFile($this->baseUrl().'/js/jquery.js');
  3.  $this->headScript()->appendFile($this->baseUrl().'/js/jquery.MetaData.js');
  4.  $this->headScript()->appendFile($this->baseUrl().'/js/jquery.MultiFile.js');
  5. ?>

OBSERVAÇÃO: Preste atenção na chamada, eu coloquei os arquivos la na min ha public dentro do diretório js que eu mesmo criei, essa chamada deve ficar clara, é bem simples para você que esta acostumado mas vc que costuma chamar arquivos js e folhas de estilo procure lêr algo sobre o assunto pois a estrutura de diretório do zend é diferente.


Vamos para o simples html de upload da imagem:

  formulario de envio
  1. <form name="fotos" action="/index/envia" method="POST" enctype="multipart/form-data">
  2. <input type="file" name="foto[]"  class="multi" accept="jpeg|jpg|png|gif" maxlength="20" />
  3.         <button name="enviar" >enviar </button>
  4. </form>

Vc que esta acostumado com isso é simples mas vamos explicar:


Criamos o formulario mandando para a enviaAction do controller q vamos criar em breve...
Montamos o input colocando como nome um tipo array "
foto[]" e inserindo a classe "multi" (isso é necessário para chamar o multifle)
Ainda colocamos o parametro accept e quais formatos vamos aceitar o | serve para separar, por fim o maxlength que define a quantidade de arquivos que vamos aceitar, nesse caso aceito apenas 20 arquivos.
Percebem a velocidade q fizemos algo que alem de visualmente legal é bem funcional?
Bem, terminando o front end vamos abrir o arquivo IndexController.php

Vamos criar a action q ja falei 2 vezes acima... a tal da enviaAction:
public function enviaAction(){ 
}

...dentro dela vamos receber o arquivo utilizando a classe Zend_File_Transfer_Adapter_Http

ACTION PARA SUBIR ARQUIVO
  1.     public function enviaAction() {
  2.         /* Instancia Zend_File_Transfer_Adapter_Http */
  3.         $upload = new Zend_File_Transfer_Adapter_Http();
  4.         /* Destino do arquivo */
  5.         $upload->setDestination('temp/');
  6.         /* Pega info dos files */
  7.         $files = $upload->getFileInfo();
  8.         /* Faz laço dos files */
  9.         foreach ($files as $file => $info) {
  10.             /* Verifica se é valido */
  11.             if ($upload->isValid($file)) {
  12.                 /* Sobe */
  13.                 $upload->receive($file);
  14.             }
  15.         }

Vou explicar apenas o foreach pois os comentários estão bem intuitvos...
utilizamos o metodo getFileInfo(); da classe chamada, com ele transformamos nosso objeto $files em um array de dados e após esse array é só jogar no foreach perguntar se é valido e utilizar o método receive inserindo o indice que é o arquivo propriamente dito.

Mas e ai pv pq vc criou o envia.phtml na view? 
Resposta: A para exibir alguma mensagem do tipo "Arquivo enviado com sucesso" o correto era fazer o teste no controller e passar para a view um resultado tipo assim 
$this->view->result = $resultadocontroller....


Espero ter ajudado, vou arrumar meu esquema de cod pq escrever aqui fica maio bizarro hehehe...


Qualquer dúvida estamos ai =]

sábado, 18 de junho de 2011

Listas de definição, Dl, dt, dd

Estou reestruturando um código de um website aqui da empresa e para uma determinada tarefa eu achei melhor usar uma estrutura de listas de definição. Logo pensei: “putz, será que todo mundo sabe como e por que utilizar uma lista de definição?“. Então resolvi postar aqui no blog este artigo.
Bom, para iniciar o post, como o próprio nome diz, elas listas servem para construirem definições de termos. Na sua estrutura são usadas 3 tags: dl (definition list), dt (definition term) e dd (definition description), da seguinte forma:

dl
dt /dt
dd /dd
/dl

A tag dl é o container. Dentro da tag dt, você deve colocar o termo a ser definido. Já dentro da tag dd você deve colocar a descrição do termo.
Espero ter ajudado em mais este conceito. Até mais

Fonte: Fabricio cota