Menu dinâmico com submenus infinitos utilizando AngularJS e PHP

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.

Imagem 1 – Resultado final

Consulta dinâmica com paginação utilizando AngularJS e PHP

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.

Redimensionar imagem antes de enviar com Javascript

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.

Salvar imagem no banco de dados com PHP/MySQL

Quando precisamos fazer o upload de uma imagem, geralmente temos duas opções:

  • 1 – Copiar a imagem em uma pasta no servidor e salvar apenas o caminho no banco de dados, como é feito nesse artigo.
  • 2 – Converter a imagem para binário e salvá-la diretamente no banco de dados.

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.

Facilitando requisições AJAX com jQuery Form Plugin

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.

Upload dinâmico com PHP/jQuery

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.

Confira o resultado final

Carregamento dinâmico de registros com PHP/JQuery/AJAX

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.

Confira o resultado final, clicando aqui.

Desenvolvimento interativo com o Framework XAJAX

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.

Clique aqui para ver o resultado final do exemplo

Consulta interativa sem refresh com AJAX

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á!

Validação de campos sem refresh com AJAX

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.