Tempo: 31:42 min

Descrição: Nesse pocket vídeo veremos como realizar as funções de CRUD (Create, Read, UPDATE e DELETE) utilizando AJAX. Utilizando um exemplo eficaz para demonstrar uma maneira simples de realizar as requisições sem que seja preciso dar refresh na tela, de forma que possa ser transferido facilmente para o mundo real. Utilizando as funções do jQuery que encapsula as funções AJAX e o formato de dados JSON como retorno das consultas.

Tempo: 24:52 min

Descrição: Nesse pocket vídeo veremos como validar formulários HTML com o JQuery Validator, ferramenta para validação que trabalha em conjunto com JQuery. Ele nos fornece uma maneira simples e de fácil manutenção e ampliação alem de manter o código limpo e possivelmente livre e “alerts” .

Tempo: 15:14 min

Descrição: Nesse pocket vídeo veremos como desenhar gráficos com a biblioteca Chart Tools do Google. Biblioteca essa que provê uma interface simples, robusta e muito eficiente para desenharmos desde gráficos mais comuns até formatos mais específicos. Nesse vídeo veremos através de exemplos alguns dos tipo mais comuns de gráficos.

Tecnologias e Recursos: Netbeans, Javascript, Html, Ajax API do Google

Tempo: 17:22 min

Descrição: Nesse pocket vídeo veremos como realizar requisições ajax utilizando o framework JQuery, um dos mais utilizados framework para javascript. Veremos por meio de um exemplo prático o quão simples é para fazer uma funcionalidade muito usada em aplicações comerciais.

Tecnologias e Recursos: Netbeans, Javascript, HTML, PHP, JSON, MySql

Introdução

Todo bom framework deve oferecer, de alguma forma, a possibilidade de gerar código, e o CakePHP como bom framework que é, nos fornece o Cake Bake, que é uma aplicação console que faz uma boa parte do trabalho para nós.

Gerando um código muito organizado e limpo, inclusive com comentários nas funções, ele constrói as ações do CRUD e suas views, como também mensagens de erros e sucessos. Embora essas mensagens sejam criadas em inglês, traduzi-las será pouco a fazer comparado ao tempo que economizamos.

Sem mais delongas vamos ao que interessa.

O que é o CakeBake?

O CAkeBake é o nosso “padeiro”, ou seja, é uma aplicação console para gerar código PHP no framework CakePHP, que pode ser muito útil quando estamos começando uma aplicação do zero, já que precisamos que nossas tabelas sigam as normas do framework.

O que é preciso para usar o CakeBake?

Primeiramente é preciso que tenhamos o PHP instalado e configurado no path do sistema. Caso esteja usando uma distribuição Linux, basta instalar a versão mais nova do PHP que o mesmo já é configurado. No caso do Windows, precisamos fazer isso manualmente, configurando as variáveis de ambiente, adicionando o caminho do diretório do PHP. Caso esteja usando o xampp, por exemplo, devemos adicionar o seguinte caminho “c:\xampp\php”, conforme a figura 1.

Figura 1: Configuração das variáveis de ambiente

Em segundo lugar temos que garantir que as tabelas do nosso banco seguem o padrão que o Cake sugere, como, por exemplo, nomes das tabelas devem ter “s” no final. Por exemplo: “produtos, categorias”. Todas as tabelas deve ter um campo chamado “id” como chave primária, inclusive as tabelas criadas para relacionamentos N para N. Podemos conferir as convenções do CakePHP no seguinte link: http://book.cakephp.org/2.0/pt/getting-started/cakephp-conventions.html.

Vamos colocar a mão na massa

Nada melhor que a prática, então vamos testar usando o velho e bom exemplo do Blog, que terá posts e os posts terão categorias. Comece baixando a versão mais recente do CakePHP em www.cakephp.org, extraia os arquivos e renomeie para post. Veja o script do banco de dados na Listagem 1.

Listagem 1: Script do banco de dados

--
-- Estrutura da tabela `categorias`
--
CREATE TA

Olá, Tudo bem? Vamos trabalhar neste artigo uma visão introdutória da API do Google Maps, de modo que serão utilizados exemplos básicos, afim que venha a despertar a curiosidade e estimular o uso da mesma em nossas aplicações.

O que é a Google Maps API?

