Ejemplo básico de Pusher + PHP + AJAX

¡Hola! En esta ocasión quiero realizar un ejemplo básico de Pusher usando PHP en el backend y jQuery en el frontend. El ejemplo consiste en crear un sencillo formulario para enviar una notificación o mensaje a otra página.

Vista previa del ejemplo:

¿Cómo integrar Pusher?

Lo primero que necesitamos, obviamente, es una cuenta de Pusher. Se puede crear desde el siguiente enlace: https://pusher.com/signup

Una vez logueados debemos crear una app. Son tres sencillos pasos: asignarle un nombre, elegir desde qué servidor transmitir la información, y seleccionar nuestro stack:

Front-end: jQuery – Back-end: PHP

Y después obtener las claves de la app:

Read More

Anuncios

Solución certificados auto-firmados dando problemas

Después de varias semanas de trabajo intenso puedo aprovechar un rato para explicar que tras integrar nuestro certificado auto-firmado de manera local, las nuevas versiones de Chrome (58+) y Firefox (53+) pueden negar el acceso a las páginas que tengan el certificado sin incluir Subject Alt NameEstas actualizaciones son para evitar que el ataque Punycode haga efecto.

No importa si el certificado está añadido al navegador, ni si lo tenemos agregado al Keychain (Mac OS X) como System o Root configurado en “Confiar siempre”. Es una decisión que toman los navegadores.

Importante:

Estos certificados NO son recomendables para ambientes de producción, están pensados para ambientes de desarrollo. La mayoría de los navegadores no reconocerían que este certificado haya sido emitido por una entidad confiable (como Verisign o GoDaddy), e impedirían el acceso a la página.

 

Problema de Chrome v57 con los certificados sin AltName

 

¿Cómo resolver este problema?

La única solución es rehacer los certificados que tengamos incluyendo una configuración especial para cada dominio. Para esto, debemos localizar nuestro archivo de configuración de OpenSSL, llamado openssl.cnfUna vez lo tengamos localizado, es posible que esté bloqueado contra escritura, pero no importa, únicamente tenemos que copiar todo el contenido y crear un nuevo archivo llamado, por ejemplo, openssl_tu-dominio.dev.cnf y guardarlo en la carpeta donde vayamos a generar los archivos del certificado.

Read More

Drag & Drop y redimensionado de imágenes

¡Buenas! En este primer tutorial de 2017, después de más de 2 años con el blog activo, quisiera enseñar cómo crear un drag & drop con HTML, PHP y Javascript.

El tutorial también enseñará a redimensionar y comprimir imágenes cuando estén siendo subidas, creando así miniaturas (thumbnails).

Vista previa del ejemplo:

¿Cómo crear un drag & drop?

Este desarrollo se hizo en local usando XAMPP. El único servicio activo es Apache (no requiero MySQL para este ejemplo).

Read More

Localizar direcciones usando Geocoder de Google Maps

¡Hola, felices fiestas! Uff, prácticamente 4 meses sin postear nada. Pero, hey, siempre estoy atento a los comentarios 😛

En esta ocasión quisiera compartir conocimientos de algo con lo que estuve trabajando recientemente: el servicio Geocoder de Google Maps Javascript API (v3). Este servicio (la geocodificación) consiste en convertir direcciones “humanas” a coordenadas geográficas (latitud y longitud) para poder mostrar un marcador en el mapa.

Vista previa del ejemplo:

Geocoder Google Maps Javascript API

Por fin un tutorial con estilos

Notas iniciales:

Para este tutorial necesitaremos una cuenta de Google.

¿Cómo usar Google Maps Geocoder?

Este desarrollo se hizo en local usando XAMPP. El único servicio activo es Apache (no requiero MySQL para este ejemplo).
Read More

Devolver JSON en PHP y obtener datos con AJAX

Devolver JSON en PHP y obtener datos con AJAX

¡Buenas! Nuevamente escribiendo un tutorial a finales de mes.
Mucho trabajo, por suerte.

Esta vez vengo a enseñar algo simple y útil: cómo devolver datos con PHP en formato JSON (objeto) y obtenerlos con jQuery AJAX. Además, veremos cómo enviar inputs HTML sin necesidad de tener un formulario.

Vista previa del ejemplo:

Obtener PHP JSON con jQuery AJAX

Datos enviados, mostrando la respuesta con JSON.stringify()

¿Cómo obtener JSON con AJAX?

En esta ocasión desarrollo en local con XAMPP 5.5.35-0 en Mac OS X.

1 de 2: HTML y JS

Lo primero es crear un documento que contenga 3 inputs. Lo más importante es asignarles un ID (único, por supuesto) para después obtener los valores con jQuery y enviarlos como un objeto a PHP. Antes del cierre de la etiqueta body debemos incluir la librería de jQuery. En este caso, yo uso la versión 2.1.0 minificada.

Añado un div con la clase respuesta para después mostrar el resultado.

Read More

Convertir fechas de PHP a castellano

¡Muy buenas! Escribo esta entrada el último día de este mes. Estuve bastante ocupado trabajando en un par de proyectos, y recién hoy tengo un día completamente libre.

