TagJavascript

Chat simples utilizando Websocket, Vue.JS e PHP

O Websocket  é um protocolo que nos permite abrir uma comunicação bidirecional com o servidor utilizando um único soquete TCP (Transmission Control Protocol) através do navegador. Sendo assim, tanto o cliente quanto o servidor podem enviar informações entre si a qualquer momento. Neste artigo, veremos como implementar um simples aplicativo de chat utilizando este protocolo.

No lado cliente utilizaremos o Vue.JS para facilitar a construção da interface do chat, além de manter um código mais organizado.

No lado servidor utilizaremos o Ratchet que é uma biblioteca PHP que nos permite construir um servidor de Websocket de um jeito descomplicado.

Confira o exemplo em funcionamento, clicando aqui.

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.

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

Mostrar e Ocultar informações com JQuery + Cookie

Fala pessoal, tudo bom? Nesse artigo pretendo mostrar como é simples manipular os elementos da página com JQuery. Vamos ver como mostrar e ocultar informações, deixando armazenado a preferência do usuário, utilizando cookies.

Veja o exemplo em funcionamento

Atualizar DIV de segundos em segundos com PHP/XAJAX

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

Clique aqui para ver o projeto pronto

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

Confirmação antes de deletar registro com Javascript

Muitas vezes programando na web, precisamos fazer um botão para remover algum registro do banco de dados, e como se trata da remoção de um registro é de muita importancia uma confirmação do tipo “Deseja remover esse resgistro?”. É isso que veremos nesse artigo; na verdade trata-se de um código simples, porém muito útil.

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.

Exibir mensagem ao passar o mouse na imagem com Javascript

Hoje descobri uma ferramenta muito interessante e também de fácil utilização e customização, que mostra uma mensagem ao você passar o mouse em uma imagem, ou até mesmo em um texto.

Fazendo trajeto no Google Maps com Javascript

Com o Google Maps (http://maps.google.com.br/), podemos definir trajetos de um ponto A a um ponto B, certo? Mas se uma empresa tem um site e quer mostrar o trajeto da casa do cliente até a empresa não seria legal mandar ela procurar no Gooogle Maps e sim criar um formulário em seu próprio site para mapear o trajeto.

Validando Formulários com Javascript

Com o PHP ou ASP, podemos validar um formulário, porém é necessário atualizar a página e tudo acaba sendo mais demorado. Com Javascript isso fica mais fácil, pois não é necessário nem atualizar a página. Mas lembrando que é necessário também a validação com o lado servidor (PHP ou ASP), pois o javascript pode ser burlado.

© 2017 Rafael Couto

Tema por Anders NorénSubir ↑