Desenvolvimento e simplicidade na web
Neste artigo veremos uma maneira de construir um menu dinâmico, ou seja, no cadastro do menu será definido o menu superior e através de um método recursivo construiremos o menu completo hierarquicamente, permitindo um número “infinito” de submenus.
No lado servidor iremos utilizar PHP para buscar os menus no banco de dados e organizá-los em um vetor de forma hierárquica.
No lado cliente iremos utilizar AngularJS para construir o menu visualmente com base nos dados retornados pelo servidor.
Neste artigo pretendo mostrar como fazer uma consulta de registros completamente dinâmica, ou seja, sem a necessidade de recarregar a página para filtrar ou paginar os registros. Utilizaremos como exemplo uma simples consulta de clientes onde o usuário poderá filtrá-los e navegar entre as páginas.
No lado cliente iremos utilizar o AngularJS para facilitar a comunicação com o servidor, além de manter um código mais organizado e reutilizável. Atualmente já temos o Angular 2, porém ainda gosto da simplicidade do AngularJS e acredito que se encaixa melhor no propósito deste artigo.
No lado servidor iremos apenas utilizar uma biblioteca de Query Builder para montarmos nossa query de consulta com o banco de dados. Hoje em dia é muito comum a utilização de um Query Builder em frameworks e no nosso caso vai facilitar muito a paginação dos registros.
Confira o exemplo em funcionamento, clicando aqui.
Normalmente, quando fazemos o upload de uma imagem nós precisamos redimensiona-lá para reduzir seu tamanho. Esse processo normalmente é feito do lado servidor, ou seja, enviamos a imagem na sua forma e tamanho original e então redimensionamos no servidor utilizando PHP, por exemplo.
Porém, em um aplicativo de galeria de fotos, por exemplo, o usuário normalmente baixa as fotos (em alta resolução) de sua câmera e quer em seguida enviar para o aplicativo. Supondo que ele deseja enviar 200 fotos, cada uma com 5 MB, seria necessário fazer o upload de 1 GB de dados para o servidor, para que então possamos reduzi-las em um tamanho viável.
Sendo assim, pretendo apresentar nesse artigo uma solução para este problema. Vamos ver como redimensionar a imagem antes de enviar ao servidor, utilizando Javascript. Para isso faremos um formulário para envio de várias imagens que serão salvas em uma pasta no servidor.
Confira o exemplo em funcionamento, clicando aqui.
Nesse artigo veremos como atualizar uma <div> de segundos em segundos, ou seja, a cada N segundos iremos colocar um valor em uma <div>. Iremos utilizar como exemplo uma página que exibe frases sortidas, que estão em um banco de dados, a cada 10 segundos.
Confira o exemplo em funcionamento, clicando aqui.
Quando precisamos fazer o upload de uma imagem, geralmente temos duas opções:
O primeiro método é o mais comum, pois é mais fácil de ser implementado, além de ter melhor desempenho. Porém, em alguns casos torna-se necessário salvar a imagem diretamente no banco de dados, e assim recorremos ao segundo método. A desvantagem é que é um pouco mais trabalhoso de ser implementado e o desempenho é menor se comparado ao primeiro método, pois será necessário converter a imagem de binário para seu formato original toda vez que for necessário mostrá-la ao usuário.
Nesse artigo veremos como implementar o segundo método. Criaremos um cadastro de fotos sem contexto, apenas para demostrar a ideia, vamos nessa?
Confira o exemplo em funcionamento, clicando aqui.
A biblioteca JQuery já nos facilita bastante a fazer requisições AJAX. Porém, sempre que enviamos um formulário via AJAX, normalmente é necessário armazenar todos os campos em variáveis para então enviar ao servidor. O jQuery Form Plugin é um plugin que tem o objetivo de facilitar ainda mais esse processo. Basicamente, ao enviar um formulário, o plugin armazena as informações de cada elemento do formulário e envia ao servidor utilizando AJAX. Para exemplificar seu uso, vamos criar um formulário bem simples.
Olá pessoal, tudo certo? Várias pessoas me perguntam como fazer upload de arquivos com ajax e hoje pretendo apresentar uma solução para isso. Na verdade, não se trata de um upload com ajax, mas sim um upload dinâmico, porém para um usuário comum isso é indiferente.
A solução é simples e conhecida: fazer um iframe contendo um campo do tipo file, fazemos o envio desse arquivo dentro do iframe e então com a ajuda do jQuery recuperamos as informações desse arquivo e trazemos para a página pai. Nesse artigo irei utilizar anexo de arquivos como exemplo.
Olá pessoal, tudo certo? O artigo de hoje foi baseado em uma sugestão que achei interessante. Trata-se de um carregamento dinâmico de registros, assim como no twitter que, em nossa home, quando clicado em “more” ele nos traz mais tweets. Outro exemplo é o formspring.me que quando clicado em “more” ele nos traz mais perguntas. No nosso caso, iremos utilizar frases como exemplo.
Olá pessoal, hoje vamos montar um sistema de votação bem simples. Irei utilizar como exemplo uma página com algumas frases e o usuário poderá escolher o que ele achou da frase: bom ou ruim. Tudo isso sem refresh na página, claro. Vamos lá?
Olá pessoal. Farei esse artigo a pedido de uma sugestão e também por ser um assunto bem interessante e interativo. Veremos como atualizar um div de segundos em segundos, ou seja, a cada N segundos iremos colocar um valor em uma DIV. Bom, vamos lá.
Fala pessoal, hoje estou aqui para mais um artigo de AJAX. Vou apresentar a vocês um framework para facilitar a criação de sistemas interativos, o XAJAX. Talvez, você já tenha visto os artigos: Consulta interativa sem refresh com AJAX e Validação de campos sem refresh com AJAX, nesses artigos nós fizemos tudo manualmente, a criação de cada arquivo. Vamos conhecer agora o XAJAX.
Fala pessoal, como o artigo de AJAX vem sendo muito acessado, resolvi fazer outro. Nesse artigo nós iremos aprender como fazer consultas no banco de dados sem a necessidade de refresh na página. Irei utilizar como exemplo, um simples “sistema de noticias”, onde cadastraremos noticias no banco de dados e através de um formulário faremos a busca de uma determinada noticia e exibiremos seu conteudo. Vamos lá!
Nesse artigo iremos desenvolver um formulário da qual o usuário deverá preencher com seus dados, e quando ele tirar o foco do campo iremos verificar se o que foi digitado tem relação com o que o campo pede. Tudo isso será feito com a tecnologia AJAX, que nos permite fazer requisições com o servidor sem a necessidade de atualizar a página. Os arquivos utilizados aqui estão disponíveis para download no final do artigo.