É um serviço público e gratuito que qualquer pessoa pode usar em seus sites e aplicações. Desde que o usuário final não seja cobrado, pode usar este serviço, para isto existe a versão paga da API, mas não é o caso para este artigo que visa apenas o estudo e compreensão da mesma.

Na verdade o Google Maps possui várias API’s que podem ser incorporadas ao site/aplicação dependendo de cada caso. Vejamos na tabela abaixo essas API’s e suas descrições retiradas do site oficial da API.

No desenvolvimento de um software a validação dos dados de entrada pelo usuário é muito importante. Em aplicações web não é diferente, precisamos validar nossos inputs. Podemos fazer basicamente dois tipos de validações, server-side e cliente-side. Nesse artigo vamos abordar o tipo cliente-side que é a validação feita antes dos dados serem enviados para o servidor.

Para isso usamos normalmente Javascript puro criando nossas funções de validações especificas para cada campo mesmo que as lógicas se repitam, como por exemplo campos que não podem ficar vazios, esse tipo de campo pode se repetir em inúmeras páginas de uma aplicação e sempre temos que reescrever a função que valida campos vazios.

Então imagine um sistema de médio porte que tem muitas páginas e muitas validações que se repetem de várias maneiras até que um dia um dos programadores pensa: “vou criar uma função de validação genérica que vai contemplar regras de forma que eu precise apenas dizer essas regras, então vou escrever menos e fazer mais”.

Esse programador teve realmente uma boa ideia, pois ele só teria que escrever aquelas validações mais específicas. Porém ele só não percebeu duas coisas, ele disse que iria criar, isso demandaria muito tempo talvez, muito certamente, os prazos não contemplariam esse trabalho, logo, ele teria que procurar alguma coisa na internet, por exemplo. A segunda coisa que ele não percebeu foi que ele já deu a solução quando continuou: “vou escrever menos e fazer mais”. Isso é jQuery (Write Less, Do More).

E é exatamente jQuery que vamos usar nesse artigo, afinal para que escrever um coisa que alguém já fez para você, não seja vaidoso.

Para ser mais específico não vamos usar apenas jQuery, usaremos junto com ela o seu plugin de validação. Então baixe a versão 1.10.0 do plugin nesse link: http://jquery.bassistance.de/validate/jquery-validation-1.10.0.zip e dentro da pasta compactada terá tudo que precisaremos para realizar o exemplo a seguir do artigo. Ao descompactar, procure nas patas lib e dist pelos arquivos jquery-1.7.2.js, jquery.validate.js e additional-methods.js e extraia-os.

Agora vamos criar nosso esquema para desenvolver os exemplos. Como não vamos usar nenhuma linguagem server-side então podemos criar nossas pastas dentro de qualquer outra, como em c:\validacao e dento desta uma outra chamada js onde devemos colocar os arquivo que extraímos anteriormente e outra chamada css para alguns estilos que usaremos também.

Pronto, estamos prontos para criar nosso formulários. Num primeiro exemplo criaremos um formulário com 3 campos: um numérico que terá um tamanho máximo de 15 caracteres, um do tipo password e outro que deve ter um valor predefinido, e por fim o botão para submeter o formulário. Vejamos a Listagem 1 com o código HTML do formulário.

Listagem 1: Formulário para exemplo de validação(form.html)

<html>
<head>
	<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
	<script src="js/jquery.validate.js"type="text/javascript"></script>
	<script src="js/validacao.js"type="text/javascript"></script>
	<link "css/css.css" rel="stylesheet" type="text/css"/>	
</head>
<body>
<h2>Exemplo de Validação</h2>
<div id

Sem dúvida alguma, gráficos são uma fonte importante de informação, sendo assim são imprescindíveis a boa partes dos sistemas. No decorrer do artigo vamos aprender a construir gráficos utilizando Javascript.

Gráficos oferecem certa dificuldade para sua construção em qualquer linguagem, mas para que reinventar a roda se alguém já fez isso (e muito bem feito) para nós?

Com uma rápida procura na internet encontraremos algumas bibliotecas para este propósito, mas para esse artigo vamos usar a biblioteca do Google, a Google Chart Tools, pois é tida por muitos como a melhor disponível hoje em dia por ser de uma clareza muito grande, ter uma curva de aprendizagem pequena e uma documentação muito boa.

Com ela podemos desenhar os principais tipos de gráficos, torta (pizza), barras, linhas, tabelas entre outros. Veja alguns exemplos na Figura 1.

Figura 1: Exemplos de gráficos criados com a Google Chart Tools

Desenhando os Gráficos.

Vamos colocar a mão na massa, ou melhor, no código. Vamos começar com o gráfico torta (pizza), em inglês Pie.

Mas antes de mais nada precisamos incorporar a biblioteca e importar o core do Google Chart Tools. Acompanhe a Listagem 1.

Listagem 1: Incorporando biblioteca

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
    </script>
  </head>
</html>

A listagem é bastante autoexplicativa, mas por desencargo de consciência vejamos alguns comentários: na linha 3 importamos a API do Google e na linha 5 carregamos o modulo visualization do pacote corechart.

Pronto, agora sim podemos começar a brincadeira de verdade. Vamos implementar um gráfico do formato Pie com as porcentagens de qual linguagem de programação gostamos mais.

Listagem 2: Desenhando o gráfico de torta

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
		//carregando modulo visualization
      google.load("visualization", "1", {packages:["corechart"]});
      
	  //função de monta e desenha o gráfico
      function drawChart() {
	//variavel com armazenamos os dados, um array de array's 
	//no qual a primeira posição são os nomes das colunas
	var data = google.visualization.arrayToDataTable([
          ['Linguagem', 'Quando gosto dela'],
          ['Java',     40],
          ['PHP',      30],
          ['Javascript',  25],
          ['C#', 5],
          
        ]);
		//opções para exibição do gráfico
        var options = {
          		title: 'Linguagens',//titulo do gráfico
		is3D: true // false para 2d e true para 3d o padrão é false
        };
		//cria novo objeto PeiChart que recebe 
		//como parâmetro uma div onde o gráfico será desenhado
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
		//desenha passando os dados e as opções
        chart.draw(data, options);
      }
	//metodo chamado após o carregamento
	 google.setOnLoadCallback(drawChart);
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Foram colocados comentários no meio do código para que fique mais claro de acompanhar cada passo, porém muitas outras opções podem ser usadas. Podem ser tantas que não iremos colocá-las aqui, mas haverá um link no final desse artigo onde podemos encontrar todos os detalhes sobre as mesmas.

Continuando, vamos desenhar mais três tipos de gráficos, Linhas, Barras e Tabelas.

Basicamente o que muda de um tipo de gráfico para outro no que diz respeito ao código é o formato do array de dados que passamos para ele e o objeto que é instanciado. Vejamos, por exemplo, os dos formatos Linhas e Barras que tem o formato de dados idênticos.

Listagem 3: desenhando g

Com a chegada do HTML5 temos muitas novidades, umas conceituais outras mais visíveis, entre estas podemos destacar a criação de três novas tags, <vídeo>,<áudio> e <canvas>. As duas primeiras serão abordadas aqui nesse artigo, enquanto sobre a <canvas> já foi escrito um artigo que você pode conferir aqui nesse link: http://www.devmedia.com.br/html5-a-tag-canvas/25413.

Para quem ainda não sabe, as tag's <audio> e <vídeo> são tag's de media que foram criadas, entre outros motivos, para acabar com a dependência de plugin's para a reprodução de áudio e vídeo nas páginas. Dessa forma em sites que precisaríamos ter instalado o Flash, por exemplo o Youtube, não iremos mais, basta que sejam implementadas essas novas tag's e que tenhamos um navegador compatível com HTML5, o que não é incomum hoje em dia tendo em vista que todos os navegadores mais recente são. O IE8 foge dessa lista apenas o IE9 suporta o HTML5.

Como já sabemos, a simplicidade é uma das características do HTML5, para estas tag's isso não é diferente, pois agora passaremos a manipular áudio e vídeo praticamente como manipulamos a inserção de imagens.

Sabendo disso vejamos a seguir algumas características e demonstrações de ambas, de maneira a abordar o básico porém funcional. Vamos começar com a tag <audio>.

A tag <áudio>

Como o nome já sugere esta tag serve para reproduzirmos uma mídia de áudio, vejamos:

Listagem 1: Demonstração básica do uso da tag <audio>

<!DOCTYPE HTML>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML5 Audio</title>
</head>

<body>
<audio autoplay="autoplay" controls="controls">
<source src="sua_musica.mp3" type="audio/mp3" />
seu navegador não suporta HTML5
</audio>
</body>

</html>

