Tutorial: 5 plugins Javascript para mensagens de notificação muito mais legais

Cansado de ver aquela janelinha padrão do browser nas mensagens de alerta e confirmação da sua aplicação? Nesse post apresentarei uma lista de cinco excelentes plugins Javascript para dar um upgrade no visual da sua aplicação. Confira:

1. noty

noty é um plugin jQuery que facilita a tarefa de criação de mensagens de alerta, confirmação, informação, sucesso e erro como alternativa às caixas de diálogo padrão do navegador. A API do plugin fornece opções para customização do texto, layout, animação, velocidade e botões.

Site: http://needim.github.com/noty/
Licença: GPL

Exemplo:

 <script type="text/javascript" src="jquery.min.js"></script>  
 <script type="text/javascript" src="js/noty/jquery.noty.js"></script>  
 <script type="text/javascript" src="js/noty/layouts/top.js"></script>  
 <script type="text/javascript" src="js/noty/layouts/topLeft.js"></script>  
 <script type="text/javascript" src="js/noty/layouts/topRight.js"></script>  
 <script type="text/javascript" src="js/noty/themes/default.js"></script>  
 

 var noty = noty({text: 'noty - a jquery notification library!'});  

2. Pines Notify

O Pines Notify é um plugin Javascript para mensagens de notificação desenvolvido como parte do framework Pines. É flexível e muito fácil de implementar e utilizar. 

Pines Notyfy

Site: http://pinesframework.org/pnotify/

Licença: GPL, LGPL, e MPL.

Exemplo: 

 $.pnotify({
   title: 'Regular Notice',
   text: 'Tutoriais é '
 });

3. jNotify

O jNotify é um plugin jQuery para mensagens de notificação não-obstrutivas para sistemas web. O usuário pode ser informado sobre ações específicas realizadas pelo sistema, como, por exemplo, a finalização de uma chamada assíncrona ao servidor via Ajax.

Site: http://www.myjqueryplugins.com/jquery-plugin/jnotify
Licença: GPL
Exemplo de uso:

 <!-- JS to add -->  
 <script type="text/javascript">  
  $(document).ready(function(){  
   $("a.jnotify_exemple").click(function(e){  
       e.preventDefault();  
       jNotify(  
           'Tutorial mensagem de alerta com jNotify!',  
           {  
            autoHide : true, // added in v2.0  
            clickOverlay : false, // added in v2.0  
            MinWidth : 250,  
            TimeShown : 3000,  
            ShowTimeEffect : 200,  
            HideTimeEffect : 200,  
            LongTrip :20,  
            HorizontalPosition : 'center',  
            VerticalPosition : 'top',  
            ShowOverlay : true,  
              ColorOverlay : '#000',  
            OpacityOverlay : 0.3,  
            onClosed : function(){ // added in v2.0  
            },  
            onCompleted : function(){ // added in v2.0  
            }  
           });  
       });  
   });  

4. Alertify.js

O alertify.js investe em facilidade de uso, beleza e capacidade de customização para as mensagens de notificação da sua aplicação. Não depende de outras bibliotecas ou frameworks e já possui suporte a diversos navegadores e dispositivos móveis.

Site: http://fabien-d.github.io/alertify.js/
Licença: MIT

Exemplo:

 // alert dialog  
 alertify.alert("Tutorial Alertify.js");  
 // confirm dialog  
 alertify.confirm("Message", function (e) {  
   if (e) {  
     // user clicked "ok"  
   } else {  
     // user clicked "cancel"  
   }  
 });  
 // prompt dialog  
 alertify.prompt("Message", function (e, str) {  
   // str is the input text  
   if (e) {  
     // user clicked "ok"  
   } else {  
     // user clicked "cancel"  
   }  
 }, "Default Value");  

5. Humane.js

O Humane.js é uma boa opção para quem deseja um sistema de notificação simples, moderno e independente de framework. Inclui suporte à aplicações para dispositivos móveis.

Site: http://wavded.github.io/humane-js/

Licença: Não disponível

Exemplo:

 var notify = humane.create({ timeout: 4000, baseCls: 'humane-bigbox' })  
 notify.log('Custom Notifier')  

Gostou das sugestões? Deixe um comentário! ;)

Tutorial upload de arquivos com jQuery e PHP

