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

Backup de Dropbox con Automator en Mac OS X

¡Hola! Hace aproximadamente un mes se me quemó la motherboard de la notebook donde, entre otras cosas, creaba estos tutoriales. Precisamente por ese motivo no pude realizar un tutorial el mes pasado, y apenas publico este a fin de mes. Quiero agradecer a mi jefe por permitirme el uso de una computadora con Macintosh para realizar este tutorial.

¿Qué traigo esta vez? Hoy traigo una manera de resolver una particularidad del nuevo trabajo donde estoy ahora, y es que en una Macbook estoy como desarrollador y, usando XAMPP como servidor local, necesito hacer backups diarios. Si conoces un poco acerca de este programa, sabrás que todos los documentos se guardan en una carpeta llamada htdocs. Bien, para que otros miembros del equipo de trabajo puedan ver ciertos cambios lo ideal es tener todo actualizado en Dropbox.

Como instalar XAMPP en Dropbox no me pareció muy inteligente (sobre todo por el tamaño máximo de la cuenta), empecé a toquetear Automator. Acá les muestro lo que aprendí.

Comencemos.

Notas iniciales:

En esta ocasión estoy usando OS X El Capitán el cual está en inglés, así que algunas traducciones podrían no ser exactas.

¿Cómo automatizar backups en Macintosh?

Obviamente lo primero que necesitamos es abrir la app de Automator, la cual suele estar en la carpeta Aplicaciones.

Al abrirse nos preguntará qué tipo de documento queremos comenzar. Para que todo sea automático, crearemos un evento en el calendario, aunque podría ser una App sin problemas.

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

¡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

Paginación con PHP y MySQL

Antes de comenzar con este tutorial, el cual será el último de este año 2015, quisiera agradecer a todos los que han compartido y comentado los tutoriales aquí expuestos. Más de 16.000 visitas avalan la confianza que ustedes, los lectores, tienen en estos textos.

Sin más dilación: pasemos a crear una paginación simple basada en PHP y MySQL.

¿Cómo crear una paginación?

Personalmente seguiré desarrollando en local, utilizando XAMPP (Apache y MySQL con PHPMyAdmin) en Windows.

1 de 3: MySQL

A diferencia de otros tutoriales, esta vez empezaré por la base de datos, pues es de ahí de donde debemos obtener los datos necesarios para proceder. Como siempre, estoy trabajando sobre una base de datos llamada mmv con cotejamiento utf8_spanish_ci. Dentro tengo una tabla llamada mmv004 que tiene tres columnas. El motor de almacenamiento es InnoDB.

  1. id -> INT(5) -> A_I -> primaria
  2. nombre -> varchar(20) -> utf8_spanish_ci
  3. edad -> INT(2)

Read More

5 páginas de stocks gratuitos

Desde hace un tiempo soy poseedor de una cámara semi-profesional (una DSLR), y por ello en los trabajos que realizo donde se precisa algún stock o mockup no tengo problema en realizar yo mismo las tomas necesarias.

Pero, siendo que a veces no se dispone de una cámara de gran calidad, o simplemente no se tiene el tiempo necesario, podemos acudir bancos de imágenes o stocks gratuitos. Personalmente me gustan gratuitos y sin necesidad de retribuir derechos de autor (CC0) para usar esas imágenes de manera personal o comercial. Por eso, hoy te presento cinco páginas web con cientos de fotografías gratuitas🙂

1) Startup Stock Photos

Una de las páginas más utilizadas y reconocidas entre los diseñadores. Este banco, donde predominan las imágenes de tecnología (ordenadores/computadoras, teléfonos…) y situaciones de oficina fue creado y es mantenido por @estrattonbailey@wearesculpt bajo una plantilla de Tumblr.

Sus imágenes forman parte de artículos de MashableWeb Designer Depot, Platzi, The Next Web, Business Insider, entre otros sitios web de prestigio. También están en Mi Mente Vuela, claro😉

Read More