Postado por Carlos Fernando Sylverio | Categoria Programação, Tecnologia | Em 28-10-2009
1
Validation é um plugin do framework jQuery que permite fazer a validação de formulários de várias maneiras.
Neste post vou demonstrar como realizar algumas validações em um formulário utilizando o este plugin.
Para é necessário fazer o download do jQuery plugin: Validation
Pronto agora que temos todos os arquivos necessário, devemos incluir na tag
de nosso exemplo o seguinte trecho de código:
<script language="JavaScript" src="jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-validate/jquery.validate.js" type="text/javascript"></script>
Ainda dentro da tag head, inserimos o trecho de código que fará a validação de nosso formulário:
$(document).ready( function() {
$("#cadastro").validate({
// Define as regras
rules:{
nomeCliente:{
required: true,
minlength: 2
}
},
// Define as mensagens de erro para cada regra
messages:{
nomeCliente:{
required: "Digite o seu nome.",
minLength: "O seu nome deve conter, no mínimo, 2 caracteres."
}
}
});
});Agora é só inserir o código HTML do formulário a página:
<form id="cadastro" method="post" action="">
<p><label>Nome:</label><input type="text" id="nome_cliente" name="nomeCliente" /></p>
<input type="submit" value="Enviar" />
</form>Observe que as regras e mensagens aplicadas a caixa de texto são referênciadas pelo nome do elemento (atributo name) e não pelo id.
Dessa forma, podemos fazer validações de formulário, de uma forma simples e rápida. Mais informações e métodos de valições podem ser entrados na documentação oficial do JQuery.
Para quem conhece css, o código gerado ao apresentar a mensagem contem o atributo class com o valor error, que pode ser usado para aprimorar o layout do formulário.
<form id="cadastro" action="" method="post">
<p><label>Nome:</label><input id="nome_cliente" class="error" type="text" name="nomeCliente"/>
<label class="error" for="nome_cliente" generated="true">O seu nome deve conter, no mínimo, 2 caracteres.</label>
</p>
<input class="submit" type="submit" value="Enviar"/>
</form>Enjoy 
Postado por Carlos Fernando Sylverio | Categoria Programação, Tecnologia | Em 19-10-2009
0
O problema que o Ajax tenta resolver está enraizado no protocolo de comunicação HTTP. Isso porque esse protocolo é sem estado (stateless), assim o controle das ações executadas na aplicação cliente é controlado pelo código no servidor web. Ou seja, as alterações (ou entrada de dados) executadas na página web pelo usuário são enviadas para o servidor para que este atualize seu estado, e o servidor responde a alteração reenviado todo o HTML para o browser.
Mas o que é o Ajax?
Ajax é o acrônimo (da língua inglesa) de Asynchronous Javascript and XML, ele não é uma linguagem de programação e sim a combinação de tecnologias existentes (Javascript, XML e XmlHttpRequest) que nos permite realizar solicitações assíncronas ao servidor para busca de informações e/ou atualizar seu estado.
Em outras palavras o Ajax, é um objeto presente nos browser atuais que combinado com JavaScript pode se comunicar com o servidor Web sem recarregar e redesenhar a página inteira.
Utilizando do Ajax
O exemplo abaixo apresenta uma página chamada calcProduto.html, onde o usuário escolhe o tipo de produto e informa a quantidade de produto que gostaria de adquir. Ao clicar no botão calcular, é realizado via ajax uma requisição ao servidor web (arquivo calcProduto.php) que realiza o calculo necessário e sua reposta é renderizada sem recarregar a página html.
Abaixo o código do arquivo calcProduto.html:
<html>
<head>
<title>Produto</title>
<script language="javascript" type="text/javascript">
var request = null;
// função que cria objeto de requisição
function createRequest () {
try {
// cria objeto XmlHttpRequest para os browser Firefox, Safari, Opera
request = new XMLHttpRequest();
} catch( trymicrosoft ) {
try {
// cria objeto XmlHttpRequest para o browser IE
request = new ActiveXObject( "Msxm12.XMLHTTP" );
} catch( othermicrosoft ) {
try{
// cria objeto XmlHttpRequest para o browser IE
request = new ActiveXObject( "Microsoft.XMLHTTP" );
} catch( failed ) {
request = null;
}
}
}
if ( request == null ) {
alert( "Erro ao criar objeto Request!" );
}
}
// função que executa chamada ao servidor para realizar o calculo
function getPrice () {
createRequest ();
var prod = document.getElementById( "produto").value;
var qtd = document.getElementById( "quantidade").value;
var url = "calcProduto.php?produto=" + prod + "&quantidade=" + qtd;
request.open( "GET", url, true );
request.onreadystatechange = updatePage; // define função a ser chamada a obter resposta do servidor web
request.send( null ); // null informa que não está sendo enviado nenhum dado na requisição
}
// função chamada ao obter retorno da requisição e atualiza interface
function updatePage () {
if( request.readyState == 4 ) {
if( request.status == 200 ){
var resultado = document.getElementById( "resultado" );
resultado.innerHTML = request.responseText;
}
else{
alert( "Erro: não foi possível obter resposta do servidor." );
}
}
}
</script>
</head>
<body>
<h1>Calculo de produto</h1>
<p> Escolha um produto e informe a quantidade.</p>
<form method="GET" action="calcProduto.php">
<p> Produto:
<select name="produto" id="produto">
<option value="0">Caneta</option>
<option value="1">Borracha</option>
<option value="2">Giz</option>
<option value="3">Apagador</option>
</select>
</p>htm
<p> Quantidade <input type="text" name="quantidade" id="quantidade"></p>
<p><input type="button" value="Calcular" onClick="getPrice();"></p>
</form>
<div id="resultado">
</div>
</body>
</html>O código utilizado no servidor web:
<?php
$produto = $_REQUEST['produto'];
$qtd = $_REQUEST['quantidade'];
$prodName = '';
$vlr = '';
switch($produto){
case "0":
$prodName = 'Caneta';
$vlr = 1;
break;
case '1':
$prodName = 'Borracha';
$vlr = 2;
break;
case '2':
$prodName = 'Giz';
$vlr = 3;
break;
case '3':
$prodName = 'Apagador';
$vlr = 4;
break;
}
$total = $qtd * $vlr;
?>
<h3>Calculo:</h3>
<table border=1 >
<tr>
<td>Produto</td>
<td>Quantida</td>
<td>Valor unidade</td>
<td>Total</td>
</tr>
<tr>
<td><?php print $prodName ?></td>
<td><?php print $qtd ?></td>
<td><?php echo "R$ " .number_format($vlr, 2, ',', '.'); ?></td>
<td><?php echo "R$ " .number_format($total, 2, ',', '.'); ?></td>
</tr>
</table>Futuramente falarei um pouco mais sobre o componente XmlHttpRequest e seus recursos.
Enjoy
Postado por Carlos Fernando Sylverio | Categoria Programação | Em 25-09-2009
0
Olá pessoal,
No post anterior Requisição HTTP com Java Application Parte 1 , falei um pouco sobre como obter o conteúdo de uma página web. Mas nem sempre somente o conteúdo de uma página nos interessa.
Na maioria das vezes necessitamos que de uma interação com a página (ou páginas) por meio de troca de informação, ou seja, enviamos dados, a página processa os dados e nos retorna a informação.
Para isso iremos trabalhar com o objeto URLConnection, objeto existente no pacote java.net.
Veja o exemplo abaixo:
package teste.comunication;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import java.net.URLEncoder;
public class TesteComunicacao {
public static void main(String[] args)
throws MalformedURLException, IOException {
try{
// monta estrutura de parametros a serem eviados
String data = URLEncoder.encode( "nome", "UTF-8" ) + "=" + URLEncoder.encode( "Fernando", "UTF-8" );
URL url = new URL( "http://localhost/get_name.php" );
URLConnection urlConnection = url.openConnection();
// envia dados
urlConnection.setDoOutput(true);
OutputStreamWriter outputWriter = new OutputStreamWriter(urlConnection.getOutputStream());
outputWriter.write(data);
outputWriter.flush();
// Obtem as respostas
InputStreamReader inputReader = new InputStreamReader(urlConnection.getInputStream());
BufferedReader bufferedReader = new BufferedReader( inputReader );
System.out.println( "\n** retorno da página web **" );
String linha = "";
while ( (linha = bufferedReader.readLine()) != null){
System.out.println(linha);
}
} catch (Exception e) {
System.out.println( e.getMessage() );
}
}
}Após instânciar o objeto URL, podemos obter o objeto URLConnection através do seu método openConnection.
O método urlConnection.setDoOutput(true); é executado para informar que será enviado parâmetros.
Depois obtemos o stream de saída e enviamos os dados (obs: esses dados são enviados via método POST).
O retorno é obtido através do método urlConnection.getInputStream que é tratado por meio do objeto InputStreamReader.
Para simular o processamento dos dados enviados gerei um arquivo PHP com o seguinte código:
<?php
$response = $_POST['nome'];
echo "Conteúdo recebido: ";
echo $response;
?>
Ele simplesmente lê o dado recebido e gera uma resposta apartir das informações obtidas.
Enjoy
Postado por Carlos Fernando Sylverio | Categoria Blog | Em 24-09-2009
0
Olá,
Normalmente quando leio algum artigo interessante os adiciono no twitter, mas acho que esse merece uma atenção especial.
7 coisas que todo desenvolvedor web deveria saber
Boa leitura
Postado por Carlos Fernando Sylverio | Categoria Programação | Em 23-08-2009
0
CakePHP é um framework escrito em PHP, que possibilita o desenvolvimento de aplicações (PHP) web robustas rapidamente sem perder flexibilidade.
O CakePHP é Open Source e fornece uma arquitetura extensível para desenvolvimento, manutenção, e distribuição de aplicações por meio de patterns conhecidos como ActiveRecord, Association Data Mapping, Front Controller, MVC (Model-View-Controller) e ORM.
Entendendo o MVC
O CakePHP segue o design pattern MVC, que separa sua aplicação em três camadas principais?
1. Model representa os dados da aplicação.
2. View representa o modelo de apresentação dos dados.
3. Controller recebe e encaminha requisições feitas pelo cliente.
1.Cliente (browser) faz requisição para o servidor web;
2.O expedidor (dispacher) verifica a URL e encaminha a requisição para o controller correto.
3.O controller realiza a específica lógica da aplicação.
4.O controller utiliza o model para se ter acesso aos dados da aplicação.
5.Depois os dados o controller os encaminha para view. A view pega os dados e os prepara no formato de apresentação específico para o cliente.
6.Uma vez criado a apresentação, este é retornado para o browser.
Observação:
- A camada de Model representa os dados da aplicação, não é representação de um banco de dados ou entidades da aplicação, ela poderia estar acessando um WebService, por exemplo, para obter os dados da aplicação, isolando assim a camada de apresentação com a camada de negócio.
- Usualmente as views no CakePHP são no formato HTML, mas podem ser PDF, XML, JSON, isso depende mais qual será o propósito de sua utilização.
Estrutura do CakePHP
Alem das classes de Model, View e Controller o CakePHP também possui algumas características como classes de Components, Behaviors e Helpers que auxiliam o desenvolvimento.
Controller – são equipados com callbacks, que possibilita inserir operações no núcleo do CakePHP;
Component – compartilha a lógica entre controllers;
Helper – compartilha a lógica entre as views;
Behaviors – adiciona funcionalidade entre models;
DataSources – abstrações que permitem os models manipularem diferentes tipos de dados consistente;
Convenções
O CakePHP possui já um estilo de programação que pode ser acompanhado em book.cakephp.org
Segue uma lista básica de estilo:
| nomes de arquivo |
devem ser sublinhados; |
| nome de classes |
devem ser CamelCase; |
| nome de controller |
devem estar no plural e ser CamelCase; |
|
deve ter uma função chamada índex(); |
|
colocando um sublinhado na frente da função ela será disponível somente para uso interno, não ficando disponível para web por meio do dispatcher. |
| nome de models |
devem ser no singular e ser CamelCase; |
| nome de URL |
o nome dos controller devem ser no plural e lowerCamelCase, porem curtos. Exemplo: RedCarsController ficaria redCars; |
Referências
The Official CakePHP website
The Cookbook
Wikipedia
Até mais 
Postado por Carlos Fernando Sylverio | Categoria Programação | Em 21-08-2009
1
Recentemente precisei desenvolver uma aplicação (Java Application) que faz uma requisição http a um servidor externo. E tive muita dificuldade de encontrar bons exemplos sobre o assunto.
Após muita pesquisa e um pouco de estudo pude adquirir algum conhecimento, que será apresentado a seguir neste post.
Inicialmente a API do Java nos disponibiliza algumas classes que nos possibilita criar um servidor e um cliente TCP/IP, abrir uma conexão TCP/IP, ler de uma conexão, escrever para uma conexão. Essas classes são:
- Socket e ServerSocket
- InetAddress
- URL
Todas presente no pacote java.net
Abaixo segue uma exemplo de utilização da classe URL, para se obter o conteúdo de página armazenada em uma servidor web.
A url acessada pela aplicação estava em um servidor local. Mas é possível acessar o conteúdo de qualquer servidor na internet.
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
public class TesteComunicacao {
/**
*
* @param args
* @throws MalformedURLException
* @throws IOException
*/
public static void main(String[] args)
throws MalformedURLException, IOException {
try{
// representa um Uniform Resource Locator,
// um ponteiro para um "recurso" na World Wide Web.
URL url = new URL( "http://localhost/index.html" );
System.out.println( "** Tipo de objeto retornado **" );
System.out.println( url.getContent().getClass().getCanonicalName() );
System.out.println( "\n** alguns métodos da classe URL **" );
System.out.println( "Número da porta padrão do protocolo:" + url.getDefaultPort() );
System.out.println( "Nome do arquivo:" + url.getFile() );
System.out.println( "Nome do host:" + url.getHost() );
System.out.println( "Parte do caminha:" + url.getPath() );
System.out.println( "Número da porta:" + url.getPort() );
System.out.println( "Nome do protocolo:" + url.getProtocol() );
System.out.println( "Parte da consulta:" + url.getQuery() );
System.out.println( "Ancora (referencia da URL):" + url.getRef() );
System.out.println( "userInfo da URL:" + url.getUserInfo() );
System.out.println( "Número de indexação de um hash table:" + url.hashCode() );
System.out.println( "Representação da url:" + url.toExternalForm() );
System.out.println( "Representação da url:" + url.toString() );
// cria um stream de entrada do conteúdo
InputStreamReader inputReader = new InputStreamReader( url.openStream() );
BufferedReader bufferedReader = new BufferedReader( inputReader );
System.out.println( "\n** Conteúdo do recurso web **" );
String linha = "";
while ( (linha = bufferedReader.readLine()) != null){
System.out.println(linha);
}
} catch (Exception e) {
System.out.println( e.getMessage() );
}
}
}Resultado:
** Tipo de objeto retornado **
java.util.zip.GZIPInputStream
** alguns métodos da classe URL **
Número da porta padrão do protocolo:80
Nome do arquivo:/index.html
Nome do host:localhost
Parte do caminha:/index.html
Número da porta:-1
Nome do protocolo:http
Parte da consulta:null
Ancora (referencia da URL):null
userInfo da URL:null
Número de indexação de um hash table:942787792
Representação da url:http://localhost/index.html
Representação da url:http://localhost/index.html
** Conteúdo do recurso web **
<html><body><h1>It works!</h1></body></html>
Até mais
Postado por Carlos Fernando Sylverio | Categoria Programação | Em 20-08-2009
0
PHP é uma linguagem de script Open Source de uso geral, muito utilizada para aplicações Web.
Suas principais características são:
- Criação de aplicações dinâmicas;
- Código PHP é executado do lado servidor;
- Interação com banco de dados sem exposição de código para o cliente;
- Possibilidade de embutir código dentro do HTML;
- Arquivos PHP são tipos texto (ASCII) e podem ser escritos em qualquer editor de texto;
- Compatibilidade com diversos Sistemas Operacionais (Windows, Linux, Unix, Mac OS, e outros);
- Suportado por diversos servidores Web (Apache, IIS, e outros), podendo ser configurado como módulo ou como um CGI comum.
O que pode ser feito?
Basicamente, qualquer coisa como criar e coletar dados de um formulário, gerar páginas dinâmicas ou enviar e receber cookies.
Segue um link para o manual web do PHP. Nele há um suporte desde a sintaxe básica do PHP até a instalação e configuração de um servidor PHP.
Referência
Manual PHP
Beginning PHP5 and MySQL5, W Jason Gilmore
Até mais
Postado por Carlos Fernando Sylverio | Categoria Tecnologia | Em 20-08-2009
0
Olá,
Só para complementar os últimos post. Segue 2 links interessantes de Rewriting que podem ser muito úteis.
URL Rewriting: Criando URLs competitivas!
URL Rewriting: no IIS com ASP, ASP.NET ou PHP
Até mais
Postado por Carlos Fernando Sylverio | Categoria Tecnologia | Em 10-08-2009
0
Muita aplicação para o IIS possui um conceito nativo de multi-threaded. Porem algumas aplicações escritas para Linux e não possuem mult-threaded. Apesar de o PHP ser mult-threaded, muitas de suas extensões não são. Exigindo assim um pedido concomitante para garantir operar confiávelmente. Isso obriga a utilização de CGI (Common Gateway Interface) e resulta em baixo desempenho na plataforma Windowns.
O FastCGI ajuda neste tipo de aplicações, para conseguir um melhor desempenho do Windows durante o CGI. FastCGI é um extensão para o IIS 6.0 que oferece suporte para hospedar e executar aplicativos ativos FastCGI em IIS com alto desempenho e confiabilidade. Suas principais características são:
- Hospedagem confiável para aplicações Non Thread-Safe (como PHP) em modo FastCGI para forçar uma simples requisição concorrente por processo FastCGI.
- Suporte para hospedagens de aplicações framework FastCGI em servidores compartilhados.
- Rico conjunto de opções de configuração para aprimoramento do desempenho da extensão e processo FastCGI.
Referência
http://www.iis.net/downloads/default.aspx?tabid=34&g=6&i=1521
Enjoy
Postado por Carlos Fernando Sylverio | Categoria Tecnologia | Em 03-08-2009
0
Também conhecido como mod_rewrite, é um software que modifica aparência de uma URL. É utilizado para fornecer links para páginas web mais curtos e relevantes. A técnica é utilizada para adicionar um grau de separação entre os arquivos utilizados para gerar uma página web e a URL apresentada ao mundo.
Exemplos:
Abaixo temos uma URL de um post para um blog qualquer:
http://www.example.com/Blogs/Posts.php?Year=2006&Month=12&Day=19
Para o mesmo post porem utilizando reescrita:
http://www.example.com/Blogs/2006/12/19/
A segunda URL permite que sejam visualizados todos os post de dezembro somente removendo o dia 19, conforme abaixo:
http://www.example.com/Blogs/2006/12
Ionic’s Isapi Rewrite Filter
De uma forma grotesca, podemos dizer que o IIRF é um plugin para IIS que permite reescrever URL (Rewrite Engine). O Apache tem mod_rewrite, o que permite reescrever URL. Mas IIS, antes de v7, não tem nada semelhante como um built-in, ou como um “padrão” add-on livre.
O IIS tem um mecanismo de mapeamento URL, mas funciona somente para os arquivos que são tratados pelo ASP.NET: aspx, ascx, asmx, e assim por diante. Para os arquivos não são tratados como xml, GIF, JPG, CSS, o mapeamento não funciona de uma forma limpa. Como o servidor HTTP Apache, o IIS tem um mecanismo de extensão: ele é chamado de filtro ISAPI. Esses filtros possibilitam o IIS uma capacidade de re-escrever URLs.
Como usar o IIRF?
IIRF é uma única DLL. Que é instalada como um filtro ISAPI no seu servidor web, sendo configurada através de um arquivo INI.
Referências
http://en.wikipedia.org/wiki/Rewrite_engine
http://www.codeplex.com/IIRF
Enjoy
seguidores
leitores