E aí pessoal, beleza? Dessa vez vamos aprender como implementar a funcionalidade de upload de arquivos utilizando PHP e jQuery. O jQuery (http://jquery.com/) é uma biblioteca Javascript que busca simplificar a implementação de tarefas como manipulação de HTML, tratamento de eventos, animação, Ajax, etc. No nosso artigo usaremos o jQuery basicamente para recuperar o status corrente do upload através de chamadas assíncronas ao servidor.

Visão Geral deste Tutorial

Como já adiantamos, o tutorial consiste de uma página com um campo para upload de arquivos. O arquivo escolhido será enviado via Ajax ao servidor, que, por sua vez, retornará para o cliente o percentual do arquivo que já foi copiado. Este valor será atualizado automaticamente e será exibido em uma div para o usuário. 

Código do Lado do Cliente

No lado do cliente temos uma página simples HTML. Nela definimos um form, que contém um campo do tipo file para que o usuário possa escolher o arquivo para upload e também temos um botão de submit. Até aí, nada demais. A mágica acontece graças ao jQuery. Para este tutorial, utilizamos o plugin jQuery Form, que possibilita o uso de chamadas Ajax em formulários HTML de forma bastante simples. 

Primeiramente, é necessário incluir as bibliotecas javascript do jQuery e do jQuery Form Plugin. Utilizei para este exemplo as bibliotecas disponíveis no googlepais e github, mas você pode (e geralmente deve) baixá-las para o seu servidor e fazer referência a elas.

Após isso, nós definimos um objeto do tipo Options, especificado pelo jQuery Forms Plugin, que conterá atributos referentes à chamada Ajax. Para o nosso exemplo, nós especificamos funções de callback:

beforeSend: Função chamada imediatamente antes do envio do formulário. Geralmente usadas para esquemas de validação pré-submissão. No nosso caso, apenas exibimos uma mensagem via alert.

uploadProgress: Função callback a ser invocada com as informações do progresso do upload. Aqui nós atualizamos uma div com o percentual do upload concluído.

success: Define a função de callback a ser chamada após o envio do formulário. Aqui, apenas um alert será exibido.

error: Função chamada em caso de erro.

Por fim, preparamos o nosso form para ser submetido via Ajax com a chamada $("#uploadForm").ajaxForm(options),  , passando como parâmetro as opções acima.

Veja o código completo:

 <html>  
  <head>  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
  <script src="http://malsup.github.com/jquery.form.js"></script>  
  <title>Upload de arquivos com progresso usando com Ajax, jQuery e PHP</title>  
  <script>  
      $(document).ready(function() {  
           var options = {  
                beforeSend: function() {  
                     alert("Antes de mandar!");  
                },  
                uploadProgress: function(event, position, total, percentComplete) {                      
                     $("#status").html("Percentual completado: " + percentComplete + "%");  
                },  
                success: function() {  
                     alert("Upload concluido!");  
                },  
                error: function() {  
                     alert("Falha ao fazer upload de arquivo.");  
                }  
           };  
           $("#uploadForm").ajaxForm(options);  
      });  
  </script>  
  </head>  
  <body>  
 <h1>Validação de formulário com Ajax e PHP</h1>  
 <form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">  
  Arquivo para upload: <input name="myFile" id="user" type="file" />  
  <input type="submit" value="Enviar!" />  
 </form>  
 <div id="status" />  
 </body>  
 </html>  

Código do Lado do Servidor

O código server-side é uma função simples de upload de arquivos em PHP. Basicamente, o servidor recebe o arquivo no objeto $_FILES e o copia para a pasta /upload/ na raiz do site através da função move_uploaded_file.

Veja o código do arquivo upload.php:

 <?php  
 define ('SITE_ROOT', realpath(dirname(__FILE__)));  
 //upload.php  
 $output_dir = "/upload/";  
 if(isset($_FILES["myFile"]))  
 {  
   //Filter the file types , if you want.  
   if ($_FILES["myFile"]["error"] > 0)  
   {  
    echo "Error: " . $_FILES["file"]["error"] . "<br>";  
   }  
   else  
   {  
     //move the uploaded file to uploads folder;  
     move_uploaded_file($_FILES["myFile"]["tmp_name"],SITE_ROOT. $output_dir. $_FILES["myFile"]["name"]);  
    echo "Uploaded File :".$_FILES["myFile"]["name"];  
   }  
 }  
 ?>  

Então, pessoal, espero que esse tutorial tenha ajudado vocês a conhecerem um pouco mais do poder do jQuery e da sua integração com uma linguagem server-side - no caso, PHP. Dúvidas, sugestões ou críticas? Deixe um comentário! ;)

Validação de formulários com Ajax e PHP