Na Listagem 1 temos um exemplo básico do uso da tag <audio>, nela estamos setando autoplay e controls, que servem para tocar automaticamente e habilitar os controles do player, respequitivamente. Será reproduzida a mídia sua_musica.mp3 definina na tag <source> dentro da tag <audio> pela propriedade “src”. Veja a Imagem 1 como ficaria no navegador:

Figura 1: Player criado pela tag <audio>

Caso seu navegador não suporte o HTML5 você verá o seguinte: “seu navegador não suporta HTML5”

Como é por natureza um componente HTML e não um plugin, podemos fazer alguma modificações no player via CSS, como por exemplo, cor, tamanho, float e position.

Pode ser feita também a customização por outros elementos HTML e por meio de Javascript podemos controlar propriedades como o PLAY, PAUSE, VOLUME e por CSS criamos nosso próprio player.

Listagem 2: Controle da tag áudio por Javascript

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML5 Audio</title>
</head>

<body>
<audio autoplay="autoplay" controls="controls">
	<source src="sua_musica.mp3" type="audio/mp3" />
	seu navegador não suporta HTML5
</audio>
</body>

</html>

O código acima resultaria mais ou menos como na Figura 2:

Figura 2: Controlando o áudio por Javascript

Este é apenas um exemplo básico, mas com um pouco conhecimento em javascript e CSS pode-se fazer um player muito bom. Dessa forma podemos desabilitar o atributo “controls”, para que tenhamos o controle apenas pelo nosso proprío player.

Os atributos da tag <audio>:

Hoje em dia não podemos pensar em aplicações web sem o uso de Javascript, por isso nada mais natural do que o aparecimento de diversas bibliotecas ou frameworks que facilitem a utilização da mesma. Entre essas bibliotecas está a jQuery, a mais conhecida, tanto que alguns desenvolvedores não conhecem outras. Seguindo esse preceito, esse artigo abordará de maneira simples uma apresentação de outra biblioteca Javascript, a Dojo Toolkit.

Olá! Eu sou o Dojo Toolkit

Como já foi mencionado, o Dojo Toolkit é uma biblioteca Javascript que traz muito mais produtividade ao desenvolvimento de nossas aplicações. Veja algumas características da mesma:

• Código aberto.
• Modular.
• Sintaxe simplificada.
• Funções para chamadas AJAX.
• Componentes gráficos.
• Efeitos visuais.
• Validações.

Esses recursos podem nos proporcionar um código mais legível e com muito menos linhas. No decorrer desse artigo iremos ver estes recursos na prática.

Dojo VS jQuery

É impossível não fazermos uma comparação com a biblioteca jQuery. Nesse contexto podemos dizer que o Dojo ToolKit é menos extensível do que a outra, porém, seu escopo é muito maior, enquanto o jQuery é mais leve para o navegador, sendo que não podemos esquecer dos inúmeros plugins para jQuery que existem tornando esta tão completa quanto o Dojo Toolkit .

É importante resaltar também que o Dojo é modular, ou seja, podemos carregar apenas os componentes que formos utilizar.

Portanto, podemos dizer que a escolha de qual usar depende do projeto em que será aplicado.

Baixando e Testando o Dojo Toolkit

Para baixarmos a versão mais atual da biblioteca basta clicar no link http://dojotoolkit.org/download/ e baixar a versão em formato zip. No momento de escrita desse post a versão 1.7.3 é a mais recente.

Ao descompactar o zip baixado você terá três pastas.

Podemos usar também a versão do Goolge CDN pelo endereço http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js.

Vejamos na Listagem 1 um exemplo simples, famoso Hello World, incorporando pelo endereço do Google.

Listagem 1: Hello World com oDojo Toolkit.

<!DOCTYPE html>
<html>
<head>   
    <title>Hello

Atenção! Neste artigo julgo que os leitores já têm conhecimento sobre HTML, tendo em vista que não será abordada a iniciação ao mesmo.

O que é HTML5?

Antes de falarmos do HTML5, precisamos lembrar-nos do HTML4 que, quando foi lançado, a comunidade de desenvolvedores foi alertada de boas práticas que deveria seguir. Formatação, separação de código, acessibilidade eram algumas dessas boas práticas.

Porém essa versão ainda não trazia um grande diferencial e também não facilitava o uso de Javascript e CSS.

O HTML5, logicamente, é a evolução direta do HTML4, a qual corrige bugs de sua versão anterior e principalmente traz muitas melhorias à linguagem, pois tem como um de seus objetivos facilitar a manipulação do elemento possibilitando ao desenvolvedor modificar as características do objeto de forma não intrusiva.

Entre outras características, a 5ª versão do HTML vem com novas tags, como por exemplo: <video>, <audio> e <canvas>.

Visto isto, podemos dar início ao principal foco deste artigo, que é entender e exemplificar a tag .

A tag canvas

A canvas nada mais é do que um espaço onde podemos desenhar elementos específicos, formas geométricas e imagens, por exemplo, através de script (javascript geralmente). Também podemos usar CSS para a tag .

Por Javascript podemos acessar métodos da canvas que desenham formas, linhas, caracteres e adicionar imagens.

Lembre-se que em uma canvas podemos apenas desenhar elementos gráficos e não elementos HTML, por exemplo, uma

<!DOCTYPE html>
<html>
<body>
<canvas id="idCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Se seu navegador não suportar HTML5 você verá esta mensagem.
</canvas>
</body>
</html>

Mas primeiro...

Se você está querendo aprender Java, você está no lugar errado.

Antes de começarmos, saibam que o Java Servlet roda em um servidor de aplicação que fica instalado no servidor. Um muito usado é o Apache Tomcat, não irei falar sobre ele já que não é o foco deste artigo, mas espero que pesquisem um pouco sobre o mesmo e instalem-no na sua IDE de preferência o eclipse, pois no ultimo tópico deste artigo faremos um exemplo usando o Tomcat junto com o eclipse.

O que é um Servlet?

O nome “servlet” vem do inglês e dá uma ideia de servidor pequeno cujo objetivo basicamente é receber requisições HTTP, processá-las e responder ao cliente, essa resposta pode ser um HTML, uma imagem etc.

Em Java, procuramos sempre trabalhar orientado a objeto, portanto essa nosso servlet será também um objeto de uma classe Java.

O funcionamento se dá da seguinte forma:

1. Cliente (navegador) faz uma requisição HTTP ao servidor.
2. O servlet responsável trata a requisição e responde ao cliente de acordo.
3. O cliente resebe os dados e exibe.

Para esse artigo abordaremos os comportamentos de servlet que foram definidos na classe HttpServlet do pacote javax.servlet, que é usada em quase em quase 99% dos casos.

Para criarmos uma classe servlet ela terá que ser subclasse de HttpServlet e sobrescrever o método service(), que é responsável por receber as requisições e retornar suas respostas.Vejamos como ficaria:

Listagem 01: Estrutura básica de um servlet.

public class OlaMundo extends HttpServlet {
	protected void service (HttpServletRequest request,
	HttpServletResponse response)
		throws ServletException, IOException {
		// tratamentos
	}
 }

Em outro tópico desse artigo irei mostrar um “hello world”, por isso deixemos o código da listagem assim por enquanto.

Observação: em Java classes java são compiladas em bytecode, dessa forma nosso servlet também será compilado.

Mapeamento do Servlet

Servlet definido, mas como acessá-lo pelo navegador? Para uma página HTML basta passarmos a url e pronto, ela é interpretada pelo navegador, mas acessar a nossa classe pela url seria muito complexo.

Para solucionar a questão, ma

O que é Serialização de dados?

Basicamente é o processo de salvar dados de um objeto, mas não obrigatoriamente um objeto, em algum lugar ou transmiti-lo pela rede, num formato binário eu de texto. Sendo que esses bytes poderão ser utilizados para reconstruir perfeitamente o que foi serializado.

Um exemplo muito claro disso, que muitos usam, pois é muito bom, é que quando você está jogando um joginho e precisa fazer uma parada, mas não quer perder o estado do jogo, o que você faz? Salva (“serializa”) em algum lugar para depois carregar (“deserializa”) o jogo e tudo volta de onde parou.

Serializando no PHP

Primeiro quero dizer que a Serialização não é coisa nova não e muito menos exclusivo do PHP.

No PHP ela é feita de forma extremamente simples, usamos o método serialize() que recebe o que deve ser serializado. Vejam:

Listagem 01: Serializando

<?php
$array = array( "a","b","c","d","e" );
$serializado = serialize($array);
echo $serializado;
//resultado a:5:{i:0;s:1:"a";i:1;s:1:"b";i:2;s:1:"c";i:3;s:1:"d";i:4;s:1:"e";}
?>

Lembrando que não podemos serializar recursos, ou seja, arquivos, conexão como banco de dados, etc. E que tudo que você coloca numa variável de sessão é serializado automaticamente.

