Tag: html

  • Como criar um uploader drag & drop, AJAX com porcentagem e Javascript puro?

    Como criar um uploader drag & drop, AJAX com porcentagem e Javascript puro?

    Eu sei, o título é grande, mas trata-se de uma tecnologia muito útil quanto a usabilidade. A ideia é criar, da forma mais simples possível um uploader que mostre a porcentagem do que está sendo enviado, com múltiplos arquivos. Porém, não apenas isso, mas da forma mais pura possível, sem a necessidade de frameworks, bibliotecas de terceiros ou pre-processadores. Em nosso tutorial, usaremos PHP no back-end, mas você pode usar a linguagem que melhor lhe adequar. Abaixo você pode testar um exemplo:

    DISCLAIMER: Para preservar você, o blog e a mim, o upload.php do exemplo não está fazendo upload de verdade, então você não vai ter acesso ao arquivo no final, porém, no link do github está o código funcional.

    Download

    HTML

    Antes de prosseguir, vou alertar que estou usando o font-awesome no exemplo, apenas para não ter que fazer nenhum upload de imagens por hora, mas ele não é obrigado para o que vamos fazer.

    Iniciaremos com um HTML bem simples. Vamos definir apenas a área de upload, da lista e uma área onde ficará o input. Esse input deve ser do tipo file e deve estar com o atributo mutiple definido. Nada muito especial por enquanto, pois nosso trunfo está mais no CSS e Javascript.

    CSS3

    O CSS que usaremos tem pontos específicos aos quais devemos prestar atenção. Por isso, vamos ver por trechos:

    A área de upload é definida pelo CSS a partir de um espaço abrangente. O label, vai ser a referência que vamos usar para atingir toda a área pré-determinada e é o que vai também receber o estilo que indicará onde e quando pode soltar o objeto. Dessa forma, deve estar com um position: absolute, pegando toda a área do upload. Um detalhe importante é que esse label não pode possuir filhos com eventos do mouse, pois isso pode acarretar em funcionamento inadequado ao fazer um hover em uma área não indicada.

    A área marcada como hightlight é justamente para demonstrar ao usuário que ele já pode soltar o arquivo.

    O input vai nos servir de área de drop. Isso já é um padrão tanto para Windows, MacOS e Linux – de receber um (ou mais arquivos) arrastando os dados para o botão. Retirando a aparência padrão, podemos nos aproveitar dessa função e economizar várias linhas de código do Javascript. Não havendo a necessidade de configurarmos eventos de arquivos.

    Talvez a área que possa confundir um pouco mais, principalmente os mais novatos, seja o CSS referente as barras de loading. As barras são definidas como relative e seu conteúdo como absolute. Dessa forma, podemos herdar a porcentagem do upload e usá-la diretamente no min-width do elemento. Usamos min-width, ao invés de width para utilizar o transition, dando uma leveza no upload ao invés de pequenos estalos.

    Javascript

    Inicialmente iremos definir os efeitos de drag and drop. Utilizaremos os eventos específicos para adicionar ou retirar o css de hightlight. Aquele que falamos acima ao montar o CSS.

    Agora precisamos validar os dados antes de colocar em nosso servidor. Compusemos uma validação que verifica o tipo de arquivo e a quantidade máxima de 2MB. Essa validação é totalmente no front-end. É recomendado que você também faça uma validação posterior no back-end para evitar fraudes. Essa função receberá como parâmetro um arquivo, o qual faremos a validação.

    Para enviar os arquivos, usaremos uma função AJAX simples. Fazemos um request no método POST. Nesta função, iremos capturar também a porcentagem do upload e atualizaremos a barra a partir desta, através do evento progress. Essa nossa função receberá o índice, para identificar o arquivo que está sendo enviado e a barra que será modificada.

    Por fim, iremos juntar um pouco de cada coisa que fizemos, adicionando uma função em um evento change do input do upload. Neste momento, também é feito o laço dentre o(s) arquivo(s) selecionado(s) para validar e, se for válido, fazer o upload, utilizando os outros métodos acima mencionados. É neste momento também que serão criadas dinamicamente as barras: uma para cada arquivo.

    PHP

    E pra terminar com chave de ouro, um PHPzinho que receberá esses arquivos e retornará um json com a confirmação de sucesso ou erro. Não aplicamos muitas validações nesse PHP pois nosso foco era neste exemplo está no front-end, mas é suficiente para que você compreenda sua funcionalidade.

    E, como sempre, você pode baixar o código inteiro no Github e usar direto na sua aplicação.

    Download

    Gostou? Se sim, compartilha com seus amiguinhos interessados na área e curte a página no Facebook. O exemplo acima está levemente modificado para que funcione melhor aqui no site. Entre também no grupo de Design e Desenvolvimento. O link está abaixo do post.

  • Como tirar uma foto usando a Webcam (Javascript + HTML)?

    Como tirar uma foto usando a Webcam (Javascript + HTML)?

    Disclaimer: Provavelmente a funcionalidade de webcam não está acessível via navegador interno de aplicativo (como o navegador interno do app do Facebook ou outro app mobile). Experimente direto em um navegador (mobile ou desktop).

    O HTML5 nos trouxe diversas opções interessantes para desenvolvimento de RIAs (Rich Internet Applications). Em diversos sistemas online, precisamos de uma foto da pessoa que está sendo cadastrada. Para sistemas de hotéis, saúde, academias, dentre outros, que precisam de maior identificação, podemos usar a webcam para fazer a foto na hora que poderá ser usada em posterior conferência. Recurso esse que também está disponível em dispositivos móveis.

    A ideia é transformar a imagem corrente da webcam em uma imagem base64. Após isso, converter essa codificação em uma imagem JPG e devolver o caminho – quase como se fosse um upload. Dessa forma você poderá salvar apenas o caminho da imagem no seu banco de dados, sem ficar um campo muito extenso ou que possa falhar em dispositivos móveis. Neste exemplo, será usado Javascript puro, a fim de universalizar para quem quiser utilizar em sua aplicação web.

    Exemplo:

    HTML5

    Vamos começar criando nosso exemplo com os elementos HTML. Tudo o que realmente precisamos é de uma tag button e uma tag video, mas para poder visualizar o exemplo, vamos colocar o retorno em um img, link da imagem gerada e um textarea para vermos o base64.

    Não precisamos necessariamente de um CSS para poder funcionar, mas, apenas para exemplo, vamos colocar um CSSzinho

    Javascript

    Agora vamos para a parte divertida. Basicamente vamos dividir nosso código em 3 partes: Chamar a webcam, tirar o instantâneo, e enviar/receber os dados do PHP. Criaremos o arquivo script.js.

    A função LoadCamera, irá transformar a webcam em uma espécie de streamming local. Para isso, é necessário que o navegador tenha suporte a isso, logo, precisamos de um navegador moderno com total compatibilidade a HTML5. Basicamente, todos os navegadores modernos, então não pense em compatibilidade com Internet Explorer.

    Você deve ter notado que a função acima tem um comentário com alguns parâmetros adicionais. Esses parâmetros são necessários para o funcionamento no iOS.

    Já a função takeSnapShot irá justamente tirar o instantâneo. Essa função irá criar um elemento canvas e desenhar em seu conteúdo uma imagem matricial, baseada no vídeo (um ctrl+c / ctrl+v automático, digamos assim). A partir daí podemos obter o base64 desse canvas e utilizá-lo para enviar posteriormente.

    Você pode, inclusive, se quiser, já adicionar essa base64 em no src de um elemento img.

    Agora, precisamos enviar essa base64 para o PHP. Usaremos o PHP para salvar a imagem em um arquivo jpg (você pode optar por png também). O PHP irá retornar, posteriormente, um json com o caminho completo da imagem, que iremos carregar no objeto img descrito no HTML supracitado. Faremos isso dinamicamente, por técnica de Ajax, sem formulário, pois o submit de um form poderá ser usado futuramente para a conclusão de um determinado cadastro:

    PHP

    No lado do PHP, basicamente, usaremos um $_POST para capturar o dado enviado via Ajax pelo Javascript. Criaremos então o arquivo salvar_photos.php.

    Não há muitos segredos, mas é importante se atentar a dois detalhes:

    1. Os dados chegam com o + transformado em espaço, então precisamos converter novamente para + com um replace.
    2. Precisamos salvar apenas os dados mime, sem os cabeçalhos, logo precisamos dar um explode para coletar apenas os dados.

    Fora isso, basicamente colocamos os dados em um arquivo JPG e retornamos a URL em json para ser lido pelo Javascript novamente.

    Uma vez tudo pronto, basta chamar a função loadCamera() no evento que você quer que ele seja disparado.

    Como sempre, deixamos o código disponível para quem quiser utilizar. Desta vez, o código está no GitHub.

    Follow @velhobit

    ATENÇÃO: O navegador não vai liberar o uso das ferramentas em um ambiente http. Você precisa necessariamente estar com seu site ou sistema em conexão segura (https).

    Se gostou, compartilha com seus amiguinhos interessados na área e curte a página no Facebook. O exemplo acima está levemente modificado para que funcione melhor aqui no site. Entre também no grupo de Design e Desenvolvimento. O link está abaixo do post.

  • FAB (Botão Flutuante) com CSS3 e HTML (sem Javascript)

    FAB (Botão Flutuante) com CSS3 e HTML (sem Javascript)

    Disclaimer: O comportamento não vai funcionar no iOS, pois o iOS desconsidera as pseudoclasses utilizadas aqui. No lugar, ele utiliza uma pseudoclasse de :hover para significar a seleção sem clique. Ainda estou vendo qual a melhor forma de usar no iOS sem bugar o comportamento em desktop.

    Continuando com os exercícios de lógica com CSS e HTML, iremos desta vez ver se é possível criar um FAB (Float Action Button) sem usar Javascript. E, adianto, sim, é possível. Se você quer ver os outros exercícios, acesse a categoria de Tutoriais, deste site.

    Editado -> Para quem quer aplicar uma interação melhor, eu adicionei um exemplo de uso com Javascript no final do Post.

    Esse tipo de botão é comum em aplicativos Android com Material Design. Se trata de um botão flutuante que fica em uma das extremidades inferiores (geralmente a direita) que abre uma lista com outros botões. Bem, se você está nesta página, basta olhar logo abaixo 😁.

    HTML + CSS

    Um dos desafios é conseguir fazer algo semanticamente correto. Então, o leiaute em si consistirá em um container que contém um botão e uma lista de botões. Cada botão terá uma etiqueta (label) que será a descrição do que ele pode fazer.

    No exemplo, há apenas 3 opções e com caracteres genéricos. Você pode substituir por imagens (mas tomando cuidado com o tamanho destas) ou usando font-icons, como o Font-Awesome, o MaterialDesign Lite ou até mesmo criar os seus próprios font-icons, como mostra este tutorial. Também pode colocar quantos items quiser na lista, apenas tomando cuidado para não ficar alto demais e enrolar o usuário.

    Como sempre usaremos as pseudoclasses para poder reconhecer ações. No caso, utilizaremos a pseudoclasse :active e :focus para detectar o “click” ou o “foco” (quando o tab fica em cima). Você também notará a existência de um símbolo de positivo (+). No CSS, o símbolo + é um indicativo de que o item que deverá ser formatado é o item logo após o DOM atual, porém no mesmo container hierárquico. Ou seja, quando você declara input + p, você quer aplicar o estilo no p imediatamente após o input.

    Sem mais enrolações, segue o CSS

    O que estamos fazendo é aplicar um estilo na lista assim que o botão ganha foco ou é ativado. Você pode, se preferir, adicionar também ao passar em cima com o mouse, bastando adicionar, junto aos demais comandos do botão principal, a pseudoclasse :hover e repetindo o resto da declaração.

    Simples, não é? E, como sempre, o exemplo no JsFiddle para você ir experimentando e fazendo seus próprios testes. Compartilhe com a galera!

    Versão com Javascript:

  • Como fazer efeito float label animado com CSS3 puro

    Como fazer efeito float label animado com CSS3 puro

    O último post sobre como criar um efeito ON/OFF em um checkbox usando CSS3 puro fez muito sucesso. Dessa forma, pensei o que mais poderia ser legal para fazer com CSS3. Analisando um pouco o comportamento do Android, me lembrei de um componente bem interessante que é o input com um label float animado. Basicamente, ao preencher o conteúdo, o label sobe e vai para um pouco acima do input, como no exemplo abaixo:


    Agora… como fazer?

    O segredo está novamente nas pseudoclasses e operadores. Graças as pseudoclasses eu posso definir, com alguns gatilhos, o comportamento de um determinado elemento HTML.

    No caso, esse gatilho é o placeholder, então é fundamental que o input possua um placeholder (vazio ou não) para criar o efeito. Pois o que identifica que algo foi preenchido ou não é justamente o placeholder. Sem o placeholder definido, o efeito não funciona. A pseudoclasse referente ao required também é usada em nosso exemplo:

    Já para o efeito de transição, usaremos o transition e o comportamento do absolute que, por definição, tem seus eixos referentes ao pai, no caso desse ser relative. Então basta usar o CSS abaixo:

    Como sempre, estou disponibilizando o exemplo completo no JsFiddle!

    Gostou? Então curta a página no Facebook e compartilhe com os coleguinhas!

  • Input Checkbox Switch ON / OFF apenas com CSS3

    Input Checkbox Switch ON / OFF apenas com CSS3

    O CSS é o mecanismo utilizado pelos navegadores para informar a estes como deve ser exibido determinado elemento HTML. Desde a versão 3 muitas coisas novas permitiram que a web fosse cada vez bonita e funcional.

    Eu estava um pouco cansado do trabalho e para relaxar fiquei pensando em uma solução simples para simular um Switch ON/OFF que pudesse ser aplicado no lugar de um checkbox. E, para isso, usei simplesmente CSS3 e pseudoclasses:



    Basicamente, pseudoclasses nos permitem adicionar instruções específicas de acordo com determinados comportamentos ou condições dos elementos HTML. Neste pequeno exemplo, eu usei a pseudoclasse :checked, para verificar se está marcado ou não, e as que adicionam complementos antes e depois do elemento, são as :before e :after, respectivamente.

    Mas o que você quer mesmo é o código, então para ficar fácil de você pegar, basta clicar visualizar o exemplo abaixo no JsFiddle: 

    Agora, se tudo o que você quer é o código puro, segue abaixo:

    HTML e CSS

    Por hoje é só… esse post foi rapidinho… Se gostou, compartilhe e nos siga nas redes sociais. VelhoBit, no Facebook, Twitter e Instagram.

  • Como Selecionar o Item de Uma Tabela HTML

    Como Selecionar o Item de Uma Tabela HTML

    Uma dúvida foi postada no grupo de Design e Programação de nossa página, lá no Facebook, hoje. Essa pergunta era referente a como selecionar de uma linha de uma tabela HTML?

    Para tal, basta usar um pouco de Javascript e CSS.

    Montando a Tabela

    Vamos montar, para testar, uma tabela simples, respeitando a semântica HTML básica. Vamos aproveitar para colocar logo um botão, que vai ser por onde podemos visualizar os dados da linha selecionada:

    <table id='minhaTabela'>
         <thead>
              <tr>
                   <th>ID</th>
                   <th>Nome</th>
                   <th>Idade</th>
              <tr>
         </thead>
         <tbody>
              <tr>
                   <td>01</td>
                   <td>Rodrigo</td>
                   <td>33</td>
                   </tr>
              <tr>
                   <td>02</td>
                   <td>Taynara</td>
                   <td>21</td>
              </tr>
              <tr>
                   <td>03</td>
                   <td>Raveny</td>
                   <td>22</td>
              </tr>
              <tr>
                   <td>04</td>
                   <td>Sérgio</td>
                   <td>51</td>
              </tr>
              <tr>
                   <td>05</td>
                   <td>Alice</td>
                   <td>20</td>
              </tr>
         </tbody>
    </table>
    
    <button id="visualizarDados">Visualizar Dados</button>
    

    Agora precisamos incluir um estilo para que a tabela fique mais elegante.

    É importantíssimo prestar atenção ao class “selecionado” que vai ser a referência para o seu javascript saber qual linha está selecionada na tabela.

    #minhaTabela{
      width:80%;
      margin:0 auto;
      border:0;
      box-shadow: 0 5px 30px darkgrey;
      border-spacing: 0;
    }
    
    #minhaTabela thead th{
      font-weight: bold;
      background-color: black;
      color:white;
      
      padding:5px 10px;
    }
    
    #minhaTabela tr td{
      padding:5px 10px;
      text-align: center;
      
      cursor: pointer; /**importante para não mostrar cursor de texto**/
    }
    
    #minhaTabela tr td:last-child{
      text-align: right;
    }
    
    /**Cores**/
    #minhaTabela tr:nth-child(odd){
      background-color: #eee;
    }
    
    /**Cor quando passar por cima**/
    #minhaTabela tr:hover td{
      background-color: #feffb7;
    }
    
    /**Cor quando selecionado**/
    #minhaTabela tr.selecionado td{
      background-color: #aff7ff;
    }
    
    button#visualizarDados{
      background-color: white;
      border: 1px solid black;
      width:50%;
      margin: 10px auto;
      padding:10px 0;
      display: block;
      color: black;
    }
    

    Javascript

    Para sermos mais justos, vamos fazer o exemplo usando Javascript puro. No nosso exemplo, vamos contemplar a opção de selecionar uma única linha ou mais de uma linha, opção determinada apenas por um parâmetro. Ainda vamos ver como manipular os dados.

    Inicialmente, precisamos capturar a tabela e adicionar, à ação de clique, uma função que adicione ou remova a classe de seleção:

    var tabela = document.getElementById("minhaTabela");
    var linhas = tabela.getElementsByTagName("tr");
    
    for(var i = 0; i < linhas.length; i++){
    	var linha = linhas[i];
      linha.addEventListener("click", function(){
      	//Adicionar ao atual
    		selLinha(this, false); //Selecione apenas um
                    //selLinha(this, true); //Selecione quantos quiser
    	});
    }
    

    A função selLinha() vai ser responsável por adicionar ou remover a class “selecionado” do nó. Passamos também um parâmetro que vai determinar se poderá selecionar mais que uma linha ou apenas uma. O primeiro laço, caso múltiplos seja falso, irá apenas desmarcar todos as linhas antes de marcar a linha clicada.

    /**
    Caso passe true, você pode selecionar multiplas linhas.
    Caso passe false, você só pode selecionar uma linha por vez.
    **/
    function selLinha(linha, multiplos){
      if(!multiplos){
      	var linhas = linha.parentElement.getElementsByTagName("tr");
            for(var i = 0; i < linhas.length; i++){
               var linha_ = linhas[i];
               linha_.classList.remove("selecionado");    
            }
      }
      linha.classList.toggle("selecionado");
    }
    

    Agora vamos adicionar uma função ao clique do botão para que a gente possa visualizar os dados selecionados. Para isso, iremos justamente capturar apenas as linhas que tiverem a class “selecionado” e, através de um laço, vamos concatenar os valores dentro dos nós <td> da(s) linha(s) selecionada(s).

    /**
    Exemplo de como capturar os dados
    **/
    var btnVisualizar = document.getElementById("visualizarDados");
    
    btnVisualizar.addEventListener("click", function(){
    	var selecionados = tabela.getElementsByClassName("selecionado");
      //Verificar se eestá selecionado
      if(selecionados.length < 1){
      	alert("Selecione pelo menos uma linha");
        return false;
      }
      
      var dados = "";
      
      for(var i = 0; i < selecionados.length; i++){
      	var selecionado = selecionados[i];
        selecionado = selecionado.getElementsByTagName("td");
        dados += "ID: " + selecionado[0].innerHTML + " - Nome: " + selecionado[1].innerHTML + " - Idade: " + selecionado[2].innerHTML + "\n";
      }
      
      alert(dados);
    });
    

    Vamos Testar?

    ID Nome Idade
    01 Rodrigo 33
    02 Taynara 21
    03 Raveny 22
    04 Sérgio 51
    05 Alice 20

    No entanto, se você preferir ver todo código completo, acesse o JsFiddle incorporado abaixo:


    Gostou do post curtinho? Tem dúvidas? Deixe seu comentário e compartilhe com quem você achar que vai gostar. Aproveite para entrar no nosso grupo de Design e Programação no Facebook ou em nossa página. Acompanhe-nos no Twitter e Instagram.

  • Como Preencher Dados da Empresa pelo CNPJ Dinamicamente (com PHP ou Java)

    Como Preencher Dados da Empresa pelo CNPJ Dinamicamente (com PHP ou Java)

    Dentro do design de interação, a automação de dados é importante para agilizar cadastros, além de garantir uma maior segurança dessas informações. Preencher dinamicamente o máximo de campos possível é sempre uma opção interessante para otimizar processos e manter um ambiente ágil.

    Uma das formas mais utilizadas é o preenchimento automático de endereço a partir do CEP (clique aqui, caso queira saber como fazer). Porém, uma outra alternativa muito interessante, e sempre procurada, é o preenchimento dinâmico dos dados de uma empresa a partir do CNPJ.

    Para isso, há uma API pública bem interessante de uma organização chamada ReceitaWS, que é uma empresa destinada a fornecer dados de pessoas jurídicas a partir da Receita Federal. Sua API pública é bem funcional e garante uma quantidade enorme de CNPJs atualizados. O ReceitaWS também possui uma API comercial para quem precisa de dados mais refinados e precisos.

    Obs. Só deixando claro que isto NÃO é um anúncio.

    Conectando com o ReceitaWS

    A API do ReceitaWS aconselha o acesso via cURL. Falando de forma simples, é como se o servidor fizesse o acesso a um site como se fosse um navegador. Por questões de segurança e para impedir o acúmulo de processos, muitas APIs bloqueiam o acesso direto. Por isso a comunicação não pode ser feita apenas com a URL.

    Apesar de ser possível fazer acesso cURL em praticamente qualquer linguagem, vamos usar PHP (atualização: ou Java) no nosso exemplo, por você poder usar em praticamente qualquer hospedagem.

    Esse acesso deverá ser feito para a URL: https://www.receitaws.com.br/v1/cnpj/[cnpj], onde [cnpj] corresponde ao número do CNPJ que você irá consultar.

    Para iniciar, devemos criar um arquivo onde vai ser carregado os dados e impresso o retorno.

    cnpj.php

    É extremamente importante que o nosso arquivo possua um cabeçalho que imprima como text/plain. Isso porque teremos uma resposta em jSon e passar este cabeçalho irá garantir a leitura correta dos dados.

    header("Content-Type: text/plain");

    Em seguida, devemos capturar o CNPJ enviado pela requisição e guardar em uma variável.

    $cnpj = $_REQUEST["cnpj"];

    Agora começa a parte interessante. Iremos usar o método cURL do PHP para poder acessar a URL e passar o CNPJ. Leias os comentários para entender seu funcionamento.

    $ch = curl_init(); //Inicializa
    curl_setopt($ch, CURLOPT_URL, "https://www.receitaws.com.br/v1/cnpj/".$cnpj); //Acessa a URL
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //Permite a captura do Retorno
    $retorno = curl_exec($ch); //Executa o cURL e guarda o Retorno em uma variável
    curl_close($ch); //Encerra a conexão
    

    Por fim, devemos terminar com a impressão do retorno.
    Para o retorno poder ser lido de forma simples, mesmo que por um humano, iremos usar o JSON_PRETTY_PRINT. Para isso, temos que converter a String de retorno usando o método Json Decode, em seguida imprimindo o resultado com o JSON_PRETTY_PRINT.

    $retorno = json_decode($retorno); //Ajuda a ser lido mais rapidamente
    echo json_encode($retorno, JSON_PRETTY_PRINT);
    

    O código completo ficará:

    <?php
    //Garantir que seja lido sem problemas
    header("Content-Type: text/plain");
    
    //Capturar CNPJ
    $cnpj = $_REQUEST["cnpj"];
    
    //Criando Comunicação cURL
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "https://www.receitaws.com.br/v1/cnpj/".$cnpj);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    //curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //Descomente esta linha apenas se você não usar HTTPS, ou se estiver testando localmente
    $retorno = curl_exec($ch);
    curl_close($ch);
    
    $retorno = json_decode($retorno); //Ajuda a ser lido mais rapidamente
    echo json_encode($retorno, JSON_PRETTY_PRINT);
    
    ?>

    Se quiser testar, basta acessar o seu arquivo php pelo navegador, por exemplo:
    seusite.com/pasta/cnpj.php?cnpj=XXXXXXXXXXXXX

    Atualização (Java):

    Você também pode fazer com Java. O exemplo abaixo é uma forma bem simples de fazer.

    <%@ page contentType="text/plain; charset=utf-8" language="java" errorPage="" %>
    <%@page import="java.io.*"%>
    <%@page import="java.net.URL"%>
    <%
    URL url = new URL("https://www.receitaws.com.br/v1/cnpj/"+request.getParameter("cnpj"));
    try (BufferedReader reader = new BufferedReader(new InputStreamReader(url.openStream(), "UTF-8"))) {
     for (String line; (line = reader.readLine()) != null;) {
     out.println(line);
     }
    }
    %>

    Evitando acessos externos

    Por segurança, precisamos evitar que outros sites acessem o nosso json. Isso para evitar que o servidor caia devido a diversas requisições de fontes desconhecidas. A forma mais simples de fazer isso, e compatível com praticamente qualquer hospedagem / servidor, é através do arquivo .htaccess.

    Na mesma pasta onde foi criado o arquiv cnpj.php deve ser criado um arquivo chamado:

    .htaccess

    Nesse arquivo deve conter as seguintes informações:

    #Evitar Acesso Externo
    Order Deny,Allow
    Deny from all
    Allow from 127. #localhost

    Basicamente, o que está sendo dito é que nenhum servidor pode acessar o conteúdo desta pasta, exceto o localhost (127.0.0.1). Caso você queira adicionar mais algum IP autorizado, basta adicionar o IP ou domínio do endereço que deseja.

    ATENÇÃO: Caso você seja usuário Cloudflare, adicone os seguintes IPs em sua lista de permissões do .htaccess:

    Allow from 199.27.128.0/21
    Allow from 173.245.48.0/20
    Allow from 103.21.244.0/22
    Allow from 103.22.200.0/22
    Allow from 103.31.4.0/22
    Allow from 141.101.64.0/18
    Allow from 108.162.192.0/18
    Allow from 190.93.240.0/20
    Allow from 188.114.96.0/20
    Allow from 197.234.240.0/22
    Allow from 198.41.128.0/17
    Allow from 162.158.0.0/15
    Allow from 104.16.0.0/12
    Allow from 172.64.0.0/13

    Atualização (Java):

    Caso você use o Java, a forma de configurar as permissões de acesso irá variar de acordo com o servidor que você utilizar.

    Caso você utilize o Tomcat, você deve utilizar o CORS para fazer esse controle de permissão.

    Para isso, edite o arquivo web.xml, e procure pelo filtro do CORS. O bloco deverá ficar algo semelhante ao código abaixo, segundo a mesma lógica do exemplo acima, do PHP:

    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
         <param-name>cors.allowOrigin</param-name>
            <param-value>127.0.0.1</param-value>
        </init-param>
        <init-param>
         <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
        </init-param>
        <init-param>
           <param-name>cors.supportedHeaders</param-name>
           <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>Set-Cookie</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>

    OBS. O uso do CORS pode dar problemas com clientes que façam acesso por cliente sem DNS, ou seja, com acesso que não é feito por conexão http ou https, como por exemplo,
    o Cordova/Phonegap. Nesse caso, aconselha-se simplesmente não usar o CORS, ou editar a bibliotca.

    Enviando o CNPJ e Imprimindo os Dados da Empresa

    Já para imprimir os dados e ler o json de retorno, precisamos usar um formulário HTML e um pouco de Javascript. Para poder facilitar a compreensão, usaremos o bom e velho jQuery, já explicado em conteúdos anteriores.

    A primeira coisa é criar o formulário que devemos usar.

    form.html

    <!--Importando Script Jquery-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
    <!--Formulário-->
    <form id="post">
      <label for="cnpj">CNPJ</label>
      <input id="cnpj" required type="text">
      <br/>
      <label for="nome">Razão Social</label>
      <input id="nome" type="text">
      <br/>
      <label for="fantasia">Nome Fantasia</label>
      <input id="fantasia" type="text">
      <br/>
      <label for="atividade">Atividade Principal</label>
      <input id="atividade" type="text">
      <br/>
      <label for="telefone">Telefone</label>
      <input id="telefone" required type="text">
      <br/>
      <label for="email">E-mail</label>
      <input id="email" type="text">
      <br/>
      <label for="cep">CEP</label>
      <input id="cep" type="text">
      <br/>
      <label for="logradouro">Logradouro</label>
      <input id="logradouro" type="text">
      <br/>
      <label for="numero">Número</label>
      <input id="numero" type="text">
      <br/>
      <label for="complemento">Complemento</label>
      <input id="complemento" type="text">
      <br/>
      <label for="bairro">Bairro</label>
      <input id="bairro" type="text">
      <br/>
      <label for="uf">Estado</label>
      <select id="uf">
        <option value="AC">Acre</option>
        <option value="AL">Alagoas</option>
        <option value="AP">Amapá</option>
        <option value="AM">Amazonas</option>
        <option value="BA">Bahia</option>
        <option value="CE">Ceará</option>
        <option value="DF">Distrito Federal</option>
        <option value="ES">Espírito Santo</option>
        <option value="GO">Goiás</option>
        <option value="MA">Maranhão</option>
        <option value="MT">Mato Grosso</option>
        <option value="MS">Mato Grosso do Sul</option>
        <option value="MG">Minas Gerais</option>
        <option value="PA">Pará</option>
        <option value="PB">Paraíba</option>
        <option value="PR">Paraná</option>
        <option value="PE">Pernambuco</option>
        <option value="PI">Piauí</option>
        <option value="RJ">Rio de Janeiro</option>
        <option value="RN">Rio Grande do Norte</option>
        <option value="RS">Rio Grande do Sul</option>
        <option value="RO">Rondônia</option>
        <option value="RR">Roraima</option>
        <option value="SC">Santa Catarina</option>
        <option value="SP">São Paulo</option>
        <option value="SE">Sergipe</option>
        <option value="TO">Tocantins</option>
      </select>
    </form>
    

    Como iremos aplicar a consulta após o usuário deixar o campo CNPJ, deveremos adicionar a chamada no focusout do CNPJ, ficando

    <script type="text/javascript">
    	$("#cnpj").focusout(function(){
    	//Aqui vai o código		
    	});
    </script>

    Agora é bem simples. Basta usarmos o método Ajax, que já utilizamos em tutoriais anteriores para fazermos conexões. O código abaixo possui diversos comentários para facilitar o entendimento de cada bloco.

    <script type="text/javascript">
    	$("#cnpj").focusout(function(){
    		//Início do Comando AJAX
    		$.ajax({
    			//O campo URL diz o caminho de onde virá os dados
    			//É importante concatenar o valor digitado no CNPJ
    			url: '/pasta/cnpj.php?cnpj='+$("#cnpj").val(),
    //Atualização: caso use java, use cnpj.jsp, usando o outro exemplo.
    			//Aqui você deve preencher o tipo de dados que será lido,
    			//no caso, estamos lendo JSON.
    			dataType: 'json',
    			//SUCESS é referente a função que será executada caso
    			//ele consiga ler a fonte de dados com sucesso.
    			//O parâmetro dentro da função se refere ao nome da variável
    			//que você vai dar para ler esse objeto.
    			success: function(resposta){
    				//Confere se houve erro e o imprime
    				if(resposta.status == "ERROR"){
    					alert(resposta.message + "\nPor favor, digite os dados manualmente.");
    					$("#post #nome").focus().select();
    					return false;
    				}
    				//Agora basta definir os valores que você deseja preencher
    				//automaticamente nos campos acima.
    				$("#post #nome").val(resposta.nome);
    				$("#post #fantasia").val(resposta.fantasia);
    				$("#post #atividade").val(resposta.atividade_principal[0].text + " (" + resposta.atividade_principal[0].code + ")");
    				$("#post #telefone").val(resposta.telefone);
    				$("#post #email").val(resposta.email);
    				$("#post #logradouro").val(resposta.logradouro);
    				$("#post #complemento").val(resposta.complemento);
    				$("#post #bairro").val(resposta.bairro);
    				$("#post #cidade").val(resposta.municipio);
    				$("#post #uf").val(resposta.uf);
    				$("#post #cep").val(resposta.cep);
    				$("#post #numero").val(resposta.numero);
    			}
    		});
    	});
    </script>

    Que tal agora testarmos o funcionamento?

    Digite um CNPJ (apenas números) no campo CNPJ abaixo e depois saia dele (focusout), clicando em outro campo ou pressionando a tecla TAB de seu teclado.














     

     

    Baixe o exemplo no GitHub:
    Download
    É mais fácil do que parece, não é? Aproveite para compartilhar isso com seus amigos que estão estudando ou que essa informação possa ser útil 👍. Aproveite e deixe um like na nova página da Velhobit, no Facebook.

     

  • Como preencher o Endereço Automaticamente a Partir do CEP?

    Como preencher o Endereço Automaticamente a Partir do CEP?

    Para melhorar a experiência do usuário, profissionais front-end costumam buscar formas de automatizar certos preenchimentos de cadastros. Além disso, essas formas de carregamento trazem mais integridade para os dados, diminuindo ou evitando a digitação errada de campos que podem vir a ser usados em busca. Sem dúvida, um dos carregamentos dinâmicos mais usados em cadastros é a busca automática por CEP.

    Para este exemplo/tutorial, iremos usar jQuery e HTML.

    Carregando o Endereço Dinamicamente pelo CEP

    Talvez o mais famoso repositório público para preenchimento de CEP (sem a necessidade de uma integração com os Correios), deve ser o ViaCEP.

    A API do ViaCEP possui uma integração com json, que é o que usaremos aqui.

    O ViaCEP nos retorno os seguintes dados, com as respectivas chaves:

    • “cep”,
    • “logradouro”,
    • “complemento”,
    • “bairro”,
    • “localidade”,
    • “uf”,
    • “unidade”,
    • “ibge”,
    • “gia”

    Para exemplificarmos, vamos usar um formulário HTML simples: (Usaremos a base de estados capturado a partir do GitHub de Cassio Cardoso)

    <!--Importando Script Jquery-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
    <!--Formulário-->
    <form>
    <label for="cep">CEP</label>
    		<input id="cep" type="text" required/>
    <label for="logradouro">Logradouro</label>
    		<input id="logradouro" type="text" required/>
    <label for="numero">Número</label>
    		<input id="numero" type="text" />
    <label for="complemento">Complemento</label>
    		<input id="complemento" type="text"/>
    <label for="bairro">Bairro</label>
    		<input id="bairro" type="text" required/>
    <label for="uf">Estado</label>
    		<select id="uf">
    			<option value="AC">Acre</option>
    			<option value="AL">Alagoas</option>
    			<option value="AP">Amapá</option>
    			<option value="AM">Amazonas</option>
    			<option value="BA">Bahia</option>
    			<option value="CE">Ceará</option>
    			<option value="DF">Distrito Federal</option>
    			<option value="ES">Espírito Santo</option>
    			<option value="GO">Goiás</option>
    			<option value="MA">Maranhão</option>
    			<option value="MT">Mato Grosso</option>
    			<option value="MS">Mato Grosso do Sul</option>
    			<option value="MG">Minas Gerais</option>
    			<option value="PA">Pará</option>
    			<option value="PB">Paraíba</option>
    			<option value="PR">Paraná</option>
    			<option value="PE">Pernambuco</option>
    			<option value="PI">Piauí</option>
    			<option value="RJ">Rio de Janeiro</option>
    			<option value="RN">Rio Grande do Norte</option>
    			<option value="RS">Rio Grande do Sul</option>
    			<option value="RO">Rondônia</option>
    			<option value="RR">Roraima</option>
    			<option value="SC">Santa Catarina</option>
    			<option value="SP">São Paulo</option>
    			<option value="SE">Sergipe</option>
    			<option value="TO">Tocantins</option>
    		</select>
    </form>

    Agora vamos executar uma função para que no momento após sair do campo CEP, ele faça a busca e preencha os demais campos. Como é no momento após deixar o campo, iremos vincular ao evento focusout.

    <script type="text/javascript">
    	$("#cep").focusout(function(){
    	//Aqui vai o código		
    	});
    </script>

    Agora temos que chamar a API json dentro da nossa função. Para isso, vamos utilizar o comando $.ajax, do jQuery.

    Obs. Acompanhe os comentários no código para entender cada linha.

    <script type="text/javascript">
    	$("#cep").focusout(function(){
    		//Início do Comando AJAX
    		$.ajax({
    			//O campo URL diz o caminho de onde virá os dados
    			//É importante concatenar o valor digitado no CEP
    			url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
    			//Aqui você deve preencher o tipo de dados que será lido,
    			//no caso, estamos lendo JSON.
    			dataType: 'json',
    			//SUCESS é referente a função que será executada caso
    			//ele consiga ler a fonte de dados com sucesso.
    			//O parâmetro dentro da função se refere ao nome da variável
    			//que você vai dar para ler esse objeto.
    			success: function(resposta){
    				//Agora basta definir os valores que você deseja preencher
    				//automaticamente nos campos acima.
    				$("#logradouro").val(resposta.logradouro);
    				$("#complemento").val(resposta.complemento);
    				$("#bairro").val(resposta.bairro);
    				$("#cidade").val(resposta.localidade);
    				$("#uf").val(resposta.uf);
    				//Vamos incluir para que o Número seja focado automaticamente
    				//melhorando a experiência do usuário
    				$("#numero").focus();
    			}
    		});
    	});
    </script>

    Simples, não é?

    Essa mesma lógica você pode usar para poder dinamicamente diversos outros tipos de dados, inclusive alguns vindo do banco. Se quiser saber mais como usar o Json com PHP e jQuery, assista nosso vídeo tutorial sobre o assunto.

    Vamos testar e ver como fica:












    Abaixo, você pode ver o código completo:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Teste</title>
    </head>
    
    <body>
    	<!--Importando Script Jquery-->
    	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
    	<!--Formulário-->
    	<form>
    		<label for="cep">CEP</label>
    		<input id="cep" type="text" required/>
    		<label for="logradouro">Logradouro</label>
    		<input id="logradouro" type="text" required/>
    		<label for="numero">Número</label>
    		<input id="numero" type="text" />
    		<label for="complemento">Complemento</label>
    		<input id="complemento" type="text"/>
    		<label for="bairro">Bairro</label>
    		<input id="bairro" type="text" required/>
    		<label for="uf">Estado</label>
    		<select id="uf">
    			<option value="AC">Acre</option>
    			<option value="AL">Alagoas</option>
    			<option value="AP">Amapá</option>
    			<option value="AM">Amazonas</option>
    			<option value="BA">Bahia</option>
    			<option value="CE">Ceará</option>
    			<option value="DF">Distrito Federal</option>
    			<option value="ES">Espírito Santo</option>
    			<option value="GO">Goiás</option>
    			<option value="MA">Maranhão</option>
    			<option value="MT">Mato Grosso</option>
    			<option value="MS">Mato Grosso do Sul</option>
    			<option value="MG">Minas Gerais</option>
    			<option value="PA">Pará</option>
    			<option value="PB">Paraíba</option>
    			<option value="PR">Paraná</option>
    			<option value="PE">Pernambuco</option>
    			<option value="PI">Piauí</option>
    			<option value="RJ">Rio de Janeiro</option>
    			<option value="RN">Rio Grande do Norte</option>
    			<option value="RS">Rio Grande do Sul</option>
    			<option value="RO">Rondônia</option>
    			<option value="RR">Roraima</option>
    			<option value="SC">Santa Catarina</option>
    			<option value="SP">São Paulo</option>
    			<option value="SE">Sergipe</option>
    			<option value="TO">Tocantins</option>
    		</select>
    	</form>
    	
    	<script type="text/javascript">
    		$("#cep").focusout(function(){
    			//Início do Comando AJAX
    			$.ajax({
    				//O campo URL diz o caminho de onde virá os dados
    				//É importante concatenar o valor digitado no CEP
    				url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
    				//Aqui você deve preencher o tipo de dados que será lido,
    				//no caso, estamos lendo JSON.
    				dataType: 'json',
    				//SUCESS é referente a função que será executada caso
    				//ele consiga ler a fonte de dados com sucesso.
    				//O parâmetro dentro da função se refere ao nome da variável
    				//que você vai dar para ler esse objeto.
    				success: function(resposta){
    					//Agora basta definir os valores que você deseja preencher
    					//automaticamente nos campos acima.
    					$("#logradouro").val(resposta.logradouro);
    					$("#complemento").val(resposta.complemento);
    					$("#bairro").val(resposta.bairro);
    					$("#cidade").val(resposta.localidade);
    					$("#uf").val(resposta.uf);
    					//Vamos incluir para que o Número seja focado automaticamente
    					//melhorando a experiência do usuário
    					$("#numero").focus();
    				}
    			});
    		});
    	</script>
    </body>
    </html>