Nesse tutorial veremos como criar um esquema de validação de formulários usando Ajax e PHP. A idéia é realizar as validações dinamicamente, à medida em que o usuário preenche os campos do formulário. Esse modo de validação é especialmente útil para auxiliar o preenchimento de longos formulários, pois com ele o usuário não precisa esperar pelo submit completo do form para saber o resultado da validação server-side. Fazendo o uso de chamadas assíncronas ao servidor (para isso usaremos Ajax), essas verificações serão feitas campo a campo, à medida em que o usuário preenche o formulário.

Para este tutorial, teremos um formulário simples de criação de usuário, em que o visitante do site terá que escolher um nome de usuário para criar o seu perfil. O nome de usuário deve ser único, e por isso nossa validação apenas apontará um erro caso seja escolhido um nome de usuário já cadastrado no sistema. Para fins deste tutorial, manteremos em memória uma lista de usuários pré-definida, mas no seu código, é provável que você implemente uma função de consulta dos usuários ao banco de dados ou a um arquivo.

Bem, vamos ao código!

Lado do Cliente

Primeiramente, vamos criar a nossa página index.html. Ela contém apenas um campo de texto onde será digitado o nome de usuário para cadastro e uma div que informará se o usuário cadastrado já existe ou não no sistema. À medida em que o usuário digita no campo de texto, é chamada a função Javascript checklogin, que recebe o valor do campo como parâmetro.

 <html>  
  <head>  
  <title>Validação de formulário com Ajax e PHP</title>  
  <script>  
      function checkLogin(user)  
      {  
      var xmlhttp;  
      if (window.XMLHttpRequest)  
       {//codigo para IE7+, Firefox, Chrome, Opera, Safari  
       xmlhttp=new XMLHttpRequest();  
       }  
      else  
       {//codigo para IE6, IE5  
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
       }  
      xmlhttp.onreadystatechange=function()  
       {  
       if (xmlhttp.readyState==4 && xmlhttp.status==200)  
           {  
                document.getElementById("result").innerHTML = xmlhttp.responseText == 0 ? "Login já existente!" : "Login ainda não cadastrado!";  
           }  
       }       
      xmlhttp.open("GET","checklogin.php?username=" + user,true);  
      xmlhttp.send();       
      }  
 </script>  
  </head>  
  <body>  
 <h1>Validação de formulário com Ajax e PHP</h1>  
 <form action="#">  
  Usuário: <input name="user" id="user" type="text" onkeyup="checkLogin(this.value)"/>  
 </form>  
 <div id="result" />  
 </body>  
 </html>  

A função checkLogin, definida acima, instancia o objeto xmlhttp de acordo com o tipo de navegador utilizado pelo usuário. Ação tomada quando a requisição assíncrona é respondida é basicamente mudar o texto da div com id "result" de acordo com o resultado da consulta.

Por fim, a função checkLogin abre uma conexão via GET com a página checklogin.php (será definida a seguir) passando como parâmetro o valor corrente do campo de texto. Vale lembrar que a função checkLogin será chamada - e consequentemente a página checklogin.php será consultada - a cada tecla digitada pelo usuário.

Lado do Servidor

Bem, para este exemplo o código server-side é bastante simples. Veja a seguir:

 <?php
 //este array geralmente será substituído por uma busca ao banco de dados ou arquivo texto
 $userList = array('alice', 'bob', 'carl', 'dexter', 'earl', 'frank', 'george', 'john');
 $user = $_GET['username'];
 if (in_array($user, $userList)) {
      echo 0; //usuario ja existe
 } else {
      echo 1; //usuario nao existe. logon ok.
 }
 ?>

A variável $userList contém a lista de usuários cadastrados no nosso sistema fictício. Na vida real, você provavelmente substituirá este trecho por uma consulta a uma base de dados, por exemplo. A partir daí, é muito simples. Caso o nome de usuário enviado como parâmetro via método GET já esteja cadastrado, a requisição retorna o valor 0. Caso contrário, retorna 1.

Voltando um pouco para a função checkLogin, no código da parte do cliente, você verá que o valor retornado pelo código servidor - neste caso, 0 ou 1- é atribuído a xmlhttp.responseText. É nesse ponto que a div será atualizada, mostrando se o usuário já existe ou não na nossa base de usuários.

Concluindo

Bem  pessoal, neste tutorial aprendemos a validar um formulário dinamicamente usando Javascript, PHP e chamadas assíncronas Ajax. Espero que este exemplo simples sirva como base para você fazer coisas mais legais. Sinta-se à vontade para postar dúvidas, críticas e sugestões nos comentários.

Até a próxima!

Ainda precisando de uma mãozinha? Que tal esses:

Tutorial upload de arquivos com jQuery e PHP

Máscara genérica para campos numéricos em Javascript

Olá pessoal, tudo bem? Neste tutorial vamos implementar uma máscara genérica para campos numéricos usando Javascript. A função aceita como parâmetro uma string correspondente ao padrão do campo, podendo ser utilizada como máscara de CPF, máscara de CNPJ, máscara de data e hora, de telefone, etc. Para a string do padrão, será utilizado o caracter '#' para identificar um dígito. Dessa forma, para uma máscara de CPF, o padrão fornecido como parâmetro será "###.###.###-##". No código, fornecemos já alguns exemplos da aplicação da máscara genérica. Este é um exemplo para fins didáticos. Fique à vontade para apontar melhorias e correções. Bons estudos!

 <html>  
 <head>  
 <title>Mascara genérica para campos numéricos</title>  
 <script language="JavaScript" type="text/javascript">  
      function mascaraGenerica(evt, campo, padrao) {  
           //testa a tecla pressionada pelo usuario  
           var charCode = (evt.which) ? evt.which : evt.keyCode;  
           if (charCode == 8) return true; //tecla backspace permitida  
           if (charCode != 46 && (charCode < 48 || charCode > 57)) return false; //apenas numeros            
           campo.maxLength = padrao.length; //Define dinamicamente o tamanho maximo do campo de acordo com o padrao fornecido  
           //aplica a mascara de acordo com o padrao fornecido  
           entrada = campo.value;  
           if (padrao.length > entrada.length && padrao.charAt(entrada.length) != '#') {  
                campo.value = entrada + padrao.charAt(entrada.length);                 
           }  
           return true;  
      }  
 </script>  
 </head>  
 <body>  
 <h2>Máscara genérica para campos numéricos</h2>  
 <form>  
  Mascara de CPF: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '###.###.###-##');" / >  
 </form>  
 <form>  
  Mascara de CNPJ: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '##.###.###/####-##');" / >  
 </form>  
 <form>  
  Mascara de Hora: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '##:##:##');" / >  
 </form>  
 <form>  
  Mascara de Telefone: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '+## ## ####-####');" / >  
 </form>  
 </body>  
 </html>  

Validação de formulários via Javascript + DOM

Olá pessoal.

Decidi estudar uma nova forma de validação de campos obrigatórios em formulários. Em todo lugar vemos grandes funções que fazem o trabalho de maneira repetida e braçal. Usando javascript e DOM cheguei a uma função genérica, que recebe um formulário como parâmetro e percorre campo a campo testando se ele é obrigatório ou não. Mas como a função vai saber se o campo é obrigatório?

O HTML é uma linguagem de marcação, com tags já definidas (input , por exemplo) e com atributos definidos para essas tags. Pensei então: por quê não adicionar mais um atributo a essas tags. Esse atributo conteria a informação de obrigatoriedade do campo, e usando DOM, acessaríamos o valor desse novo atributo.

Veja:

< html>
 < head>
  < title>Validação Genérica via DOM< /title>
< script language="javascript">
 
 function valida(form) {
  var elementos = form.elements;
  for (var i=0; i< elementos.length; i++){
   if (elementos[i].getAttribute("type")=="text") {
    if (elementos[i].getAttribute("obrigatorio")=="sim") {
     if (elementos[i].value=="") {
      alert("O campo "+elementos[i].getAttribute("name")+
            " é obrigatorio.");
      return false;
     }
    }
   }
  }
  return true;
 }

< /script>
 < /head>

 < body>
  < form onSubmit="return valida(this);">
 < input type="text" name="Nome" obrigatorio="sim" />< br/>
 < input type="text" name="E-mail"  obrigatorio="nao"  />< br/>
 < input type="submit" name="submit" />
  < /form>
 < /body>
< /html>

Por equanto é só. Até a próxima e qualquer dúvida quanto ao código, podem comentar.
E não esqueçam de tirar os espaços das tags na hora de testar!

Máscara de data com Javascript

Nesse tutorial vamos implementar uma máscara para campos de datas. Usaremos o formato de data brasileiro (dd/mm/aaaa), mas facilmente você poderá adaptar para outros formatos.
A função que fará a máscara receberá como parâmetro o campo da data e fará a formatação.

< html>
< head>
< title>Mascara de datas < /title>
< script language="JavaScript" type="text/javascript">
   function mascaraData(campoData){
              var data = campoData.value;
              if (data.length == 2){
                  data = data + '/';
                  document.forms[0].data.value = data;
      return true;              
              }
              if (data.length == 5){
                  data = data + '/';
                  document.forms[0].data.value = data;
                  return true;
              }
         }
< /script>
< /head>

< body>

< form>
 < input type="text" name="data" OnKeyUp="mascaraData(this);" maxlength="10" / >
< /form>
< /body>
< /html>

Ainda precisando de uma mãozinha? Tente esses outros posts:

Neste outro tutorial, apresentaremos uma função genérica para máscara de campos numéricos para ser utilizada em campos como CPF, CNPJ, data e hora e telefone. Confira!

Validação dinâmica de formulários usando Ajax e PHP

Tutorial upload de arquivos com jQuery e PHP

Uma pequena introdução ao JSON

Javascript Object Notation, ou simplesmente JSON para os íntimos, é uma linguagem de formatação de dados baseado na sintaxe do Javascript. Foi criada por Douglas Crockford com o o objetivo de ser uma opção mais leve em relação ao XML, já largamente usado em webservices e que é padrão em transimissão de dados. O JSON utiliza-se de duas formas de representação de dados do javascript na sua sintaxe: os Array Literals e os Object Literals. Vamos falar sobre cada um deles em detalhes.

Array Literals:São vetores definidos com o uso de colchetes como delimitadores e que aceitam qualquer objeto como membros, já que os arrays em javascript não são tipados. Por exemplo vamos definir um array literal contendo quatro valores:

var meuArrayLiteral = ["Uma String",150,true,null]

Observe que um array literal pode conter
strings, numeros, boleanos, outros objetos ou até mesmo um array literal. Não entendeu? Veja só:

var meuOutroArrayLiteral = ["Outra String", ["meu","outro","array"]]

Object Literals: Object literals são normalmente usados para armazenar informações em pares nome-valor. São definidos entre chaves ({ e }) e podem conter quantos pares nome-valor você precisar. Por exemplo:

var endereco = {
"rua":"Rua das Palmeiras",
"numero": 12,
"bairro": "Caminho das Árvores" }

Agora nós já podemos acessar os atributos do nosso objeto. Podemos fazer isso de duas formas. A primeira é bem conhecida dos programadores java que é utilizando ponto (.):

endereco.rua; //Retorna "Rua das Palmeiras"
endereco.numero; //Retorna 12
endereco.bairro; //Retorna "Caminho das Árvores"

A outra maneira é mais conhecida como vetor associativo ou hash e funciona utilizando o nome como índice. Exemplo:

endereco["rua"]; //Retorna "Rua das Palmeiras"
endereco["numero"]; //Retorna 12
endereco["bairro"]; //Retorna "Caminho das Árvores"

Pronto! Com isso nós já podemos montar nosso primero arquivo com formato JSON. Vamos montar um cadastro de uma concessionária de automóveis usando o que vimos até aqui.

{ "concessionaria":
>>>>>>>>>>{
>>>>>>>>>>>>"automoveis": [
>>>>>>>>>>>>>>>>{
>>>>>>>>>>>>>>>>>>>>"marca":"Ford",
>>>>>>>>>>>>>>>>>>>>"modelo":"Fiesta",
>>>>>>>>>>>>>>>>>>>>"ano":2005,
>>>>>>>>>>>>>>>>>>>>"preco":"18.500,00"
>>>>>>>>>>>>>>>>>},
>>>>>>>>>>>>>>>>>{
>>>>>>>>>>>>>>>>>>>>"marca":"Volkswagen",
>>>>>>>>>>>>>>>>>>>>"modelo":"Golf",
>>>>>>>>>>>>>>>>>>>>"ano":2004,
>>>>>>>>>>>>>>>>>>>>"preco":"27.900,00"
>>>>>>>>>>>>>>>>>>}
>>>>>>>>>>>>>>]
>>>>>>>>>>>}
>>>>}



Claramente percebemos que o código acima é bem menor que um XML convencional em relação ao número de caracteres. A economia de bytes no caso do JSON proporciona maior velocidade de comunicação entre cliente e servidor. Uma desvatangem no uso do JSON é que ele é menos legível para o ser humano, uma vez que utiliza uma linguagem mais curta e compacta. Para a manipulação de JSON no servidor existem diversas ferramentas disponíveis, sobre as quais não vou comentar neste artigo já que foge ao escopo dessa pequena introdução.