En esta ocasión traigo un tutorial bastante sencillo, donde voy a enseñar como pasar de una fecha hecha con la función date() a un texto en castellano, conteniendo el nombre del día, el número del mismo, el mes y el año.

Para esto se usa este tipo de fechas:

30-04-2016 04:20:00

Que se crean así:

//Se define el timezone que sea necesario
date_default_timezone_set('America/Argentina/Buenos_Aires');

//Dia-Mes-Año Hora:Minutos:Segundos
$fecha = date('d-m-Y H:i:s');

Y obtendremos como resultado:

Sábado 30 de Abril de 2016

Es importante que los separadores de la fecha sean un guión y no una barra (-, no /). Los guiones definen el sistema de formato europeo, mientras que las barras definen que el formato es “americano” (estadounidense).

¿Cómo pasar la fecha a castellano?

Read More

Lista arrastrable con jQuery, jQuery UI, AJAX, PHP y MySQL

¡Hola! En esta ocasión voy a mostrar como crea una lista que pueda ser ordenada siendo arrastrada. Esto se realiza gracias a la función Sortable de jQuery UI. El orden será enviado a través de la función AJAX de jQuery, procesado a través de PHP y almacenado en MySQL.

El resultado es este:

Notas iniciales:

Para este ejemplo estoy usando una versión custom de jQuery UI (v1.11.4) que únicamente incluye UI Core e Interactions (ver en la web oficial), pero se puede usar la versión completa sin problema. La versión de jQuery es la 2.1.1 minificada.

¿Cómo crear una lista arrastrable?

Read More

Certificado SSL+TLS auto-firmado para XAMPP en Windows

ACTUALIZACIÓN DE ABRIL DE 2017: Solución certificados auto-firmados dando problemas

¡Hola nuevamente! Realizo el segundo tutorial de este mes por la necesidad de explicar cómo generar certificados SSL auto-firmados (self signed SSL certificate) para XAMPP. El proceso será muy detallado, explicando todos los comandos que realizaremos.

Lo cierto es que en los últimos días estuve leyendo un par de tutoriales que no explicaban totalmente porqué se realizaban esos pasos, o cometían fallos respecto al almacenamiento de los certificados y las claves. Por eso, hoy traigo este tutorial, donde enseñaré a crear un certificado SSL para localhost y otro para un virtualhost en Windows utilizando OpenSSL 1.0.2.

Notas iniciales:

Este tutorial se realizó en Windows 7 (64 bits) recién instalado en una máquina virtual (VirtualBox) (esto no hace que varíe nada, es solo un detalle), utilizando un XAMPP (Apache 2.4.18) recién instalado con la versión 3.2.2 (compilado: 12 Noviembre 2015). Para seguir este tutorial es necesaria una cuenta de administrador.

Importante:

Estos certificados NO son recomendables para ambientes de producción, están pensados para ambientes de desarrollo. La mayoría de los navegadores no reconocerían que este certificado haya sido emitido por una entidad confiable (como Verisign o GoDaddy), e impedirían el acceso a la página.

¿Cómo generar un certificado para localhost?

El primer paso es generar una carpeta donde guardaremos nuestros certificados. Esta carpeta debemos crearla en la carpeta conf que está dentro de apache. La ruta, siempre teniendo en cuenta que se haya instalado XAMPP en la ubicación por defecto, sería:

C:\xampp\apache\conf

A esa carpeta yo la llamaré mis_certificados, pero puedes nombrarla como desees.

Dentro de mis_certificados, crearé una carpeta para el certificado de localhost. A esta carpeta la llamaré localhost, aunque puede llamarse de cualquier manera, pero esto lo deja más organizado.

Read More

Generar SQL desde Arrays de inputs HTML5

¡Muy buenas! Este segundo tutorial del año se centrará en resolver una duda general: cómo obtener [en PHP] los datos de un formulario con inputs que sean arrays e insertar esos datos con SQL (por ejemplo, a MySQL).

Un ejemplo de los input array es este:

<input type="text" name="nombre[]">

Como se puede apreciar, el nombre del campo es nombre[], donde los corchetes hacen que el input con el mismo nombre sepa “auto-identificar” que es un array, y poder tener así varios inputs con el mismo nombre. Esto se utiliza generalmente cuando son necesarios varios inputs para procesar diferentes datos.

¿Cómo pasar cada dato a PHP?

Read More

Acceso y registro con HTML, AJAX, PHP y MySQL

¡Hola a todos y a todas! Comienzo este 2016 (un poco tarde, estaba descansando 🙂 ) con un tutorial donde mostraré cómo hacer un acceso y registro de usuarios básico basado en HTML, AJAX, PHP y MySQL.

En esta ocasión, utilizaremos y configuraremos cookies de sesión con PHP, y también comprobaremos si el usuario está logueado (si tiene la sesión iniciada) o no. Representado en un diagrama de flujo, sería algo así:

Diagrama de flujo

Diagrama de flujo

Entonces, comencemos.

¿Cómo crear un sistema de usuarios?

Read More