Arquivo TXT como base de dados para WEB

Olá a todos os geeks… Grande parte dos sistemas financeiros hoje usam arquivos para a transferência de dados, geralmente é usada a linguagem XML, que é parecida com HTML e usa até tags para dividir o conteúdo. Outros preferem usar arquivos de texto com extensão .txt. que é um pouco mais leve, dependendo é claro da quantidade de dados, e também tem uso mais simples. Nestes arquivo a divisão deve ser feita por caracteres determinados pelo programador, como por exemplo o pipeline “|”. Neste artigo vamos desenvolver uma pequena página WEB, que lê arquivos .txt, e lista os itens. Siga os passos:

1 – Crie uma pasta com nome de sua preferência para salvar os arquivos, crie dentro dela, um arquivo de texto chamado dados.txt, e um arquivo html chamado index.html; 2 – Abra o arquivo dados.txt e digite o seguinte texto nele:

[item]|1|João|joao@clubedosgeeks.com|00000000 [item]|2|Pedro|maria@clubedosgeeks.com|11111111 [item]|3|Maria|maria@clubedosgeeks.com|22222222

Aqui usamos dois tipos de divisores: [item] e |, que servirão para determinar os limites de cada dado e facilitar o tratamento e listagem. Depois salve o arquivo; 3 – Abra o arquivo index.html com o editor de sua preferência e crie nele o seguinte formulário:

Escolha um arquivo de texto para carregar:

O formulário deve conter um input file e um botão que chama o método JavaScript loadFileAsText(), na propriedade onclick, que usaremos para fazer a leitura do arquivo; 4 – Agora crie este abaixo a tabela para listagem, conforme o código abaixo:

Id Nome E-Mail Nascimento

5 – Agora, ainda no arquivo html abra uma tag script type=”text/javascript”, onde criaremos dois métodos o loadFileAsText(), e o listar(texto). Vamos primeiro ao loadFileAsText(), que irá acessar o arquivo .txt e nos trazer seu conteúdo, veja;

function loadFileAsText(){
	var fileToLoad = document.getElementById("fileToLoad").files[0];
	var fileReader = new FileReader();
	fileReader.onload = function(fileLoadedEvent) {
		var textFromFileLoaded = fileLoadedEvent.target.result;
		var texto = textFromFileLoaded;
		listar(texto);
	};
	fileReader.readAsText(fileToLoad, "UTF-8");
}

5 – Depois, abaixo coloque o código do método listar():