Restaurando os Dados

Para restaurar os dados serializados usamos a função unserialize() que recebe o dado serializado, interpreta a string e traz de volta o que foi serializado. Vejam como ficaria para o exemplo da Listagem 01:

Listagem 02: Restaurando os dados

<?php
$serialziado = 'a:5:{i:0;s:1:"a";i:1;s:1:"b";i:2;s:1:"c";i:3;s:1:"d";i:4;s:1:"e";}';
$array = unserialize($serialziado);
var_dump($array);
/*
array(5) { 
	[0]=> string(1) "a" 
	[1]=> string(1) "b" 
	[2]=> string(1) "c" 
	[3]=> string(1) "d" 
	[4]=> string(1) "e" 
	}
*/
?>

Caso a string passada não sej

Cache é uma espécie de armazenamento temporário que ajuda a reduzir a carga no servidor. Por exemplo, você poderia armazenar resultados de uma consulta demorada de banco de dados de forma que não precisasse ser executada a cada vez que a página fosse carregada.

O CacheHelper faz com que o conteúdo de views e layouts sejam mantidos no cache do navegador, economizando o tempo da obtenção de dados. O cache de views no CakePHP armazena temporariamente o código renderizado usando o mecanismo de armazenamento definido.

O helper funciona de forma diferente de outros helpers. Ele não possui métodos a serem chamados diretamente. Ao invés disso, uma view é marcada com tags de cache indicando quais blocos de conteúdo não devem ser cacheados.

Quando uma URL é requisitada, o Cake verifica se a string da requisição já está em cache. Se já estiver, o restante do processo de expedição da URL é simplesmente ignorado. Todos os blocos que não tenham sido marcados serão processados normalmente. Isto cria uma grande economia de tempo de processamento para cada requisição à URL cacheada uma vez que um mínimo de código é de fato executado. Se o Cake não encontrar uma view no cache ou se o cache para aquela view já estiver expirado, ele continua o processo da requisição normalmente.

Usando o CacheHelper

Para usar o CacheHelper devemos seguir dois passos: o primeiro é descomentar a linha 130 de app/Config/core.php isto vai dizer ao cake para checar e gerar views com cahe.

Listagem 01: Descomentando linha para verificação do cache

/**
 * Enable cache checking.
 *
 * If set to true, for view caching you must still use the controller
 * public $cacheAction inside your controllers to define caching settings.
 * You can either set it controller-wide by 

Veja nesse artigo como criar e instalar nossos próprios helpers e components bem como também instalar helpers de terceiros.

Atenção! Para este artigo julgo que os leitores já tem conhecimento básico sobre o framework. Também recomendo a leitura desse artigo Components, Helpers, Behaviour e Data Soucers - CakePHP.

O CakePHP em sua instalação básica já nos fornece bons helpers e components, como por exemplo:

Helpers

• Html
• Form
• Number
• Time

Components

• Session
• Security
• Auth
• Email
• Cookies

Porem, em certos momentos precisamos de algo mais especifico para nossa situação. Muitos desses podem ser baixados em http://bakery.cakephp.org/ e claro que também podemos criar os nossos.

Criando e instalando Helpers.

Já sabemos que os helpers funcionam como uma extensão da view, um lugar onde são colocados códigos que poderão ser usados em todas as views, ou simplesmente para não poluir a view. Formatar data, moeda, componentes HTML pré-formatados, entre outros, são exemplos do que podemos colocar dentro de um helper.

Então, devemos sempre pensar antes de criar um helper se ele atende a esses requisitos, afinal o objetivo é escrever apenas o necessário. Caso não, então opte usar uma função simples, mas, cuidado para não poluir a view ou você vai ter uma grande dor de cabeça na hora de realizar manutenção nela.

A criação de um helper envolve poucas regras, veja:

Digamos que queremos um helper que cria links. Então vamos criar um arquivo com o seguinte código.

Listagem 01: Criando um helper

<?php
App::uses('AppHelper', 'View/Helper');
class LinkHelper extends AppHelper {
    public function makeLink($titulo, $url) {
        //logica para criar um link personalizado
    }
}
?>

Agora salvemos esse arquivo com em app/View/Helper/ com o nome LinkHelper.php, simples não? Então o que podemos observar aqui em relação a regras foi que todos helpers devem ser filhos de AppHelper, serem salvos em app/View/Helper/ e o nome da classe deve ser no formato NomeHelper e de o mesmo acrescido de .php para o nome do arquivo.

Nesse nosso helper, fica claro a similaridade com o HtmlHelper, então seria muito bom que pudéssemos juntar os dois em um só, não seria? E é possível de forma muito simples, basta fazer como se estivéssemos em um controller, veja:

Listagem 02

Atenção! Para esse artigo julgo que o leitor já tem conhecimento básico do framework.

Bem, vou explicar nesse artigo uma das formas de realizar chamadas Ajax dentro do CakePHP. Na verdade, essa é apenas uma forma pessoal, pois não é a única maneira de fazer. Podemos utilizar, por exemplo, helpers que você pode baixar em http://bakery.cakephp.org/, mas faremos de uma forma simples e um pouco na mão mesmo.

Para esse exemplo iremos utiliza a biblioteca Javascript JQuery, então você deve baixa-la e coloca-la em app/webroot/js, nessa pasta devemos colocar todos os arquivos javascript do nosso sistema.

Antes de prosseguirmos irei detalhar mais um pouco essa pasta webroot. Ela tem um comportamento de raiz do projeto, graças as regras que foram definidas no arquivo htacess, dessa forma para acessar uma das subpastas dela basta fazermos “/js”, por exemplo. Vejamos suas subpastas e seus comportamentos:

webroot: arquivos públicos que podem ser acessados em todo o sistema.

• Css: arquivos de folha de estilos.
• Js: aquivos javascript.
• Img: imagens de todos os formatos suportados.
• Files: local recomendado para onde subir arquivos.

Usando esse padrão ficará mais fácil trabalhar com o HtmlHelper quando quisermos importar um arquivo.

Basicamente serão quatro etapas.

1. Montar o comportamento esperado pela view que fará a chamada Ajax.
2. Criar um arquivo Javascript com uma função que faça a requisição Ajax.
3. Criar uma função no Controller para a chamada Ajax e outra para a view.
4. Criar um arquivo ctp para rec o resultado da chamada e ser incorporado na página.

Essa maneira, de divisão por etapas, é só uma forma de organizar esse artigo, mas o que se deve é entender o funcionamento das requisições, ou seja, não importa a ordem das etapas e sim o que cada uma delas faz.

Etapa 1 - A View

Criarei uma view para o seu único propósito é exibir uma mensagem em uma div quando o usuário clicar num link.

Lembrando que primeiramente devemos importar o JQuery.

Veja o código.

Listagem 1: Criando a view

/*
usando o HtmlHe

Atenção! Para esse artigo julgo que os leitores já tem conhecimento básico sobre o framework.

Sem dúvida alguma, um dos princípios de segurança de um sistema é a restrição por login e para um sistema WEB esse cenário não é diferente tendo em vista que as aplicações ficam disponíveis por uma URL para todos na internet.

E para o que seria um trabalho duro e um pouco demorado da construção de toda uma regra, criptografia e esses tipo de coisas o CakePHP traz o Authcomponent que tem toda essa parte pronta e nós vamos nos preocupar em algumas poucas configurações em relação ao banco de dados e as permissões.

Sabendo disso, vou exemplificar o uso do componente através de um exemplo simples levando em conta que as normas do cake, como vínhamos sempre fazendo, tendo como foco demonstrar as funcionalidades básicas do componente. Não irei entrar em detalhes do mesmo, pois isso quebraria o nosso foco, caso depois de ler o artigo você queria saber mais sobre o componente você pode procurar no Manual do CakePHP.

Montando a tabela

Vamos começas pela estrutura do abanco de dados, criando a tabela de usuários, aqui vamos seguir como manda o cake, porém nada é obrigatório e tudo pode ser configurável, mas a termos de exemplo veremos o básico. Veja.

Listagem 1: Preparando a tabela de usuários

CREATE TABLE `users` (
`id` int(11) NOT NULL auto_increment,
`username` varchar(255) default NULL,
`password` char(64) default NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

Criando o Model e o Controller

As próximas linhas já são bem conhecidas, criaremos as classes Model e Controller para a tabela users seguindo as normas do cake.

Listagem 2: criando o model e o controller

//model
class User extends AppModel{}
//controller
class UsersCotroller extends AppController{

public function login(){}

public function logout(){}

public function areaPublic(){}

public function areaRestrita(){}
public funtion add(){
	if($this->request->is(“post”)){
		$this->User->save($this->request->data);
	}
}

}

Crie o controller com algumas funções, nas quais apenas a add() tem um corpo mas as outras logo faram sentido, embora seja claramente perceptível os futuros usos delas.

Criando as Views

A criação das views também é um processo já trabalhado em outros artigos, então não vou descrever sua criação, vamos por logo a mão na massa.

Listagem 3: criando as views

//area_publica.ctp
<?php echo (“isso aqui qual quer pessoa pode ver”)?>
//area_publica.ctp
<?php echo (“isso aqui apenas pessoas logadas podem ver”)?>
//logout.ctp
<?php echo (“xau”) ?>

//login.ctp
<?php 
<div class="users form">
<?php 
//definimos onde vão aparecer as mensagens enviadas pelo auth
//fica disponível graças ao componente Auth que vamos adicionar logo logo.
 echo $this->Session->flash('auth'); 
?>
<?php echo $this->Form->create('User');?>
    <fieldset>
        <legend><?php echo __('Login'); ?></legend>
    <?php
        echo $this->Form->input('username',array('label'=>'Usuário'));
        echo $this->Form->input('password',array('label'=>'Senha'));
    ?>
    </fieldset>
<?php echo $this->Form->end(__('Login'));?>
</div>

O uso de Strings é comum a todas as aplicações, afinal, eu nunca vi uma aplicação que, pelo menos, não escreva nada na tela. E sabemos que usamos strings para diversas coisas, como: propriedades de objetos, display, ler dados de arquivos e querys entre outros.

O Java nos dá três classes para trabalharmos com Strings, são elas: String, StringBuilder e StringBuffer, e por isso devemos ter cuidado na hora de usa-las pois com uso bem feito podemos obter melhor desempenho em nossa aplicações.

Dito isto, podemos partir para nosso objetivo que será demonstrar através de exemplos simples uma maneira eficaz de aumentar o desempenho de nossas aplicações através do uso correto de Strings. De antemão quero ressaltar que esse artigo não explorará todos os aspectos das classes acima, mas apenas aqueles que nos levarão a conclusão do mesmo.

Para um iniciante é comum ver que ele sai usando a classe String a torto e a direito, pois talvez não conheça a API do Java suficientemente para saber ao certo qual melhor classe usar. Mas isso numa aplicação real a utilização de muitas Strings tem um grande custo. Vejamos o exemplo no qual temos várias concatenações utilizando a classe String e símbolo de “+” para concatenar.

Listagem 1: Exemplo de uso de String

public class TestString {	
	public static void main(String[] args){
		String msg = "";		
		for(int x = 0;x <= 10000; x++){			
			msg +=  "O valor de x é = " + x + "\n";		
		}

Sabe quando queremos fazer uma coisa sempre quando outra acontece? Por exemplo, antes de fazer alguma coisa no model, fazer uma chamada aos métodos para salvar, buscar e excluir. Nesses casos, podemos sobrescrever os métodos de callback, os quais são apresentados a seguir.

• beforeFind(mixed $queryData)
• afterFind(array $results, bool $primary)
• beforeValidate()
• beforeSave()
• afterSave(boolean $created)
• beforeDelete(boolean $cascade)
• afterDelete()
• onError()

Podemos sobrescrevê-los tanto nos model’s quanto no AppModel para tornar as mudanças globais. Vamos ver cada um deles agora.

BeforeFind

Esse método é chamado antes de toda função find().

A variável $queryData carrega informações sobre a query, como condições e campos.

Dentro de seu corpo podemos fazer, por exemplo, uma validação e parar a chamada baseada na mesma.

Listagem 1: Sobrescrita do método beforeFind.

public function beforeFinder($queryData){
	if(empty($queryData)) return false;
}

AfterFind

Como podemos presumir, ela é chamada depois da função find(). Podemos usá-la para alterar o resultado da consulta, ou, mais uma validação.

A variável $resu

Falarei aqui sobre alguns pontos no desenvolvimento com o CakePHP que exigem um certo conhecimento do mesmo, então, caso você seja um iniciante, recomendo que você leia outros artigos para poder entender primeiro do básico.

Apresentando

As camadas do bolo nos já bem conhecemos, mas cada uma dessas camadas tem seus adereços. Um deles é o Helper (o FormHelper especificamente). Então vejamos a tabela do relacionamento entre essas camadas e seus adereços.