Datalist (HTML 5). Porque reinventar a roda ?

Essa semana em um dos muitos fóruns, sites, listas que participo surgiu uma questão sobre “autocompletar” e no meio das muitas sugestões, JavaScript, jQuery e outras o assunto me interessou e fui dar uma pesquisada, pois esse recurso é bem interessante de disponibilizar para os usuários dos sistemas web desenvolvidos.

Não é que o HTML 5, nos disponibiliza uma TAG com o nome de DATALIST que faz exatamente isso.

Fiz alguns teste e para ser sincero não apliquei ainda em produção, como a tag vai se comportar com uma lista de 300 produtos, ainda não sei, mas o recurso promete, veja um exemplo de uso com HTML + PHP:

 

<?php 

if($_POST){
    
    echo  '==>'. $_POST["idestado"];
    
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Teste datalist</title>
        <meta charset="UTF-8">
         <meta name="author" content="PowerInformatica.com.br">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form method="post"    >
        
            <input name="idestado" list="listaestados" >         

            <datalist id="listaestados">
                <select>
                    <option value="12"> Acre</option>
                    <option value="27"> Alagoas </option>
                    <option value="16"> Amapá </option>
                    <option value="13"> Amazonas </option>
                    <option value="29"> Bahia </option>
                    <option value="23"> Ceará </option>
                    <option value="53"> Distrito Federal </option>
                    <option value="32"> Espírito Santo </option>
                    <option value="52"> Goiás </option>
                    <option value="21"> Maranhão </option>
                    <option value="51"> Mato Grosso </option>
                    <option value="50"> Mato Grosso do Sul </option>
                    <option value="31"> Minas Gerais </option>
                    <option value="15"> Pará </option>
                    <option value="25"> Paraíba </option>
                    <option value="41"> Paraná </option>
                    <option value="26"> Pernambuco </option>
                    <option value="22"> Piauí </option>
                    <option value="33"> Rio de Janeiro </option>
                    <option value="24"> Rio Grande do Norte </option>
                    <option value="43"> Rio Grande do Sul </option>
                    <option value="11"> Rondônia </option>
                    <option value="14"> Roraima </option>
                    <option value="42"> Santa Catarina </option>
                    <option value="35"> São Paulo </option>
                    <option value="28"> Sergipe </option>
                    <option value="17"> Tocantins </option>
                </select>
            </datalist>        

        </form>    
        
    </body>
</html>

Faça os teste e veja que interessante os tipos de retorno que esse recurso oferece se o usuário escolher um dos estados, o retorno é o ID do estado, se digitar qualquer coisa no input, e isso é permitido, o retorno é o que foi digitado.

Bom agora é só você usar sua criatividade para agregar mais esse valor aos seus sistemas.

datalist

 

 

Publicado em Computadores e a Internet, html, Programação, Programação PHP | Marcado com , , , , , , , , | Deixe um comentário

Olá Mundo, com EcmaScript 2015

Um pequeno guia, para iniciantes testarem a nova versão do JavaScript EcmaScript 2015.

A ferramenta usada para esse teste é o FireFox Developer Edition Version 52.0a2 64 bits, mas você não deve ter nenhum problema para executar esses exemplos nas versões Firefox  50 ou maior 32 bits.

Não vou entra em detalhes de programação dessa nova versão, mas já, vou testar um novo recurso dessa versão nova do JavaScript que é a atribuição de um valor default a parâmetros de uma função.

Abra o Web Console (Ctrl + Shift + K), abra também o editor “Scratchpad” que já vem incluído no navegador (Shift + F4), no editor digite o seguinte código em EcmaScript:

 

  function imprime(quem = 'Mundo'){
    
         alert("Olá " + quem );
    
  }

  imprime();

Para ver seu código rodando pressione (CTRL + R);

ecma

Na imagem acima você vê o programa “Olá Mundo !” na linguagem EcmaScript 2015. rodando no navegador Firefox.

Espero que essa pequena dica sirva de incentivo para você começar a estudar e aplicar nos seus novos projetos essa ferramenta.

 

Publicado em Computadores e a Internet, Dicas: Software (Programas ), EcmaScript | Marcado com , , , , , | Deixe um comentário

ECMAScript o que é ?

Inicialmente vamos ver o que é JavaScript [1].

JavaScript é uma linguagem de script orientada a objetos, multiplataforma. É uma linguagem pequena e leve. Dentro de um ambiente de host (por exemplo, um navegador web) o JavaScript pode ser ligado aos objetos deste ambiente para prover um controle programático sobre eles.

O futuro passa por aqui, ECMAScript® 2016, essa é a nova versão Javascript, se você está pensando em investir tempo em um framework nessa linguagem, que tal colocar esse tempo na fonte do conhecimento.

Com mais de 20 anos de existência, estava mais que na hora de uma atualizada nessa poderosa ferramenta.

História [2]

Em dezembro de 1995, a Sun Microsystems e a Netscape Communications Corporation anunciaram o JavaScript num press release, baseado nos trabalhos de Brendan Eich da Netscape sob o nome Mocha e, mais tarde, LiveScript. Em março de 1996 a Netscape Communications Corporation lançou o Navegador Netscape 2.0, com suporte para JavaScript. Com o sucesso do JavaScript como linguagem de scripting para o desenvolvimento de páginas web, a Microsoft, por sua vez, desenvolveu uma linguagem bastante próxima batizada de JScript, incluída mais tarde no Internet Explorer 3.0, lançado em agosto de 1996.

A Netscape submeteu as especificações do JavaScript para padronização pela Ecma International; o trabalho na especificação, ECMA-262, começou em novembro de 1996. A primeira edição do ECMA-262 foi adaptada pela ECMA General Assembly em junho de 1997[1].

ECMAScript é a linguagem de scripts padronizada pelo ECMA-262. Tanto a tecnologia JavaScript quanto a JScript são compatíveis com ECMAScript, porém cada um provê recursos adicionais não descritos na especificação ECMA.

Fonte[1]: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Introduction

Fonte[2]: https://pt.wikipedia.org/wiki/ECMAScript

ecmacript

Outros links interessantes:
- Acompanhe o curso:  https://github.com/AulasDeProgramacao/ecmascript_2015  
- Tabela de compatibilidade: https://kangax.github.io/compat-table/es6/
- Site da Ecma Internacional: http://www.ecma-international.org/
- Download das especificações: 
Standard ECMA-262 ECMAScript® 2016 Language Specification 
[ 7th edition (June 2016) ] -  Baixe o PDF

 

 

Publicado em Computadores e a Internet, html, Programação, Programação - JavaScript | Marcado com , , , , , | 1 Comentário

Importando arquivos de texto CSV, para o PostgreSQL

txt

Crie uma tabela do seu banco, p. Ex.

CREATE TABLE uf(

iduf varchar(2),

uf varchar(20),

sigla varchar(2),

CONSTRAINT iduf PRIMARY KEY (iduf)

);

Use o Bloco de notas e digite o seguinte texto, “esta bem…., pode copiar daqui e colar”, salve como dados.csv, eu uso a codificação UTF-8 para evitar problemas de acentuação.

Observe que eu usei o ; para separar as colunas.

Dica: O melhor seria criar uma pasta temp no raiz para facilitar na hora de importação.

11;Rondônia;RO

12;Acre;AC

13;Amazonas;AM

14;Roraima;RR

15;Pará;PA

16;Amapá;AP

17;Tocantins;TO

21;Maranhão;MA

22;Piauí;PI

23;Ceará;CE

24;Rio Grande do Norte;RN

25;Paraíba;PB

26;Pernambuco;PE

27;Alagoas;AL

28;Sergipe;SE

29;Bahia;BA

31;Minas Gerais;MG

32;Espírito Santo;ES

33;Rio de Janeiro;RJ

35;São Paulo;SP

41;Paraná;PR

42;Santa Catarina;SC

43;Rio Grande do Sul;RS

50;Mato Grosso do Sul;MS

51;Mato Grosso;MT

52;Goiás;GO

53;Distrito Federal;DF

Agora é só ir no editor de query e digitar:

COPY uf (iduf, uf, sigla) FROM ‘c:\temp\dados.csv’ using delimiters ‘;’ ;

Dica: Se no seu arquivo CSV tem cabeçalho com o nome das colunas, é só usar esse exemplo:

COPY uf (iduf, uf, sigla) FROM ‘c:\temp\dados.csv’ using delimiters ‘;’ CSV HEADER;
Agora só digitar

Select * from uf  – para verificar de está tudo como desejado;

Só a título de curiosidade esses códigos usados na coluna iduf, seguem o padrão do IBGE.

Publicado em Computadores e a Internet | Deixe um comentário

Validar / Criticar datas Lazarus

O Lazarus (Free Dephi) tem um componente  maskedit que permite formatar a entrada de valores por exemplo datas.
Após a entrada dos dados digitados podemos criticar / validar a entrada com o seguinte código, colocado no evento “exit” :

Continuar lendo

Publicado em Computadores e a Internet | Deixe um comentário

Alterando o tamanho de uma coluna no PostgrSQL

Tive uma certa dificuldade para encontrar essa dica, compartilhando.
Eu criei uma tabela com a coluna “senha” de tamanho 20, depois precisava aumentar a largura da mesma e manter os dados, segue a dica de como consegui fazer.

Obs. Usando Postgres 9.0

ALTER TABLE usuario ALTER COLUMN senha TYPE varchar(40);

 

Publicado em Computadores e a Internet | Deixe um comentário

Gerenciando POSTGRESQL com o BASE (Libreoffice)

Veja como é simples realizar conexões ao gerenciado de banco de dados Postgresql com o Base do LibreOffice (tudo software livre).

Com uma interface visual similar a do MSAccess o BASE facilita muito o gerenciamento de banco de dados (tabelas, consultas, formulários e relatórios).

Para esse exmplo estou usando o Postgresql 9.2  e o LibreOffice 4.1.

Passo  1: (escolha Conectar a um banco de dados existente  e depois postgreSQL)

Abra o BASE

Abra o BASE

Passo 2: Digite (dbname=seubanco hostaddr=IPseuServidor port=5432)

Digite as informações de conexão

Digite as informações de conexão

Passo 3: Digite o nome do usuário do Banco de Dados no PostgreSQL e marque “Senha obrigatória”

Digitando nome do usuário POSTGRESQL

Digitando nome do usuário POSTGRESQL

Passo 4: Clique em Testar a conexão, você deve receber uma mensagem “A conexão foi estabelecida com exito”, caso contrário revise suas configurações no passo 2.

Testando a Conexão

Testando a Conexão

Passo 5: No Base (LibreOffice) já conectado você tem acesso aos recursos do programa e pode beneficiar-se de vários recursos.

No BASE - LibreOffice já conectado

No BASE – LibreOffice já conectado

É isso, simples assim, agora mãos a obra, produzir mais.

 

 

Publicado em Banco de Dados, Postgresql, Programação | Marcado com , , , , | 2 Comentários