function listar(texto){
	var quantidade = document.getElementById("lista").rows.length;
	if (quantidade>1){
		for(var cont=1;cont<=quantidade;cont++){
			document.getElementById("lista").deleteRow(cont);
		}
	}
	var itens = texto.split('[item]');
	for(var i=1;i

Pronto, agora teste e veja se deu tudo certo, caso tenha acontecido algum erro você pode baixar os arquivos aqui, como também pode ver a demonstração aqui. Qualquer dúvida é só deixar ai nos comentários ou entrar em contato conosco. Curta a nossa página no Facebook:

Jayr Alencar

Doutorando em Ciências da Computação no Centro de Informática da Universidade Federal do Pernambuco (CIn - UFPE); Mestre pela mesma instituição; Formado em Análise e Desenvolvimento de Sistemas; Católico; Fã de O Senhor do Anéis.

Você pode gostar...

26 Resultados

  1. Ivomar Santos disse:

    Como posso fazer uma busca para por exemplo ordenar os ID’s?

    • Jayr Alencar disse:

      Ivomar, desculpa pela demora. Substitui a função listar(), por essa:

      function listar(texto){
      	var quantidade = document.getElementById("lista").rows.length;
      	if (quantidade>1){
      		for(var cont=1;cont<=quantidade;cont++){
      			document.getElementById("lista").deleteRow(cont);
      		}
      	}
      	var itens = texto.split('[item]');
      	var sub='';
      	for(var i=0;i0){
      			for(var cont=1;cont<i; cont++){
      				var idinicial=itens[cont].split("|")
      				var idfinal=itens[i].split("|")
      				if(idfinal[1]<idinicial[1]){
      					sub=itens[cont];
      					itens[cont]=itens[i];
      					itens[i]=sub;
      				}
      			}
      		}
      		
      	}
      	for(var a=1;a<itens.length;a++){
      		var valores = itens[a].split("|");
      		document.getElementById("lista").innerHTML +=''+valores[1]+''+valores[2]+''+valores[3]+''+valores[4]+'';
      	}
      }
      
  2. Maycon Paiva disse:

    E como eu faria deixar um arquivo de texto pré definido para leitura?
    Pois pretendo tirar o input file, e deixar o arquivo de texto pré definido.

  3. adailton disse:

    Aqui não funcionou eu não estou usado um servidor.

  4. boa noite, funcionou muito perfeitamente, mas, será que poderia me ajudar em uma coisa?

    este mesmo script, como faria para gerar um novo ID dentro do txt existente através de um formulário?

    e no caso, carregar automaticamente a modificação depois, como o colega Maycon Paiva perguntou.

    isso seria de grande ajuda para utilizar no project Maelstrom

  5. Johnny disse:

    Sei que o post e antigo mas gostaria de saber se alguém conseguiu fazer com que a função pre defina o arquivo de texto sem usar o input file. Jayr Alencar, poderia me fornecer um codigo, pois sou meio leigo com isso conheço muito pouco mas preciso da função. Grato desde ja!

  6. Max Pessôa disse:

    Excelente. Não tinha visto a alteração e já funcionou perfeitamente.

  7. staj dos santos disse:

    obrigado , mil vezes obrigado, pelo bom e útil exemplo do java com bco.dados arq.txt, voces explicam , liberam o programa sem complicar como alguns idiotas fazem, não gostam de explicar ou ensinar a quem quer aprender e tampouco liberam os fontes. thank’you , merci beaucoup, gracias

    • staj dos santos disse:

      obrigado , mil vezes obrigado, pelo bom e útil exemplo do java com bco.dados arq.txt, voces explicam , liberam o programa sem complicar como alguns idiotas fazem, não gostam de explicar ou ensinar a quem quer aprender e tampouco liberam os fontes. thank’you , merci beaucoup, gracias

  8. Guilherme disse:

    Boa tarde , funcionou o código porem se alguma palavra tiver acentuação n funciona como por exemplo “João” fica = “Jo�o” tem como me ajudar?

  9. Elizabeth Naveca disse:

    Boa noite, tudo bem?
    Você saberia qual script para preencher um form web pegando os dados de um TXT? Sem enviá-lo.

    Muito obrigada pela ajuda.

  10. iasdenis disse:

    Existe uma forma de construir essa mesma tabela usando o arquivo txt mas sem usar o javascript?
    Vai rodar em um navegador que não roda javascript.

  11. iasdenis disse:

    Existe uma forma de acessar o arquivo txt sem ter que escolher, deixando um arquivo já pré definido no código?
    Para quando executar a aplicação já abrir de uma vez?

    • Jayr Alencar disse:

      Cara, acho que você vai ter que usar outra linguagem. Tem que ver qual esse dispositivo suporta. E existe sim uma forma de abrir um pré-definido, só informar o caminho.

      • iasdenis disse:

        Jayr,
        Tenho aqui outra IHM com um navegador que suporta o JavaScript. Sinceramente confesso que conheço pouco a linguagem JavaScript, sou desenvolvedor CLP e é pouco usual na minha área.
        Por gentileza, poderia me mostrar como ficaria o código para que eu acesse o txt pré definidamente?

      • iasdenis disse:

        O que devo fazer para informar o caminho do arquivo?
        Pode ser informado no JavaScript ou tem que fazer um input diferente no html, na intenção de eliminar o botão “ESCOLHER ARQUIVO”?

  12. iasdenis disse:

    Poderia me passar uma dica de como posso fazer isso.
    Estou tentando inserir o caminho do arquivo na primeira parte do script, onde é feito o fileToLoad porém sem sucesso.

  13. Max Pessôa disse:

    Jayr,

    Boa Tarde!
    Na sua rotina (função) abaixo usa [item] para a busca do próximo registro e | para cada informação do regisro
    var itens = texto.split(‘[item]’);
    for(var i=1;i<itens.length;i++){
    var valores = itens[i].split("|");

    E se eu desejasse também um terceiro simbolo para montar a tabela, além do [item] e |, por exemplo um @

    Sem mais

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *